Forum Discussion

EpicEdward's avatar
EpicEdward
Community Member
11 months ago

Video rewind but not fast forward

Just seeing if there is any progress on this? I am developing a series of videos for my company and the ability to rewind but not fast forward would be a game changer. 
storyline 360
SamHill's avatar
SamHill
Super Hero
11 months ago

Hi Edward,

In order to achieve what you are looking to do, you would need to use some JavaScript to move the play head back to the spot the user left when they attempt to scrub forwards. This of course would be dependent on a video variable indicating if the video had already played through fully, for example "video01played = true/false".

I did something like this, but it was for Vimeo embedded videos (using the vimeo player API too). I'll share the script with you, as it won't be too different between video players or using the native HTML5 video controls and so I don't think too difficult to modify for the Storyline video player.

// ================= Get some variables from Storyline ================= //
var storylinePlayer = parent.GetPlayer();
// ID :: Unique ID for the Vimeo video (provided by vimeo)
var video       = storylinePlayer.GetVar("video");
// Number 0-100 :: Percent of the video to watch before marking as complete
var required    = storylinePlayer.GetVar("required");
// Boolean :: Indicates if the video is seeking  
var seek        = storylinePlayer.GetVar("seek");
// =================== Add Vimeo API Script to slide =================== //
var url = "https://player.vimeo.com/video/{video}?title=0&byline=0&portrait=0";
var iframe = document.querySelector('iframe');
// update iframe src with url
iframe.src = url.replace(/{video}/,video);
// create new vimeo instance
var vimeoPlayer = new Vimeo.Player(iframe);
// how much of the video the user has watched
var timeWatched = 0;
// add vimeo video ended event
vimeoPlayer.on('ended', function () {
    // always complete when 100% is watched (if seek allowed)
    if(seek) storylinePlayer.SetVar("complete", true);
});
vimeoPlayer.on('timeupdate', function(data) {
    /* credit: https://codepen.io/ctam8/pen/KrzRyg?page=1& */
    if(!seek)
    {
        if(data.seconds - 1 < timeWatched && data.seconds > timeWatched) {
            timeWatched = data.seconds;
            // mark as complete when it meets the required time
            // need to calculate percentage though and not use passed property
            var percent = timeWatched/data.duration;
            if(percent >= (required/100) || percent >= 1) storylinePlayer.SetVar("complete", true);
        }
    }else{
        if(data.percent >= (required/100) || data.percent >= 1) storylinePlayer.SetVar("complete", true);
    }
});
vimeoPlayer.on("seeked", function(data) {
    // kick user back to the timeWatched
    if (!seek && (timeWatched < data.seconds)) vimeoPlayer.setCurrentTime(timeWatched);
});

 

 

Related Content