Embedded Video Trigger & Javascript
May 19, 2017
Hello articulate/javascript gurus,
I am embedding a 4 minute VIMEO video into my eLearning module. I would like to have the next button appear only when the video ends (user can either watch the entire video or scrub through to the end). I know the default triggers only work with videos that have been imported in Storyline. With an embedded video, Storyline 'has no way of knowing' when the hosted video completes.
I followed some steps from another post: https://community.articulate.com/discussions/articulate-storyline/embedded-video-trigger and have the following set up:
1) Storyline variable (named 'VideoFinishedEvent'), type: text
2) I then set up the execution of a javascript to change the variable 'VideoFinishedEvent' to the current time in milliseconds
I'm wondering if there's a way to manipulate the javascript code above. If I set my 'VideoFinishedEvent' variable to FALSE by default, can I then have the javascript execute to change the variable to TRUE when the vimeo video timeline reaches the end?? If that's possible, I can then link my next button to appear when the variable equals true!
I don't have a lot of knowledge/background in javascript. Any insight or help would be greatly appreciated.
31 Replies
The vimeo support folks should be able to help you out here, as I believe their video player has a scriptable interface including event notifications. Basically register some script you write with their player's "done" event. Your script then sets the javascript variable. Fancier solutions exist, but they require quite extensive knowledge of scripting and event models
Good luck
Bridgitte,
Check out the attached project to see if that's what you need. It's an SL3 file, let me know if you need SL2 format. This should display the NEXT button when the video ends. Let me know if you can figure it out from here, or if you need more help.
Thanks,
Michael
Hi Michael,
Sorry to be replying so late! Thanks for offering a solution to my issue. Unfortunately my SL3 trial has expired so I can't open your file. Can you please provide me with the SL2 format so that I can take a look at your suggestion?
Thanks so much in advance!
Thanks for the suggestion Brian. I've reached out to the vimeo folks but they unfortunately don't provide any support for changing java script code.
Well that wasn't a lot of fun converting back to SL2. :) Hey Articulate, is it possible to copy ANYTHING from SL3 to SL2 without it showing up as an image? I couldn't even copy a text box from one to the another...
Anyway, the SL2 version of the file is attached. Oddly, I couldn't find Vimeo's public link to their player.min.js file, so I just downloaded the one from Github and embedded it locally. You will need that file in your webobject folder. I've included the project file, player file, and index.html I used for this. Please let me know if you have any questions.
Well I guess I can attach only one file per message...
Index file
Hi Michael! Thank you so much for taking the time to look at this for me! You deserve a round of applause for all your work. And I apologize that the conversion back to SL2 was such a headache. Hopefully Articulate can fix that soon ;)
I just downloaded your storyline file and published. I see the video status reference text but unfortunately it didn't change when the video ended, and therefore the next button didn't appear. Am I doing something wrong? When the video finishes, it refreshes to the beginning.
Your help is greatly appreciated!!
Hey Michael. Sorry for the inconvenience here.
Our team has been investigating some friendlier copy/paste options between Storyline projects and other programs. I'll tag this thread to be updated as well, in case we have anything new to share.
But, thanks so much for giving Bridgitte a hand!
Thanks for looking into that Crystal. That would be a great feature to have, especially since we do have to work back and forth with both versions at times.
Bridgitte, which browser are you using? I'll test other browser versions now while waiting to hear back from you. See my attached screenshot below.
Hi Michael! I'm using Chrome for my testing. I downloaded your story file, published it, and then tried the story.html as well as the story_html5.html with no luck :( Was I supposed to manipulate anything else in the file?
I just tested in Chrome and saw the same thing you did. I've modified the project to point to the web hosted version of Vimeo's player. Also it seems like Chrome doesn't work properly unless the output is published and viewed from a webpage. See my sample page here: http://www.andersonelearning.com/demo/vimeotest1/story_html5.html
Maybe someone else can chime in and tell us why Chrome behaves this way. Try the new project attached below, and publish to the web to test. I'm not sure if there is a way to make this work on the local disk in Chrome. Let me know if you need more help.
Hi Michael! The file is still not working in Chrome but it's working PERFECT in IE! THANK YOU! Without taking too much more of your time, can you give me a quick brief on what you did? I'm assuming you manipulated the javascript code and pulled the video complete trigger from vimeo itself?
Yes, Chrome seems to have some security restrictions. Did the link I posted above work okay in Chrome? It worked in Chrome for me.
The first javascript trigger pulls in the javascript player from the Vimeo website:
The second javascript trigger gets the video's status from the Vimeo player, then sets the Storyline variable with that status.
The other two triggers just change the state of the next button depending upon the videoStatus variable. I'm sure someone else could clean up my javascript code a little. I just used the example from the Vimeo website.
Hi Michael! I wasn't able to try out the direct link as it seems to be blocked by my companys network. I will have to take a look at it tonight when I get home!
Thanks for the quick explanation! I'm trying to replace the file with our training video now, but am a little confused about your web object. I see it's pulling from a "Z:\working\vimeo" location.. is that linked to the index.html in the web object folder?
Yes, that's correct, the web object points to the index.html file. You can just create an empty folder, copy the index.html into that folder, and then insert a web object in Storyline pointing to the new folder.
Good to know that my test site might be blocked by some corporate networks. I may have to look for a different host if more people have the same problem with it.
That's what I thought. I manipulated the embed code at the top of the index.html file and immediately saw my video instead of yours. Cool! Do you happen to know how it would work if I had multiple videos in my file? If I had one video file on slide 1, and another video on slide 2, how would the index.html file look like?
You're figuring out how this stuff works. :)
That's a good question. I'm guessing that you would just create a second folder and index.html file for the second video, and create a web object on the second slide pointing to the new folder. I can test it out here if you like.
Thanks for offering :) very kind of you! I will give your suggestion a try and report my findings! Thanks!!
Hi Michael!! It worked!! Just like you said, I created a second folder and linked my second web object to a copied index.html, and then manipulated the code with a new video!! Wooohoo!! THANK YOU so much for your help!!!
Great to hear that worked for you! Let me know if you need any more help.
I love this idea and not knowledgeable about JavaScript, but is this sort of JS available to use with YouTube videos as well?
Melissa, in theory, yes. I remember trying this with Youtube videos, but I don't think I was able to get it working properly. I'll see if I can find the project file I was working on. There was a thread about it here somewhere, I'll see if I can find that.
This post was removed by the author
This discussion is closed. You can start a new discussion or contact Articulate Support.