December 5, 2017
Create a Vimeo 15 second rewind button
Comments
(2)
December 5, 2017
Create a Vimeo 15 second rewind button
Newbie 18 posts
Followers: 41 people
(2)

In some situations you may want to limit your learners’ ability to fast forward an embedded video. This would require turning off the embed’s play-bar.  But what if the learner missed something on the video and wants to watch it again.   Here’s how to create a ‘quick rewind’ button.  Note that these instructions are for Vimeo only.

 

1. Embed your Vimeo video by importing the HTML zip file as an HTML5 Animation.  You will need to load the Vimeo API script as well.  For instructions on how to do this, see my other blog:

https://elearning.adobe.com/2017/11/end-of-video-events-with-vimeo/

 

2. Create a button and have it execute the following javascript:

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) {

});

(For a fun explanation of this code see below)

 

3. That’s basically it.

If you want to change the duration of the rewind change the line   ‘var rwd = sec -15’ to minus however many seconds you want (ex.  ‘var rwd = sec -30’ would be 30 seconds rewind on every press).

Also note that it will not rewind if the video has not run past the rewind increment amount. (It won’t rewind 15 seconds if you are only 14 seconds into the video).

 

Fun explanation of the code for anyone interested

The Vimeo API (player.js) has a built in getCurrentTime and setCurrentTime function.  Essentially the code here wraps the setCurrentTime function into the getCurrentTime, and passes a new variable (rwd – 15) which sets the time (minus 15 seconds). It’s saying, what’s the current time, subtract 15 seconds from the current time, and now set the time to that.  All the other stuff about error and RangeError ensures that code will not run or break if the intervals are out of range.   It’s all documented in the Vimeo API page

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

 

Hope this helps someone.  All the best,

2 Comments
2018-02-13 21:05:31
2018-02-13 21:05:31

I can’t get the code to work. I created a button and added an advanced action to execute the JavaScript code but nothing happens when I click it. Any idea why? Video plays and the tiggered event works at the end.

Like
(1)
>
marissat22566383
's comment
2018-05-21 17:36:17
2018-05-21 17:36:17
>
marissat22566383
's comment

It didn’t work for me either at first. But I noticed I did not actually follow instruction 1, I was attempting to control a player embedded in an iframe. I simplified the code to this and it worked:

function skipbck()
{
player.getCurrentTime().then(function(sec)
{var rwd = (sec-15);
player.setCurrentTime(rwd)
});
}

Like
Add Comment