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.
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”);
}
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) ?
Thank’s for the informations JEREMY SHIMMERMAN
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
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.
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.
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.
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!
Great!
I´m looking for something like this for vimeo video embeded as web object in to the frame, is it possible?
Thanks
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.
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/
Dammi…. Why did you not wrote this last week? Two days hard work with localStorage between iFrames.
Btw, Thank you 🙂
You must be logged in to post a comment.
