無法使HTML5視頻循環回到第一幀。

Question

我希望我的HTML5視頻可以循環回到第一幀並在播放后暫停。

我在這里找到此頁面，並且正在使用“ Offbeatmammal”在頁面底部附近的代碼，即：

<div id="vOverlay" style="position:relative; width:600px; height:300px; z-index:2;"></div>
<video style="position:relative; top:-300px; z-index:1;width:600px;height:340px;" width="600" height="409" id=videoPlayer controls="controls">
<source src="video.mp4" type="video/mp4">
</video>

<script>
    var v = document.getElementById('videoPlayer');
    var vv = document.getElementById('vOverlay');

    <!-- Play, Pause -->
    vv.addEventListener('click',function(e){
        if (!v.paused) {
            console.log("pause playback");
            v.pause();
            v.firstChild.nodeValue = 'Pause';
        } else {
            console.log("start playback")
            v.play();
            v.firstChild.nodeValue = 'Play';
        }
      });
</script>

我發現一些線程似乎表明我需要使用this.currentTime = 0; 但是我不知道將其添加到上面的代碼中。 我在幾個不同的地方嘗試過，但是沒有用。 任何幫助深表感謝。

謝謝！

Answer 1

視頻播放完畢后。 什么時候是關鍵。 您需要搜索“播放完成”事件。

在Google上搜索“ html5視頻事件”，您會發現以下內容： http : //www.w3schools.com/tags/ref_av_dom.asp

那么您需要編寫的代碼是：

v.addEventListener("ended", function(){
    this.currentTime = 0;
});