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. 

  • 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! 🎉

  • EpicEdward's avatar
    EpicEdward
    Community Member

    Thanks! Basically it's a video in Storyline and the player only allows to use the seekbar after the full video was viewed. I'd like them to be able to rewind throughout the video without having to view the whole video.

  • EpicEdward's avatar
    EpicEdward
    Community Member

    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!

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

     

     

  • EpicEdward's avatar
    EpicEdward
    Community Member

    Thank you for that! That is a little more than I can do to be honest. I am just looking for a simple way to rewind but not fast forward so that if the user misses something and needs to go back they don't have to watch the whole video first. 

    • SamHill's avatar
      SamHill
      Super Hero

      No problem Edward. I'm afraid there isn't a more simple solution. It requires a JavaScript solution.