限制HTML5视频循环的数量

时间:2017-03-23 12:34:31

标签: javascript html5 loops video limit

:) 我试图循环HTML5视频3次。我发现this code代码段基本上可以满足我的需求。奇怪的是,我无法让它发挥作用。如果我在stackoverflow上运行这个演示就行了。如果我将其复制并粘贴到空白的html文档中,则不会。有什么建议吗?

谢谢!

2 个答案:

答案 0 :(得分:0)

你是否在正文部分的末尾添加了JS脚本? 脚本应添加在正文部分的末尾(加载文档时)。

答案 1 :(得分:0)

尝试复制+粘贴此内容。这应该有用。

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

<script>
    var iterations = 1;

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

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

        if (iterations < 2) {
            this.currentTime = 0;
            this.play();
            iterations ++;          
            document.getElementById('iteration').innerText = iterations;
        }   

    }, false);
</script>