Anyone using Brightcove and utilizing the ended event to trigger a variable in SL?

Dec 09, 2016

Michael Shannon
By Michael Shannon

We've recently moved over to Brightcove from Vzaar. Using Vzaar's API we were able to change a variable in Storyline when a Vzarr streaming video ended. 

Has anyone been able to do the same using Brightcove? Care to share your Javascript? 

10 Replies
Leo Mariner
7 years ago03/05/17 at 9:15 pm (UTC)

Hi Michael,
Were you able to figure this one out?


I am in a similar position with some compliance training. I have embedded videos that need to be watched without scrubbing (which I can see can be done in Brightcove by disabling scrubbing in the source code - trying this tomorrow) but the real issue I have is I need some kind of trigger that activates the next slide in Storyline 2 when the videos end.

 

Michael Shannon
7 years ago03/06/17 at 10:04 pm (UTC)

Hey Leo. Yes indeed, I did find the pot at the end of the rainbow. I'm happy to share my lucre. 

Here's the steps and the javascript/html you need to find your pot 'o gold. 

  1. This is going to sound crazy but the first thing you need to do is create a folder for each video you need to stream. This folder has to be in the same folder that you're Storyline file resides so it can wrap it up when you publish. 
  2. Inside of this folder will be one file called index.html. 
  3. The html for this file is the following: 
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    </head>
    <body>

    <style>
    body{padding:0;} /* make sure the video sits on the top left of the web object */
    </style>
    <!-- this video element will load and display your video -->
    <video id="movie" data-video-id="ENTER-YOUR-VIDEO-ID-HERE"
    data-account="ENTER-YOUR-ACCOUNT-NUMBER-HERE"
    data-player="default"
    data-embed="default"
    data-application-id
    class="video-js"
    controls
    style="width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;"></video>
    <script src="http://players.brightcove.net/ENTER-YOUR-ACCOUNT-NUMBER-HERE/default_default/index.min.js"></script>
    <script>
    // add an event listener to the video element to listen for the 'ended' event
    var myPlayer;
    videojs("movie").ready(function(){
     myPlayer = this;
     myPlayer.on("ended", function(){
     triggerSL();
    })
    // this is called when the above event fires. It looks for the Storyline player and sets the variable in the project called 'videoend'
    function triggerSL(){
    // the web object will be an iframe, so look at window.parent to access the actual Storyline player
    window.parent.player.SetVar("videoend", "true");
    }
    });
    </script>

    </body>
    </html>
    Note the three places (in caps) you'll need to change for your account number and video number. This will work for all browsers including IE all the way back to IE8. If you don't need to support 8 then you can take out the js hack for it on line 9. 
  4. In your Storyline file add a web object to your page and link to the folder you created in step 1. 
  5. Create a T/F variable and call it videoend. If you need to use another name be sure to change the reference to it in the html/js on line 37. 
  6. You now have access to the videoend var to trigger whatever you want. 
  7. When you publish the file, as long as you have your video folders (you need one for each video) in the same place as your .story file, you will have successfully accomplished your goal. You have to upload it to a web server or LMS to test it. 

Let me know if you have any questions or if you need to know how to locate unicorns. 

Leo Mariner
7 years ago03/08/17 at 7:06 am (UTC)

Michael, you are a legend!!! Thank you so much for responding.

 This is brilliant and works exactly as you say.

The project I am working on is compliance base training, I imagine you probably already have this code but if you are looking to remove the scrubbing bar from a BC player add this,

 

<script>

              var player;

              videojs("player").ready(function(){

                             player = this;

                             player.controlBar.progressControl.seekBar.hide();

              });

</script>

 

 

L

Leo Mariner
almost 7 years ago05/22/17 at 6:38 am (UTC)

Hi Michael,

I am having to move a lot of Articulate SCORMS across to HTML5 as we are stopping Flash running on our browsers. When I use the code and webobject method you kindly detailed in a flash based SCORM it works perfectly. However when I publish to HTML5 it doesn't work so when the video ends it doesn't see 'videoend' and then progress. Its as if it cant see the javascript at all. The videos players I am using (for both Flash and HTML5 Scorms) are Brightcove HTML5 players and not the flash players they use to have a long time ago so nothing has changed there. The Index.html files are the same so I don't understand it.

I have read that there are some limitation with Articulate Storyline 2 and 3 publishing to HTML5 only, but I am not sure if this is what is causing my issue as it seems too straight forward and simple for it to not work?

(the Flash and HTML5 SCORMs are played through a SABA cloud LMS)

Please can you tell me if you have ever tried your method in HTML5 and is there something else I should be adding to get it to work?

Thanks

Leo

This E-mail is from Time Inc. (UK) Ltd., a company registered in England and Wales, whose registered office is at Blue Fin Building, 110 Southwark Street, London, SE1 0SU, registered number 53626, VAT number 646150645. The contents and any attachments to it include information that is private and confidential and should only be read by those persons to whom they are addressed. Time Inc. (UK) Ltd accepts no liability for any loss or damage suffered by any person arising from the use of this e-mail. Neither Time Inc. (UK) Ltd nor the sender accepts any responsibility for viruses and it is your responsibility to check the email and attachments (if any). No contracts may be concluded on behalf of Time Inc. (UK) Ltd by means of e-mail communications. If you have received this e-mail in error, please destroy and delete the message from your computer.
Great savings on over 50 magazine subscriptions at www.magazinesdirect.com
Please consider the environment - only print this e-mail if absolutely necessary

Ashley Terwilliger-Pollard
almost 7 years ago05/22/17 at 2:42 pm (UTC)

Hi Leo,

Looks like your email signature came through when you replied via email! No worries, this Peek video will show you how to remove it. 

As for HTML5 only/first publishing - that's an option introduced with Storyline 360 and Storyline 3. If you're using Storyline 2 and HTML5 output is a hight priority, you may want to take a look at the trial and how that impacts your published output and the videos!  I'll defer to the community for some additional expertise on Brightcove's video player.  

Michael Shannon
almost 7 years ago05/22/17 at 4:22 pm (UTC)

Hey Leo. I publish to Flash and HTML5. I test on tablets, including the iPad. When using the above  instructions I have had no trouble viewing the HTML5 version on the iPad (the only delivery option on that device as you know). I am currently using SL2.

It might be your LMS. Have you tried testing on SCORMcloud? 

This discussion is closed. You can start a new discussion or contact Articulate Support.