Javascript to Restart Video media anyone?

I'm working on a project where I am using my own buttons to play/pause and restart a video. I can't figure out the coding (i'm purely googling it as I don't write java) on how to restart the video using my restart button.  I'd love to add a rewind by 10 seconds button as well if possible. Can any java writers help me with this? I'm using Storyline 360.

10 Replies
Nancy Woinoski

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.

Niyeda Suliveres

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.

OWEN HOLT

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.

Niyeda Suliveres

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.

Nancy Woinoski

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  

OWEN HOLT

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. :-)