112

我希望在 HTML5 页面中放置一个视频，该页面将在页面加载时开始播放，一旦完成，就会不间断地循环回到开头。视频也不应该有任何与之关联的控件，并且要么与所有“现代”浏览器兼容，要么可以选择 polyfill 。

以前我会通过Flashand完成此操作FLVPlayback，但我更愿意避开FlashHTML5 领域。我在想我可以使用 javascriptsetTimeout来创建一个平滑的循环，但是我应该用什么来嵌入视频本身呢？有什么东西可以像这样流式传输视频FLVPlayback吗？

4

4 回答 4

181

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：我不确定 Apple iPad/iPhone 上的行为，因为它们对autoplay.

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

于 2012-05-02T13:55:36.987 回答
57

截至 2018 年 4 月，Chrome（以及其他几个主要浏览器）现在也需要该muted属性。

因此，您应该使用

<video width="320" height="240" autoplay loop muted>
  <source src="movie.mp4" type="video/mp4" />
</video>
于 2018-11-12T08:57:48.930 回答
22

对于 iPhone，如果您还添加 playinline 则它可以工作：

<video width="320" height="240" autoplay loop muted playsinline>
  <source src="movie.mp4" type="video/mp4" />
</video>
于 2019-03-21T13:20:17.003 回答
2

您可以通过以下两种方式执行此操作：

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

});
于 2017-10-24T17:39:52.357 回答