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
Brian Dennis

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

Michael Anderson

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.

 

Bridgitte Li

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


Crystal Horn
Michael Anderson

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

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!

Michael Anderson

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.

Michael Anderson

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.

Michael Anderson

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:

<script type="text/javascript" src="https://player.vimeo.com/api/player.js"></script>

The second javascript trigger gets the video's status from the Vimeo player, then sets the Storyline variable with that status.

var videoStatus = parent.player.GetVar("videoStatus");
parent.player.SetVar("videoStatus",videoStatus);
var iframe = parent.document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
player.on('play', function() {
console.log('played the video!');
});

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.

Bridgitte Li

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? 

Michael Anderson

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.

Bridgitte Li

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? 

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