播放HTML5中无限循环播放的视频

92

我希望将视频放置在HTML5页面中，该页面将在页面加载时开始播放，并在完成后立即循环回到开头。视频也应该不具有任何相关的控制，以及无论是与所有的“现代”的浏览器兼容，或者有填充工具的选项。

以前，我会通过Flash和来完成此操作FLVPlayback，但我希望避免Flash在HTML5领域使用。我以为可以使用javascriptsetTimeout创建一个平滑的循环，但是应该使用什么嵌入视频本身呢？有什么东西可以像流媒体一样播放视频FLVPlayback吗？

— Stefmikhail
source

156

该循环属性应该这样做：

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

如果您对loop属性有疑问（就像我们过去一样），请监听videoEnd事件并play()在触发时调用该方法。

注意1：我不确定Apple的iPad / iPhone上的行为，因为它们对有一些限制autoplay。

注意2：loop="true"和 autoplay="autoplay"已弃用

— 隆吉
source

1

先生，的确是个好建议。我最终使用javascript来监听videoEnd事件，并且从我可以知道的内容开始循环回到开头，loop并非所有浏览器都支持该属性。对于iOS设备，它们autoplay在iOS 5中不以任何形式支持形状或形式，因此我仅将后备图像用于移动设备。再次感谢。

— stefmikhail，2012年

10

使用<video loop =“ true”>无效 w3.org/TR/html-markup/video.html-使用<video loop =“ loop”>或仅使用<video loop>-该规则适用于几乎所有HTML5标签（对于XHTML5来说，要么只是标记名，要么是tagname =“ tagname”）

@vaxquis感谢您的更新，欢迎您下次编辑api更改！

— longi

5

没问题，队友，总是很乐意提供帮助。不过，我不会将XHTML类型的属性'autoplay =“ autoplay”'与HTML类型的'loop'混合使用-我会使用<video ... autoplay loop>，可解析为HTML5或<video .. 。autoplay =“ autoplay” loop =“ loop”>，可以解析为HTML5或XHTML5。混合样式产生的标记作为XHTML仍然无效，但对于HTML则不必要地冗长。

1

通常，autoplay仅当您同时使用Safari时，才可在Safari中使用muted：webkit.org/blog/7734/auto-play-policy-changes-for-macos

— andreyrd

38

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

因此，您应该使用

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

— 米迦5
source

14

对于iPhone，如果您还添加了playsinline，则可以使用，因此：

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

— 拉卢卡·阿尔布（Raluca Albu）
source

JSX的道具：autoPlay loop muted playsInline

— 庞贝

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

});

— 阿斯玛穆德
source