Forum Discussion

fabian's avatar
fabian
Community Member
2 years ago

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 by this, I'm attempting to achieve a similar outcome with videos hosted on the Kaltura video platform. Like YouTube, Kaltura provides access to its player API, which I'd like to leverage.

With ChatGPT's help, I've successfully created a test HTML site featuring an embedded video, where I can retrieve the current player state. You can find the demo file attached for reference. To view the player state, simply open the site locally, launch the developer console, and enter "videoStatus."

My challenge now is to integrate this functionality into Storyline. However, I'm struggling to make it work and haven't received any error messages that could guide me.

I'm wondering if anyone here has experience working with the Kaltura player API in Storyline and can offer some advice or direction.

Thank you in advance for your help!

  • 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 ends
    var 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

    • MaryGoemanRealo's avatar
      MaryGoemanRealo
      Community Member

      I'm trying to get your code to work - do I just swap out the source Kaltura file location in the html document?

      • CraigBunyea-23d's avatar
        CraigBunyea-23d
        Community Member

        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.

  • fabian's avatar
    fabian
    Community Member

    That would be great! I'm also happy to jump on a call and go over what I've done so far.

  • I'm going to pull in our web developer today on this.  He uses the API to pull data into our LMS.  I'm sure he may have some thoughts on this.  I'll report back if he provides any insight.

    Graham.

  • fabian's avatar
    fabian
    Community Member

    Thank you both for your input. I have successfully embedded the video using a web object in Storyline, and to ensure that the video is not muted at the start, I added the parameter 'flashvars[mute]=false'. In my use case, autoplay is not necessary.

    My objective is to retrieve the current player state using the Kaltura player API. I aim to update a Storyline variable and trigger an action when the video ends. While I can currently see the current player state in the console, I lack sufficient JavaScript knowledge to update the variable in Storyline.

    I attempted to use the GetPlayer() function from Storyline and employed the sl.SetVar("vidStatus", videoStatus) method, similar to the process with the YouTube API. However, I have not yet achieved success with the Kaltura API.

  • it looks like the player was developed about 10 years ago - and this is what it looks like (not as nice as the one on the marketing website in the promotional videos)

    large parts of kaltura websites do not have https yet (only unsecured http connection) - the developer does not have a high priority

  • i have tried with the kaltura embed player, the integration is basically the same as the youtube or vimeo integration

    before you can really use it, kaltura has to solve the problem with the autoplay

    • when you turn autoplay on, the videos always start muted - tested on firefox and chrome
    • if you turn off autoplay, the videos start correctly with sound

    the autoplay has solved youtube, vimeo and other video platforms much better

    in the attachment an extended html (css + autoplay active + console.log)

  • This is something I would be very interested in learning more about.  We use Kaltura here as our video platform and would very much like to use the API to embed our videos directly within our SL courseware.  I'll do some research and will post back anything I find.

    Thanks for bringing this up.

    Graham