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>

<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!

The post Triggering a ‘finish’ event on an external video with Storyline HTML5 appeared first on Purple Squirrels.