December 12, 2017
End of Video Events with Vimeo
Comments
(34)
December 12, 2017
End of Video Events with Vimeo
Newbie 18 posts
Followers: 42 people
(34)

A few people asked how to create trigger an end video event with Vimeo, so here goes.

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

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>Untitled Document</title>

</head>

<body>

//ENTER VIMEO EMBED HERE

<iframe src=”https://player.vimeo.com/video/XXXXXXXXXXX” width=”640″ height=”360″ frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<script src=”https://player.vimeo.com/api/player.js”></script>

<script>

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

    });

</script>

</body>

</html>

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.

 

 

 


Addition.

Here is the .cptx file already with the imported HTML5 animation .zip.   When the video ends (you can fast forward) it:

end of Video Triggers vimeo

Sends an alert, changes a cp variable, and shows a button.  The code in the zip file is:

player.on(‘ended’, function() {
alert(“The video has ended.”);
parent.triggerMe = “Played”;
parent.cp.show(‘nextBtn’)
});

Hope this helps.

 

34 Comments
2018-12-11 14:57:53
2018-12-11 14:57:53

Thank you for this code. I had some problems with it so I posted what you had into Dreamweaver and it showed mixing ‘ ” and the angled one. I changed them so they were all the same and it works like your sample. Thanks again!

Like
(2)
2018-02-14 15:48:48
2018-02-14 15:48:48

That’s the js for the rewind button and it looks ok. Is there any script that’s running on frame enter? When does your unexpected token error fire?

Like
(2)
(3)
>
Jeremy Shimmerman
's comment
2018-02-14 16:24:58
2018-02-14 16:24:58
>
Jeremy Shimmerman
's comment

No other script is running on frame entry. I’m not sure what an unexpected token error is? I’m new to JS. The syntax error pops up on click of the button.

Like
(2)
>
marissat22566383
's comment
2018-02-14 16:30:00
2018-02-14 16:30:00
>
marissat22566383
's comment

Unexpected token just means there’s a typo somewhere. There’s an extra bracket or comma somewhere. Maybe try this, delete and replace the commas around ‘RangeError’. Sometimes Captivate changes the font when copying and pasting script into its js editor.

They should be single commas and look like a straight line – not curled.

Like
(2)
>
Jeremy Shimmerman
's comment
2018-02-14 17:15:24
2018-02-14 17:15:24
>
Jeremy Shimmerman
's comment

That fixed it!! Wonderful! This is great. Thank you!

Like
(2)
2018-02-13 23:17:28
2018-02-13 23:17:28

Thanks for this. I got it all working except for the play button. I created a button and added an advanced action to it using the code”window.frames[0].frameElement.contentWindow.player.play();” but nothing happens. I am having the same issue trying to do the 15 second rewind. Am I executing the action incorrectly? Am I forgetting to add something to the beginning of the code?

Like
(2)
(5)
>
marissat22566383
's comment
2018-02-14 13:48:36
2018-02-14 13:48:36
>
marissat22566383
's comment

Hi Marissa. I’d have to take a look at it to see what’s wrong. If you press f12 in your browser you can see if any errors are being triggered. The only thing I could think of off hand is that if you have more than one iframe on the slide, you need to make sure you’re scripting to the right one.

If the end of video ‘alert’ is being triggered, you know that Vimeo’s player.js API has loaded properly. Let me know if you see any errors. Thanks

Like
(2)
>
Jeremy Shimmerman
's comment
2018-02-14 14:53:44
2018-02-14 14:53:44
>
Jeremy Shimmerman
's comment

Thanks for the response. I only have 1 iframe on the page. I’m on a mac. Is Cmd+opt+I the equivalent to f12? When I go to the console it shows this:

SyntaxError: Invalid or unexpected token
at eval ()
at Function.a.runJavascript (CPM.js:1751)
at eval (eval at executeAction (CPM.js:2026), :1:4)
at cp.Movie.executeAction (CPM.js:2026)
at Function.b.clickSuccessHandler (CPM.js:1956)
at Function.b.clickHandler (CPM.js:1955)
at b.ch (CPM.js:1955)
at Function.a.handleClickExternal (CPM.js:1420)
at HTMLDivElement.a.handleClick (CPM.js:1421)

Like
(2)
>
marissat22566383
's comment
2018-02-14 15:14:02
2018-02-14 15:14:02
>
marissat22566383
's comment

