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";
}
});
video.addEventListener("ended", function(){
playButton.textContent = "replay";
});
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'/>";
})
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.