无法让 HTML5 视频循环回到第一帧。

Question

我想让我的 HTML5 视频循环回到第一帧并在播放后暂停。

我找到了这个页面 here 并且正在使用页面底部附近的 "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

视频结束时。什么时候是关键。您需要搜索 "playback finish" 事件。

搜索 google for "html5 video events"，你会发现： http://www.w3schools.com/tags/ref_av_dom.asp

那么您需要编写的代码是：

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

无法让 HTML5 视频循环回到第一帧。

Can't get HTML5 video to loop back to first frame.

html

javascript

video