Triggering a function when an Event Video ends

November 28, 2017

Jeremy Shimmerman Follow

(9)

I wanted a ‘next’ button to appear AFTER an event video finished playing. There might be a way of achieving this with the timeline, but I thought this method worked better.

1. Create a ‘next’ button and ID name it ‘nextBtn’.

2. Hide the button (press the eyeball)

3. Import your event video onto the frame (name does not matter)

4. Execute Javascript on the frame

5. Enter in the following code:

document.getElementsByTagName(“video”)[0].addEventListener(‘ended’,yourFunction,false);

function yourFunction(e) {

cp.show(“nextBtn”);

}

6. Watch and enjoy

Notes

You can add lots of other stuff to this trigger. I update variables so that the LMS will store and ‘remember’ if a user watched the video or not. I also have a little check mark icon show next to the video.

If you have more than one video on the same frame, you change the array number. Example – document.getElementsByTagName(“video”)[1]

It depends on which video you load onto the frame first.

Hope this will be helpful to someone.

I wanted a ‘next’ button to appear AFTER an event video finished playing. There might be a way of achieving this with the timeline, but I thought this method worked better.

1. Create a ‘next’ button and ID name it ‘nextBtn’.

2. Hide the button (press the eyeball)

3. Import your event video onto the frame (name does not matter)

4. Execute Javascript on the frame

5. Enter in the following code:

document.getElementsByTagName(“video”)[0].addEventListener(‘ended’,yourFunction,false);

function yourFunction(e) {

cp.show(“nextBtn”);

}

6. Watch and enjoy

Notes

If you have more than one video on the same frame, you change the array number. Example – document.getElementsByTagName(“video”)[1]

It depends on which video you load onto the frame first.

Hope this will be helpful to someone.

elearning projects

end

end of movie

end of video

(9)

Comments

(12)

Jeremy Shimmerman Follow

You must be logged in to post a comment.

Jim_Epler

May 14, 2020

Jim_Epler

May 14, 2020

Cannot for the life of me get this to work. Using sync video as well. It won’t trigger anything I put in the function for the ended listen event including the following:

document.getElementsByTagName(“video”)[0].addEventListener(‘ended’,yourFunction,false);

function yourFunction(e) {
alert (“Hello”);
}

(1)

sarahj19019524

Sep 19, 2018

sarahj19019524

Sep 19, 2018

Hi Jeremy, I have just tried this for my event video, however this doesn’t seem to be working for me. Do I need to change any of the code? And am I executing the javascript on the slide on enter (this is what I have done currently and the button shows instantly rather than when the video has ended) ?

(2)

Anonymous

Jan 13, 2018

Anonymous

Jan 13, 2018

Thank’s for the informations JEREMY SHIMMERMAN

(1)

Lieve Weymeis

Nov 29, 2017

Lieve Weymeis

Nov 29, 2017

Sorry to insist, but only synchronized video can be treated that way, not event video. Event video is controlled by its control panel, no need to extend the slide duration to the length of the video, you can have several videos on one slide (not possible with synchronized video) and that slide can keep a duration of 3 secs or less. Have a look at my blog post about Advanced Workflows with Timeline, embedded in this post:
http://blog.lilybiri.com/timeline-advanced-workflows

(1)

Jeremy Shimmerman

Nov 29, 2017

Jeremy Shimmerman

Nov 29, 2017

Lieve Weymeis

's comment

Yes you are correct. I forgot I wrote “There might be a way of achieving this with the timeline” You are right in saying that you cannot control an event video with the timeline.

(1)

Lieve Weymeis

Nov 29, 2017

Lieve Weymeis

Nov 29, 2017

Thanks for this work flow!
Just FYI: with event video you cannot use the timeline as alternatie because event video is playing independently of Captivate cotrols.
I suppsoe when you mention ‘frame’ that you mean a slide? Terminology is a concern to me, as a non-English speaker. Captivate plays normally at 30FPS, and on the timeline the smallest unit is 0,1sec, which is 3 frames.

(1)

Jeremy Shimmerman

Nov 29, 2017

Jeremy Shimmerman

Nov 29, 2017

Lieve Weymeis

's comment

Yes that’s right – thanks for the correction. I meant to write ‘slide’ instead of ‘frame’. It is possible to do this with the timeline however, you would need to know the length of each video and coordinate it with the timeline. I had a situation where I needed to load six videos on one slide and needed a endEvent trigger for each.

(1)

guilhermem77598778

Nov 29, 2017

guilhermem77598778

Nov 29, 2017

Thanks again, Jeremy Shimmerman!

I´ve been looking for this for a long time, but I could not get a solution by myself.

I´ll test it right now!

(1)

guilhermem77598778

Nov 29, 2017

guilhermem77598778

Nov 29, 2017

Great!

I´m looking for something like this for vimeo video embeded as web object in to the frame, is it possible?

Thanks

(1)

(3)

Jeremy Shimmerman

Nov 29, 2017

Jeremy Shimmerman

Nov 29, 2017

guilhermem77598778

's comment

Yes you absolutely can but it’s a different process. Someone else asked me this same question so I just created a blog post showing how to do it but it’s pending review. Here’s a copy of the hopefully soon to be published blog post.

1. Create an html file (paste it into a notepad, and change the extension to .html) with the following:

Untitled Document

//ENTER VIMEO EMBED HERE

var iframe = document.querySelector(‘iframe’);

var player = new Vimeo.Player(iframe);

player.on(‘ended’, function() {

//ENTER END TRIGGER FUNCTION HERE

alert(“Your Vimeo video has now ended”);

});

2. Go to your Vimeo account, copy and paste the embed code into the html. Also modify your ‘player.on ended’ function. I just put in an alert to test it, but you can trigger virtually anything. I typically modify a captivate user variable so that the LMS will ‘remember’ if the video has finished or not each time a learner logs on.

3. Zip your HTML file (use any compression program like WinRar)

4. In captivate, create a new HTML5 animation and select your newly created zip folder

5. Test your Vimeo movie to make sure the end event is triggering.

Additional Notes

1. I typically turn off the playbar as an option from the vimeo website so that the user cannot fast forward the movie to trigger an end movie event. No cheating on my watch 🙂 To get the Vimeo movie to play from a captivate button, create a button and add the following javascript –

window.frames[0].frameElement.contentWindow.player.play();

2. The Vimeo Developer API has lots of very cool features (load movies, adding cue points, etc.) all of which can be accessed through their javascript API. Check out

https://player.vimeo.com/api/demo

and

https://github.com/vimeo/player.js

if you need more features.

3. Another one I typically use is the player.loadVideo if I need to show another Vimeo video. Just create a captivate button with the following JS

window.frames[0].frameElement.contentWindow.player.loadVideo(THE ID NUMBER OF YOUR VIDEO HERE);

You can find the video ID number will be somewhere on the Vimeo website or in the embed code. This makes it really easy to switch videos.

I hope this helps.

(1)

Shambu Nashi

Nov 29, 2017

Shambu Nashi

Nov 29, 2017

guilhermem77598778

's comment

Thanks Jeremy Shimmerman

Guilherme Martinelli Here is the link to the blog post – https://elearning.adobe.com/2017/11/end-of-video-events-with-vimeo/

(1)

LineP

Nov 30, 2017

LineP

Nov 30, 2017

Jeremy Shimmerman

's comment

Dammi…. Why did you not wrote this last week? Two days hard work with localStorage between iFrames.

Btw, Thank you 🙂

(1)