Trigger Next Button to show when video (web object) ends

I have a video on a slide as a web object (due to the size of the video file and the url of the file I can't get it to work as insert video (embed code not valid)).

I have a trigger which hides the next button at the start of the timeline.

I want the user to watch the video before the next button shows.  Is there a way to do this with a web object that is a video?  Note: the video does not autoplay.  The user must click the play button.

I'm using Storyline360

Cheers,

 

Kimberley

65 Replies
Matthew Bibby

Gotcha. Well in that case, it is probably easiest to just use something like Vimeo's API to communicate that the video is completed with Storyline.

There are other options (e.g. I often use a self hosted version of JW Player - but it has licensing costs).

You can also code your own video player and set that up to communicate with Storyline. If you are publishing just to HTML5 that is not overly difficult, however, if you need to support older browsers then it'll become increasingly complicated. To get started, see the HTML Audio/Video DOM ended Event page on w3schools.

Joanna Kurpiewska

@Matt - thanks for the link.

@Michael - I'm trying to use my basic knowledge in JS but still no luck (the video is playing but variable doesn't change) so if you're happy to take a look here's code I'm working with:

Thanks so much.

<!DOCTYPE html>
<html>
<body>

<video id="myVideo" controls autoplay controlsList="nodownload" width="630" height="473">
  <source src="video1_hb.mp4" type="video/mp4">
  <source src="video1_hb.ogg" type="video/ogg">
  <track src="cc.vtt" kind="subtitles" srclang="fr" label="French">
</video>

<script>
var vid = document.getElementById("myVideo");
vid.onended = function(){callEnd()},

function callEnd() {
    var player = parent.GetPlayer();
    player.SetVar('videoEnd', "true");
    }
</script>

</body>
</html>

Michael Anderson

Joanna, I started with the base project I had working before, and modified it so that it referenced a local file that is embedded in the course. This should work the same whether or not the project is run from the web or run locally - the video file reference is relaive, so it will load the video from the web if run from the web. It works fine for me in Firefox. Please test it out and let me know if you need further help. Sorry about the time zone delays and that I didn't get to this yesterday. See file attached.

Joanna Kurpiewska

Thanks for your help and time Michael. Can you also share your modified index.html file so I can check it with my files please?

Currently I'm testing this code but variable doesn't change when video ends (tested on IE, Firefox and Chrome) and when the slide starts on IE and Firefox I get an message asking whether I wan to download the video:

<iframe src="video1_hb.mp4" width="630" height="473" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var SLplayer = parent.GetPlayer();
    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);

    player.on('play', function() {
        SLplayer.SetVar("videoEnd","Playing video now");
    });

    player.on('ended', function() {
        SLplayer.SetVar("videoEnd","True");
    });

</script>

I'd need to make it work on all browsers ideally...

Michael Anderson

You can always view the content of the web object by publishing the project and then viewing it the output folder, but I've attached that one here for you.

It looks like your code above is a little mixed up. You're trying to load a local mp4 file but you're loading the Vimeo Player. You can use that only with Vimeo videos. You will have to use the VideoJS player or another to load your own mp4 files. Check out the attached index.html file. I don't have Chrome installed right now, but I did test it in Firefox and IE11.

Joanna Kurpiewska

Hi Michael,

thanks again for your help and sorry for the delay. I had a chance to test your code today. It works fine, the variable changes once the video finishes (tested as upload to website) but for some strange reason it doesn't trigger the action to jump to next slide in Storyline.

I can't figure out what the issue is...

Joanna Kurpiewska

Thanks so much for help, Michael. I've used your SL file and just replaced web object with my own assets. Jumping to the next slide works well...but only in the flash version. For HTML5 variable changes at the end of video but slide doesn't advance. Here are links to compare:

http://demo.wolflearningconsulting.com/testFile/story_flash.html

http://demo.wolflearningconsulting.com/testFile/story_html5.html

Do you think there's any solution for that?

Michael Anderson

Joanna, there was a variable type mismatch between the javascript code and the Storyline project. In the js code I was treating the videoEnd variable as a text variable by placing the "true" value in quotes. I deleted the variable in Storyline and re-created it as a text variable, then re-created the trigger and now it works. If the code was the same in the Storyline2 project, then there may be a difference with how the variables are treated with SL360. See attached project file.