限制HTML5视频播放的次数

Question

我知道我可以使用'loop'属性无限循环播放视频。 但是我可以将视频循环的次数限制为5次吗？

Answer 1

您需要使用JavaScript来实现此目的。请看下面的代码段：

＆＃13;

＆＃13;

var iterations = 1;

document.getElementById('iteration').innerText = iterations;

myVideo.addEventListener('ended', function () {    

    if (iterations < 5) {       

        this.currentTime = 0;
        this.play();
        iterations ++;
        
        document.getElementById('iteration').innerText = iterations;

    }   

}, false);

＆＃13;

<div>Iteration: <span id="iteration"></span></div>

<video width="320" height="240" id="myVideo" controls>
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
    Your browser does not support the video tag.
</video>

＆＃13;

＆＃13;

＆＃13;

所以这里发生了什么......？

1. 我们首先定义一个名为iterations的变量，它将存储我们当前的迭代。我们将其设置为1。
2. 我们向myVideo视频添加了一个事件监听器，该视频会在视频结束时触发。
3. 然后我们检查iterations变量是否超过我们的播放次数5。
4. 我们重新启动视频，重置currentTime至0，然后使用play()功能启动视频。
5. 然后我们将iterations变量增加1，整个过程再次开始，直到我们的iterations变量到达5，此时它就会停止。