Also wanted to add that I got the play button working. It’s only the rewind which I’m now getting a error for. Thanks in advance.

Like
(2)
>
marissat22566383
's comment
2018-02-14 15:31:37
2018-02-14 15:31:37
>
marissat22566383
's comment

You have a typo somewhere in your script. Send me your js and I’ll see if I can find it.

Like
(2)
>
Jeremy Shimmerman
's comment
2018-02-14 15:39:31
2018-02-14 15:39:31
>
Jeremy Shimmerman
's comment

Here’s what I have:

window.frames[0].frameElement.contentWindow.player.getCurrentTime().then(function(sec) {
var rwd = sec -15

window.frames[0].frameElement.contentWindow.player.setCurrentTime(rwd).then(function(seconds) {
}).catch(function(error) {
switch (error.name) {
case ‘RangeError’:
break;

default:
break;
}
});

}).catch(function(error) {

});

Like
(2)
2018-02-13 14:14:20
2018-02-13 14:14:20

Thanks Jeremy. I would appreciate that.

I think YouTube somehow is not the platform to use for ‘incompany’ courses (mostly because there will always be a link on the video to the YouTube website).
Since Vimeo was no option, I also tried Wistia. But I could not find a way to disable keyboard shortcuts either.

I know this functionality is not a foolproof way to make sure the users watch the video (they can start the video and walk away…) But my customer prefers it like this. So I am importing the videos in Captivate right now. It works. The videos are not that big (20-30mb). But it does not ‘feel’ as the way it should be done.

Like
(1)
2018-02-12 13:23:32
2018-02-12 13:23:32

Thanks a lot. Works great.

You mention you turn off the playbar so that the user cannot fast forward the movie to trigger an end movie event. Unfortunately that does not prevent a user from using the keyboard shortcuts to fast forward the video… So I was wondering if you know of a solution to prevent fast forwarding with the keyboard shortcuts for the Vimeo player?

Like
(1)
(6)
>
paulras
's comment
2018-02-12 17:23:58
2018-02-12 17:23:58
>
paulras
's comment

Yikes. Thanks for pointing this out to me. I didn’t realize the keyboard would still be enabled if you turn the playbar off. On YouTube you can simply add disablekb in the embed code. Vimeo doesn’t have that option and there doesn’t seem to be any documentation on how to disable the keyboard listeners.

I’m going to have to work on this one for a bit. Doesn’t seem to be any simple solution.

Like
(1)
>
Jeremy Shimmerman
's comment
2018-02-12 21:53:47
2018-02-12 21:53:47
>
Jeremy Shimmerman
's comment

I have asked Vimeo support how to disable the keyboard shortcuts. I will let you know their response.

Like
(1)
>
paulras
's comment
2018-02-13 13:20:19
2018-02-13 13:20:19
>
paulras
's comment

Vimeo Support: “We don’t have any functionality to stop viewers from fast forwarding, rewinding or skipping during playback. I will share it with our product team as a feature request.”

Like
(1)
>
paulras
's comment
2018-02-13 13:48:41
2018-02-13 13:48:41
>
paulras
's comment

Thanks for sending that my way. I’ll see if I can come up with any workarounds that will disable key strokes and send it your way as well.

Like
(1)
>
paulras
's comment
2018-05-08 17:04:07
2018-05-08 17:04:07
>
paulras
's comment

I know this is from a long time ago but I needed to re-visit Vimeo and remembered this thread.

I found a workaround to disable the keystrokes, as well as getting rid of the annoying play button in the center. It’s a bit hacky but it works.

1. Place a transparent box over the iframe. This will disallow focus on the player and will disable the keystrokes from working.
2. In the vimeo embed, put ?background=1 in the code. This will disable the buttons. You will also need to include muted=0, and autoplay = 0 (if you are controlling with another button.

Like
(1)
>
Jeremy Shimmerman
's comment
2018-07-09 13:32:52
2018-07-09 13:32:52
>
Jeremy Shimmerman
's comment

Thanks a lot Jeremy. Somehow I missed your comment in May… Just tried it and it worked well. Really smart the transparant box over the iframe!

Like
(1)
2017-12-12 19:36:49
2017-12-12 19:36:49

Could you post the cptx file? I am also trying to use your code…but the message at the end of the video is not coming…thanx!

Like
(1)
2017-11-30 18:12:38
2017-11-30 18:12:38

Try window.parent.cp.show(‘nextBtn’)

Like
(1)
(8)
>
Jeremy Shimmerman
's comment
2017-11-30 20:14:43
2017-11-30 20:14:43
>
Jeremy Shimmerman
's comment

Something seems to block it, but what?

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

var player = new Vimeo.Player(iframe);

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

//ENTER END TRIGGER FUNCTION HERE
window.parent.cp.show(‘nextBtn’);
console.log (‘video acabou!’);
});

