Javascript to Restart Video media anyone?

Hello Niyeda, you don't need to use JavaScript to pause/play or restart videos in Storyline 360. You can do this by using triggers and variables in Storyline itself.

I have attached a sample project that you can look at to see how it is done.

In my example I created a pause/play button instead of using 2 separate buttons as shown in your sample picture.

To do this you have to add a selected state to the button and create a true/false variable to change the state each time the user clicks the button. 

To make the video restart when the user clicks the restart button you have to jump to a new slide when the user clicks the button and have that slide set to jump back to the slide with the video as soon as the timeline starts. 

I hope it all makes sense when you look at the file but if not feel free to ask any questions you might have.

Thank you for responding Nancy but not quite what i need. I have the play and pause working fine with the prebuilt triggers. However, I don't want the whole slide to restart because there's animation and zooming in that I don't want to play again. I have the video behind a computer monitor and i JUST want the media to replay, If the user is 10 seconds in or 45 seconds in I want them to be able to start it over with out having to restart the whole slide. I also want a rewind button so that i can rewind the video and i've seen javascript that can do this and also set the video to restart but i'm not familiar with how to adapt it to work in the'execute java' trigger.

Part of the difficulty is that SL does not assign an ID to your video element so it makes it difficult to work with. As long as you are publishing html5, you should be able to do something like the following.

1. Add 3 buttons: Rewind, Play, Pause
2. Add a slide trigger to execute JavaScript when the timeline reaches 0.25. This is to make sure the video html is actually visible. Here is the JavaScript (actually using some jquery shortcuts):
   //Locate the current slide's video element and add an ID attribute 
   $("video").attr("id","myVideo");
3. Use the following JS on your Play button:
   //Find the video by the ID you created and play it
   $("#myVideo").get(0).play();
4. Use the following JS on your Pause button:
   //Find the video by the ID you created and pause it
   $("#myVideo").get(0).pause();
5. Use the following JS on your rewind button. Note that this rewinds 2 seconds at a time but you can change that to a larger/smaller increment.
   //Create a variable to manage video elements
   

   var mediaElement = document.getElementById("myVideo");
   
   //Adjust playhead (currentTime) to 0 if elapsed time is less than 2 seconds else adjust it to the elapsed time minus 2 seconds
   if(mediaElement.currentTime < 2) {
   mediaElement.currentTime = 0;
   } else {
   mediaElement.currentTime = mediaElement.currentTime-2;
   }

If you needed to, you could also pause the video and capture the elapsed time when the user navigates away from the page sending the time to a SL variable. Then call the variable & set the elapsed time again (minus "2" or straight to 0 if you want the video to start over) when the user returns to the page.

I will leave rewind to Owen :-)

Replay should be as simple as two triggers stop media and then play media.

You shouldn't need avariable for play pause it can be validated on selected or not selected

Thanks so much for this reply. Seems on track with what I'm trying to do. I've pasted the script you've included but it doesn't seem to be rewinding the video. Not sure if I was supposed to do more than copy and paste? I've attached what I've done. Perhaps you can look it over when you have a spare moment.

How far back do you want the rewind to go? Just a few seconds with each click? All the way back to the start?

10 seconds each click please.

Ah good, I'm glad Own and Phil jumped in.  I have never done this using JS so was investigating how it could be done. It seems like the rewind will only work in  HTML5 so Niyeda, when you publish your course make sure to select the HTML5 only option. 

You should be aware that using this method won't work on older browsers.

Here are the tech specs.

https://articulate.com/support/article/System-Requirements-for-Articulate-Storyline-360  

I made a few changes to your file. 

1. The easiest way that I know to avoid having the instructions play each slide visit is to actually split the slide into 2. The first one has the instructions and auto advances to the 2nd one. It also changes a "visited" variable from false to true. On any revisits, the slide will be skipped if the variable is true taking the user straight to the video slide (I call this "ghosting a slide"). The video slide is set to "reset to initial state" so the video will start at the beginning. 
   **NOTE** This is also useful if you want a "full rewind" button. You can just create a button that links back to the existing slide, resetting it to its initial state!
2. I added the JavaScript I had provided previously to the rewind button. It was missing in your file. Because the video is just over 20 seconds, I set it to step back 5 seconds with each click.
   The rewind code now looks like this:
   

   var mediaElement = document.getElementById("myVideo");
   if(mediaElement.currentTime < 5) {
   mediaElement.currentTime = 0;
   } else {
   mediaElement.currentTime = mediaElement.currentTime-5;
   }

If you want to adjust this to 10 seconds, just replace the 5's with 10's. :-)

YES!!! Thank you!!! I knew a rewind button could happen with some java mastery. Thanks for being that master and helping me lol. I'm going through now and adding these triggers to my other slides. Truly appreciated.