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

almost 5 years ago07/02/19 at 9:29 pm (UTC)

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!

Michael Anderson

almost 5 years ago07/03/19 at 8:12 pm (UTC)

The Screencast player will have to have an API that can detect when the video is finished, then that information can be sent to Storyline. I'm trying to find out now if they have an API.

Diana Stock

over 4 years ago09/30/19 at 11:58 pm (UTC)

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

SL_codeExamples.jpg

Greg Nelson

over 4 years ago10/21/19 at 3:44 am (UTC)

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?

over 4 years ago10/21/19 at 3:20 pm (UTC)

Yes, you could write some code to check the current playhead time of the Vimeo video, and set a Storyline variable at 30 seconds, which would activate your trigger.

Greg Nelson

over 4 years ago10/21/19 at 9:26 pm (UTC)

Hi Michael thanks for getting back to me. Can you step through how to write the Javascript to achieve this as I'm not familiar with the Javascript coding (what do I need to add to whats in your example?). I'm also not familiar with adding a time parameter to a variable - could you explain if possible.

over 4 years ago11/27/19 at 10:00 am (UTC)

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