Like
(1)
>
guilhermem77598778
's comment
2017-12-01 13:49:33
2017-12-01 13:49:33
>
guilhermem77598778
's comment

The ‘ended’ trigger must be firing if your console log message is being shown. Maybe try using jQuery to show the button instead of the captivate function. Try it with and without the added ‘c’.

$(“#nextBtnc” ).show();
$(“#nextBtn” ).show();

If that doesn’t work, try all the methods with a different smartShape. Maybe there’s something unique with the button you created.

Like
(1)
>
Jeremy Shimmerman
's comment
2017-12-01 14:14:08
2017-12-01 14:14:08
>
Jeremy Shimmerman
's comment
Like
(1)
>
guilhermem77598778
's comment
2017-12-01 19:21:07
2017-12-01 19:21:07
>
guilhermem77598778
's comment

Sorry. I can’t check the link – it’s giving me a 404.

Like
(1)
>
guilhermem77598778
's comment
2017-12-01 20:21:12
2017-12-01 20:21:12
>
guilhermem77598778
's comment

window.parent.$(‘#nextBtnc’).hide();

You would need to add the parent to the Jquery.

Like
(1)
>
guilhermem77598778
's comment
2017-12-01 20:27:10
2017-12-01 20:27:10
>
guilhermem77598778
's comment

Sorry, try it again!

http://uniaguadoce.com.br/up_captivate/201712012024535a21ba95a174a/test-vimeo3/

It works with ‘postMessage’, but i cannot used it because my domain changes.

Like
(1)
>
guilhermem77598778
's comment
2017-12-01 20:48:11
2017-12-01 20:48:11
>
guilhermem77598778
's comment

It seems to be working with me in the console window when I try it with the cp.show method – Both in the top and iframe level

window.parent.cp.show(‘nextBtn’)

Like
(1)
>
Jeremy Shimmerman
's comment
2017-12-04 11:15:02
2017-12-04 11:15:02
>
Jeremy Shimmerman
's comment

Really? Why not for me?

Like
(1)
2017-11-29 19:48:37
2017-11-29 19:48:37

Jeremy Shimmerman

Could you example the ‘player.on ended’ function triggering a next button on Captivate? Mine´s not working…

Like
(1)
(4)
>
guilhermem77598778
's comment
2017-11-29 19:57:17
2017-11-29 19:57:17
>
guilhermem77598778
's comment

If you want to show a button you need to put ‘parent’ in front. Try this:

player.on(‘ended’, function() {
alert(“Video has ended”);
parent.cp.show(‘nextBtn’)
});

You also can troubleshoot by pressing F12 and entering your browser’s console. That will show you any errors that might be popping up.

Like
(1)
>
Jeremy Shimmerman
's comment
2017-11-30 12:54:37
2017-11-30 12:54:37
>
Jeremy Shimmerman
's comment

Thanks, Jeremy Shimmerman

But it still not working… At the console, there are no error and the alert is correctly shown, but the button still hidden.

Like
(1)
>
guilhermem77598778
's comment
2017-11-30 13:56:22
2017-11-30 13:56:22
>
guilhermem77598778
's comment

Have you named the button correctly? Under the shape title it should read nextBtn exactly. It’s case sensitive.

When you test it in your console you can also try entering in the code manually to see where the problem is. Try writing in cp.show(‘nextBtn’). That should work on the top level. Then switch to the Vimeo iFrame level and try parent.cp.show(‘nextBtn’).

Like
(1)
>
Jeremy Shimmerman
's comment
2017-11-30 16:57:52
2017-11-30 16:57:52
>
Jeremy Shimmerman
's comment

Yes,Jeremy Shimmerman . Name is correct, cp.show works on top level, but not on vimeo iframe level.

In Iframe level, script stop working after parent.cpshow and nothing more is executed. But, in console, none message is displayed.

Like
(1)
Add Comment