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

视频播放完毕。什么时候关键在这里。您需要搜索“播放完成”事件。

谷歌搜索“html5视频事件”，你会发现： http://www.w3schools.com/tags/ref_av_dom.asp

然后你需要编写的代码是：

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

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

1 个答案: