Forum Discussion
Using Kaltura Player API in Storyline
Hello everyone,
I recently came across Chris Hodgson's fantastic tutorial on utilizing the YouTube API to enhance embedded video functionality in Storyline (https://youtu.be/_4e0DSJp3cY). Inspired...
I too was "in the same boat" wanting to leverage the Kaltura js API. The page that made it 'click' for me was this Dynamic Embed sample
So for Articulate developers, you'll want to embed a Web Object in your course, and point to some html like I've attached (rename index.html). If you used to create Flash (remember that?) this method will look familiar. Once the js script is executed you'll have the all-important kWidget DOM object to work with.
The Kaltura API looks rather robust. It has flags for 25, 50 and 75% completion (firstQuartile, etc.), and can even track that the progress bar was used (seeked) witha duration callback.
All the embedded HTML needs to do then is manipulate/toggle some variables in your Articulate file. I just wanted a disabled Next button to become enabled on video completion.
NOTE: Because of cross-frame blocking policies, you won't be able to test this just opening in Chrome (with the Web Server Extension), you'll need localhost, or a stage server to see it work.
// when video endsvar player = parent.GetPlayer();
player.SetVar("videoIsComplete","Yes");
}
When creating the kWidget object, you should be able to obtain all the specific id's from the <iframe> of link code Kaltura provides you for the video you'll be accessing. Hope this helps.
Link to Kaltura's API documentation
I'm trying to get your code to work - do I just swap out the source Kaltura file location in the html document?
If by source Kaltura location, you mean the <script src="...">, yes. But you'll need to update parameters of the kWidget.embed({...}) script to match as well, since you are initializing a video player object as well.
You can find/extract targetId, wid and uiconf_id in that preceding src URL. Not sure if entry_id needs to change (or where that came from). And remember to create a custom variable in your .story file called videoIsComplete (I used Yes/No strings, but you could use whatever). And of course delete all that text in the <body>, that was just reference material.
