Detecting end of Wistia video with javascript

Jun 02, 2015

The Wistia video streaming service (like Vimeo) has an API that allows one to act on events in the video, such as when the video ends. I'd eventually like to get this code to change a SL variable, which will allow my trigger to advance the course to the next slide. At this point, I can't even get the "alert" window to popup at the end of the video.

I've attached my .story file below. Can someone proficient in javascript take a look to see if I've done something obviously wrong?

Here's the link to the documentation from Wistia: http://wistia.com/doc/player-api

Thanks,

Mike

26 Replies
Jackson Hamner

Did you add an iframe element with the ID you're looking for in your story.html file? GetElementByID() looks through your projects HTML document for an element with the ID in the parenthesis.


I'm not sure this is going to work how you'd like it to. To me it looks like their API is more about embedding videos on a website, so I'm not sure you'd be able to bring up or reference the video inside your storyline course. I'm no expert, but thats what my first impression was from skimming the documentation.

You might also try asking your api question here, there may be someone whose knows more about this over there?

I hope you can get it working!

Mike B.

Yes, I did embed the iframe with the ID "wistia_embed", I believe. You should have been able to see that in the .story file I attached. The video did embed into the SL slide fine, and plays fine, although you do have to publish the story content to a webserver to play it. The javascript alert just isn't firing when it's supposed to.

I'll take a look at that other forum tomorrow. Thanks.

Mike B.

I finally figured this out and wanted to post back in case this would be helpful to anyone else. The Wistia API has many methods (http://wistia.com/doc/player-api) that let you GET or SET the state of the embedded video. Using this with SL variables and triggers can give one great interactivity with the embedded video in SL.

Below is the code to be inserted in the "Insert Video from Website" code area. I'm utilizing the "end" method here, but you can replace that with whatever suits your needs.

To make all of my slides auto-advance at the end of the embedded Wista video, I've placed two triggers on my Slide Master, in this order:

1. Set EndofVideo equal to off When the timeline starts (this resets the variable from the previous slide)

2. Jump to next slide When EndofVideo changes If EndofVideo is equal to on

<script src="http://fast.wistia.net/assets/external/E-v1.js"></script>
<iframe src="http://fast.wistia.net/embed/iframe/StringForVideo" allowtransparency="true"
frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen=""
mozallowfullscreen="" webkitallowfullscreen="" oallowfullscreen="" msallowfullscreen=""
width="640" height="360"></iframe>

<script type="text/javascript">
wistiaEmbeds.onFind(function(video) {
video.bind("end", function() {
var player = parent.GetPlayer();
player.SetVar("EndofVideo","on");
return this.unbind;
});
});
</script>

I hope this help some others.

Thanks,

Mike

 

Steve Andrews

Thanks Mike, I'll bear that in mind. We've opted for Wistia for now; mainly because of the marketing tools they offer. 

When you embedded videos, did you do it on the base layer or on a separate layer? I've noticed that if you do it on a separate layer, the audio from the video still plays after the layer has been closed.

Michael Anderson

Bruce, I modified the original author's code slightly and created the attached Storyline 2 project. It looks like for everything to work javascript-wise, it must be published and viewed from an actual web site and not view locally. http://www.andersonelearning.com/demo/wistia_api/story_html5.html

Michael Anderson

Web Objects get embedded into the project file when added to the project. You can get them back by publishing the project and then finding the web object in the published output. I've attached an updated version of that project, along with the web object html file. In this project, the javascript that changes the variable is all in the web object. Let me know if you need more help.

Jerry Beaucaire

I've got a large WISTIA project I'm trying to pull snippets in sequentially and have them play autimatically like one long video.  I've tried the suggestion above and nothing seems to be happening.

I've even added a TOGGLE button so that I can toggle the EndofVideo variable to ON and the slide instantly advances, so the Storyline side is working.  So it must be the JAVASCRIPT is not working for getting and "end" notice from WISTIA.

REVIEW PORTAL EXAMPLE: 

https://360.articulate.com/review/content/44d2b0a7-573d-403b-a568-e422ff885a8f/review 

Here's my imbed video, which DOES work, with the added GetPlayer stuff, which doesn't seem to be working:

<script src="https://fast.wistia.net/assets/external/E-v1.js" async=""></script>
<div class="wistia_responsive_wrapper" style="height:720;left:0;position:absolute;top:0;width:1280">
<iframe src="https://fast.wistia.net/embed/iframe/27h566a1e6?seo=false&videoFoam=true&autoPlay=true" title="Wistia video player" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="1280" height="720"></iframe></div>

<script type="text/javascript">
wistiaEmbeds.onFind(function(video) {
video.bind("end", function() {
var player = parent.GetPlayer();
player.SetVar("EndofVideo","On");
return this.unbind;
});
});
</script>
Jerry Beaucaire

Well, I tweaked it one more time to take out some extra stuff the Storyline seemed to have added in to make it look exactly like your original code above, and now it IS working to advance to the next slide at the end of the WISTIA imbedded videos.

<iframe src="https://fast.wistia.net/embed/iframe/27h566a1e6?seo=false&videoFoam=true&autoPlay=true" title="Wistia video player" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="1280" height="720"></iframe>
<script src="https://fast.wistia.net/assets/external/E-v1.js"></script>

<script type="text/javascript">
wistiaEmbeds.onFind(function(video) {
video.bind("end", function() {
var player = parent.GetPlayer();
player.SetVar("EndofVideo","On");
return this.unbind;
});
});
</script>

So, awesome!

Now, if I can just find a way to get each of the WISTIA video snippets to START automatically at the beginning of each slide, we're in business.

As you can see in the REVIEW link above, the first slide does start on it's own (with no sound) but all other slides require a click to start them.

 

Ashley Terwilliger-Pollard

Hi Jerry,

I'll leave the Javascript pieces to the community of experts (while beyond my knowledge!) but I did want to point out the changes to Chrome and videos is detailed a bit more here. Chrome changed their autoplay policies and Storyline and Studio have been updated accordingly to allow for a fix. 

Let me know if there is anything else I can help with! 

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