How to use vzaar (video from website) to change a variable when video ends

Oct 15, 2015

I spent quite a bit of time on finding a solution to this and thought I would share the results with the community. 

First the challenge:
I needed to stream a video from a video streaming service that I uploaded, in this case vzaar. When the video ends have a variable change, in this case from false to true so I could auto advance to the next page. 

The solution:
1. In Storyline create a variable with a type of true/false and set the default value to false. I created one called EndofVideo.
2. Create a trigger that jumps to next slide when variable changes (EndofVideo) on condition EndofVideo is equal to true
3. If you use this on more than one page you'll also need to create a trigger on each page that you use this and set EndofVideo to false when timeline starts then put the trigger at the top of the list so if fires first. That way when you flip the variable to true in a previous page you reset it on the next. 
4. Now insert your video: Insert > Video > Video from Website. In the text box paste the following code: 

<script src="http://player.vzaar.net/libs/flashtakt/client.js" type="text/javascript"></script>

<script type="text/javascript">

window.addEventListener("load", function() {
var vzp = new vzPlayer("vzvd-5408522");
vzp.ready(function() {
vzp.addEventListener("playState", function(state) {
if (state == 'mediaEnded')
{
var player = parent.GetPlayer();
player.SetVar("EndofVideo","true");
}
});
});
});


</script>

<iframe allowfullscreen="" allowtransparency="true" class="vzaar-video-player" frameborder="0" height="324" id="vzvd-5408522" mozallowfullscreen="" name="vzvd-5408522" src="http://view.vzaar.com/5408522/player?apiOn=true" title="vzaar video player" type="text/html" webkitallowfullscreen="" width="576"></iframe>

Note: in this example code my video is indicated by the vzaar id of 5408522. You'll need to change these to the id of your video. 
5. Publish and upload to your server of choice and test. It has to be uploaded to a webserver in order to work. 

Let me know if you have any questions. I've attached an example for clarity. 

I want to give a big thanks to Mike B. (Mike Tobias) for his help. Although he uses Wistia and his code is different, he showed me that it was possible to do this. And, to the folks at Vzaar, who have been very helpful in pointing me in the right direction so we could find a solution. 

1 Reply

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