CODEWITHSUNDEEP
javascriptvideohtml5-video
Andrew Perry
Andrew Perry

Reputation: 23

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

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

Upvotes: 1

Views: 1885

Answers (3)

Maxwell
Maxwell

Reputation: 147

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>

Upvotes: -1

Farhad Azarbarzinniaz
Farhad Azarbarzinniaz

Reputation: 739

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'/>";
    })

Upvotes: 1

Jonas Wilms
Jonas Wilms

Reputation: 138457

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

Upvotes: 1

Related Questions