限制 HTML5 视频的播放次数

Posted 2023-02-22

【中文标题】限制 HTML5 视频的播放次数

【英文标题】：Limit the number of times an HTML5 video plays

【发布时间】：2015-07-19 00:09:21

【问题描述】：

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

【参考方案1】：

您需要使用 javascript 来实现这一点。看看下面的sn-p：

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

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

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

【讨论】：

感谢您的回答。一个简单的循环 = '5' 对我来说非常有用。希望它会在下一个规范中。 :)

@AsimKT 我同意。我无法理解为什么这么简单的事情没有按标准实现。