Embedded Video Trigger & Javascript

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
Greg Brown

So I know I'm coming late to the party, but this conversation was basically *exactly* what I was looking for (as I'm having the same questions as Bridgitte), but I'm trying to figure out how to do it with TechSmith's (the Camtasia/SnagIt folks) hosting site, Screencast.com. I prefer to host my videos there because I can include interactivity/captions if need be, but now I'm struggling to figure out how to get Storyline 360 to recognize the embedded video is done.

I think what I need basically is to figure out what the Screencast "player" is called, no? If I can figure that out, I should be able to apply the rest, but I'm hoping maybe someone's already been down this road?

Thanks!

Diana Stock

anyone know why a variable does not display when using 'Embed Code' instead of 'Web Object' when referencing a Vimeo link for a video.  SL is not displaying the size correctly as a 'Web Object' but does using 'Embed Code'.  New bug??

SL v3.32.20313.0

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!');
});

player.getVideoTitle().then(function(title) {
console.log('title:', title);
});

Greg Nelson

Hi Michael,

thanks for your example, it has been very helpful for a similar project. I know very little about Java script and was wondering if its possible with your example to trigger an event at a particular time in a Vimeo movie in SL. Say, at the 30 sec point > jump to next slide. At the moment, the state of the forward button changes at the end of the movie. Is it possible to change this to another position in the movie? Is there Java script for this?

Atif Musaddaq

Hi Michael,

I would like to play the video automaticaly when slide is show or timeline starts. May I know how I can do this ? I have written this code but it doesn't work.

var player = parent.parent.GetPlayer();
player.playVideo();

and

var player = new Vimeo.Player(iframe);
player.playVideo();

Atif Musaddaq