Forum Discussion
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! 🎉
- EpicEdwardCommunity 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.
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! 🎉
- EpicEdwardCommunity 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!
- SamHillSuper Hero
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);
}); - EpicEdwardCommunity 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.
- SamHillSuper Hero
No problem Edward. I'm afraid there isn't a more simple solution. It requires a JavaScript solution.