Detecting end of Wistia video with javascript
Jun 02, 2015
By
Mike B.
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
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!
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.
Hi Mike,
I hope someone in the community is able to assist here, as the Javascript element is not something we'll be able to support. There are some Javascript best practices outlined here.
Thanks Ashley. Unfortunately, my javascript programming skills are below beginner level, so it makes it difficult for me to troubleshoot even after I have all the code where I think it belongs. :)
Mine are non-existent... :-) Hopefully someone in the community is able to assist!
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
Thanks Mike for sharing the code here - glad you were able to figure it out.
Thanks for sharing this Mike. This is exactly what I was looking for. I've just done a little test and it works perfectly :)
Steven,
Thanks for posting this. I'm glad all of my trial and error was able to help someone else out too!
This should also be able to be accomplished with Vimeo in a similar fashion, using their javascript API.
Thanks,
Mike
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.
Yes, Wistia costs a little more than Vimeo, but they seem to have more features in that area.
I placed my video only on the base layer. If you are placing it on a separate layer, you may need to use the javascript API to stop the video from playing (with a trigger) when that layer is hidden.
Thanks Mike, I'll look into how to do that.
It looks like the pause() method in the API would do the trick. I'm no javascript wizard though, otherwise I'd give you some working code. :)
No joy with pausing the video I'm afraid. Storyline doesn't seem to like the API version of the embed code from Wistia. Might have to revert to putting my embedded videos on separate slides as a workaround.
Steven,
I'm looking into this now. Did you have a sample story file you could send for me to look at?
Thanks,
Mike
Thanks Mike, that's much appreciated. I'll send you a link shortly.
Hi, Mike.
I know this thread is kinda old but I'm unable to replicate it. I copied the Javascript code but the EndofVideo variable in SL 2 doesn't change after the video ends. Is there anything else I need to do other than embedding the wistia video using that code? Thanks!
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
Hi I tried downloading this to see if I could work out how it was done and then apply it to Brightcove, but I cant seem to see even where the code is added.
The web object just has this in it: Z:\working\Wistia
And there is no Javascript trigger in the storyline file - how does it work?
Thanks for the reply, Michael but I'm on the same boat as Lizzie. Is there a way to see the embed code for the web object in your SL2 file?
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.
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:
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.
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.
Well, it appears it's CHROME that is not auto-starting the video clips, IE seems to start each clip automatically. *sigh*
So close, and always one more thing.
Is there a javascript solution for detecting that an imbedded object is fully loaded and force starting it?
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.