Video rewind but not fast forward

Dec 29, 2023

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. 

8 Replies
Luciana Piazza

Hi Edward! 

Thanks so much for reaching out! 

In order to better assist you, I just want to clarify what you're looking to achieve:

Are you looking to add videos into a Storyline project and then publish to video

Feel free to share your .story file and walk us through what you've tried so far! 

Looking forward to hearing from you! 🎉

Luciana Piazza

Hi Edward! 

Thanks for clarifying! I've gone ahead and created a sample .story file for you where I modified the Video Tools display. Here's a quick 2-minute Peek where I explain this in more detail! I've attached my sample .story file as well. 

Please let me know if you have any further questions or you had something else in mind. We're happy to help! 

Hope you have a wonderful holiday season and start to 2024! 🎉

Edward Sand

Before I even respond, your customer service to make a video for me is exceptional! Thank you!

I am looking for the ability to only rewind, but not fast forward (our learners may just skip it) while watching the video. Right now I am using the Seekbar (Allow Drag After Completion) function rather than the Video Controls in the Video Tools options. 

I don't think the functionality is there yet for rewinding during the video but not fast forwarding or skipping through it. 

It is basically this thread - https://community.articulate.com/discussions/articulate-storyline/allow-user-to-be-able-to-rewind-back-on-a-slide-but-not-forward-until-the-whole-slide-has-played

Thanks again!

Sam Hill

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