Triggering a ‘finish’ event on an external video with Storyline HTML5

If you have at some point needed to use Articulate Storyline – you have probably come to a point where you want to murder everyone around you (not literally of course!) due to its ridiculous, quirky limitations. More often than not I find myself hacking the published code to make things works how I want.

One of the big limitations in Storyline is video – if you want to trigger something when the video starts or finished you must use the built in player. But the built in player cannot load videos from an external site (such as a streaming server – a common requirement) so you are left with using the ‘video embed code’ option, which doesn’t seem to allow custom embed codes – all I could get to work was YouTube and Vimeo. And even if you can get this to work you can’t add triggers to it for when the video ends.

I found a little hack which uses the Web Object and a custom video player in a HTML page. You can listen for the video complete event in the custom player then change a variable in the Storyline player. Then in Storyline add a trigger for when that particular variable changes, which will be when the video finishes.

Here’s how to do it.

First create a folder in the same location as your Storyline file called ‘video’, and then inside this folder add a new ‘index.html’ file with the following, replacing the video src with the path of your video.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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">
</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" src="<link-to-your-video-file>" width="500" height="380" autoplay="true" controls></video>
<script>
// add an event listener to the video element to listen for the 'ended' event
document.getElementById("movie").addEventListener("ended", function(){
    triggerSL();
}, true);

// 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"+Math.round(Math.random()*100000));
}

</script>
</body>
</html>

Then in Storyline on the slide you want add the video – insert a new Web Object and browse for the video folder we created above.

Next create a variable called ‘videoend’ and set the value to whatever you like.

Finally add a trigger to the slide ‘When videoend variable changes’ and perform any action that you need. The action will then be triggered when the variable changes – which is when the video in the Web object finishes playing.

Good luck – I hope this is useful to someone else!

Posted toJavascript Storyline
  • Christoph Krieger

    Awesome.

    Many thanks for this.

  • Ryan

    Nice job Ben, Can Storyline communicate back to the html page with a variable?

  • Sleahcim

    I’ve tried to get this to work without any success. I’ve double-checked the instructions to ensure I’ve followed them to a T. I have. To test it I put the var in a textbox (%videoend%) in it to watch if the default (false) changes to true. It does not. Did you test this with SL2? Any suggestions are welcomed.

  • Jacqui

    This works great- thanks! How would I be able to iterate a variable, instead of setting it to true/false?

    • I haven’t used Storyline in quite a while, but you might be able to use:

      var value = parseInt(window.parent.player.GetVar(“myvar”), 10) + 1;

      to get the value add 1 to it, and then send it back to the Storyline player with:

      window.parent.player.SetVar(“myvar”, value)