如何为此播放/暂停按钮添加重播功能

时间:2017-09-16 12:13:20

标签: javascript video html5-video

我希望播放/暂停按钮在视频片段的末尾显示“replay”。使用我已有的功能,最好的方法是什么。

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

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

您似乎必须查看此post

您只需在视频元素上收听已结束的事件:

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

答案 2 :(得分:-1)

将此添加到您的代码中,每隔一秒检查以查看媒体是否已完成播放

   <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>