限制 HTML5 视频播放的次数

Question

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

Answer 1

您将需要使用 JavaScript 来实现此目的。看看下面的片段：

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);

<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>

那么这里发生了什么...？

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

Answer 2

确保您的视频具有自动播放的“静音”属性。 “打开”“结束”是了解视频何时结束的关键，然后您可以计算迭代次数。此外，currentTime = 1 将在视频结束时停止，currentTime = 0 将在视频开始时停止。

let vid = $('body').find("#background-video");
let countPlay = 0;
$(vid).get(0).play();
$(vid).on('ended', function() {
    countPlay++;
    console.log(countPlay);
    if(countPlay <= 2){
        $(vid).get(0).play();
        console.log(countPlay);
    } else {
        $(vid).get(0).pause();
        $(vid).get(0).currentTime = 1;
    }
});