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

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

本文关键字：一帧 HTML5 视频 循环      更新时间：2023-09-26

我希望我的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;但我不知道将其添加到上面的代码中。我尝试了几个不同的地方，但它不起作用。任何帮助都非常感谢。

谢谢！

当视频完成时。什么时候是这里的关键。您需要搜索"播放完成"事件。

在谷歌上搜索"HTML5视频事件"，你会发现这个：http://www.w3schools.com/tags/ref_av_dom.asp

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

v.addEventListener("ended", function(){
    this.currentTime = 0;
});
相关文章：