玩无限循环载视频的HTML5玩无限循环载视频的HTML5(Play infinitely loopi

我期待将在HTML5页面将开始玩网页加载视频，并且一旦完成，循环回到开始不绝。 视频也应该不会有任何相关的控制，以及或者是兼容所有“现代”的浏览器，或有填充工具的选项。

以前我会通过这样做Flash和FLVPlayback ，但我宁愿避开Flash在HTML5领域。 我想我可以使用JavaScript的setTimeout创造平稳循环，但我应该怎么用嵌入视频本身？ 有什么在那里，将流视频的方式FLVPlayback会吗？

Answer 1:

loop属性应该这样做：

<video width="320" height="240" autoplay loop>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

如果您有与循环属性的问题（因为我们在过去），听videoEnd事件并调用play()方法时触发。

注1：我不知道有关苹果的iPad / iPhone的行为，因为他们有对一些限制autoplay 。

注2： loop="true" ，并autoplay="autoplay"已被弃用

Answer 2:

随着2018年4月的，铬（与其他几个主要的浏览器一起）现在需要的muted属性了。

因此，你应该使用

<video width="320" height="240" autoplay loop muted>
  <source src="movie.mp4" type="video/mp4" />
</video>

Answer 3:

对于iPhone它的作品，如果你也添加这样playsinline：

<video width="320" height="240" autoplay loop muted playsinline>
  <source src="movie.mp4" type="video/mp4" />
</video>

Answer 4:

为此，您可以通过以下两种方式：

1）使用loop在视频元素的属性（在第一个答案提及）：

2），你可以使用ended媒体活动：

window.addEventListener('load', function(){
    var newVideo = document.getElementById('videoElementId');
    newVideo.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);

    newVideo.play();

});

文章来源: Play infinitely looping video on-load in HTML5