How do I add a replay function to this play / pause button

Question

I would like the play/pause button to display "replay" at the end of the video clip. What would be the best way of doing that with the function I already have.

// Event listener for the play/pause button
playButton.addEventListener("click", function() {
    if (video.paused == true) {
        // Play the video
        video.play();

        // Update the button text to 'Pause'
        playButton.innerHTML = "Pause";
    } else {
        // Pause the video
        video.pause();

        // Update the button text to 'Play'
        playButton.innerHTML = "Play";
    }
});

You can't do it with the current function. You need to track for when the video is finished. Check here: https://dev.w3.org/html5/spec-author-view/video.html#mediaevents — lewis, Sep 16 '17 at 12:20
you need to check the media 'currentTime' against the media duration if currentTime == duration than show replay button — Maxwell, Sep 16 '17 at 12:22

score 1 · Accepted Answer · answered Sep 16 '17 at 12:19

1

video.addEventListener("ended", function(){
  playButton.textContent = "replay";
});

answered Sep 16 '17 at 12:19

Jonas Wilms

132,000
20
149
151

what would be the best way to get the replay text to change to this image http://www.iconninja.com/files/838/134/365/replay-icon.png – Andrew Perry Sep 16 '17 at 12:27
I actually tried that and it only outputs it as text, not an image – Andrew Perry Sep 16 '17 at 12:54

Farhad Azarbarzinniaz · Answer 2 · 2017-09-16T12:34:44.270

1

it seems you have to look at this post

you can simply listen to ended event on your video element:

video.addEventListener('ended', function(e) {
playButton.innerHTML = "<img src='http://www.iconninja.com/files/838/134/365/replay-icon.png'/>";
    })

edited Sep 16 '17 at 12:34

answered Sep 16 '17 at 12:19

Farhad Azarbarzinniaz

719
4
17

Maxwell · Answer 3 · 2017-09-16T12:38:14.577

add this to your code, checks every one second to see whether the media has finished playing

   <video id='mediaObj'>.... </video>
       <script>
                    setInterval(function (){
            var aud = $('#mediaObj'); //get the html5 media object
                    curTime = parseInt(aud.currentTime);  //get it current time
                durTime = parseInt(aud.duration); //check it total play time/duration

     if (curTime == durTime) playButton.innerHTML = "<img src='http://www.iconninja.com/files/838/134/365/replay-icon.png'/>"; // code to show replay button goes here




                },1000);
         </script>

How do I add a replay function to this play / pause button

3 Answers3