我花了很多时间试图弄清楚为什么视频会像这样嵌入:

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

一旦页面在FireFox中加载,就开始自动播放,但不能在基于Webkit的浏览器中自动播放。这只发生在一些随机的页面上。到目前为止我还没有找到原因。我怀疑一些未关闭的标签或CMS编辑器创建的大量JS。


当前回答

我们最近用一个嵌入式视频解决了一个类似的问题,发现自动播放和静音属性对我们的实现来说不够。

我们在代码中添加了第三个“playsinline”属性,它为iOS用户解决了这个问题。

此修复是特定于视频要内联播放。来自https://webkit.org/blog/6784/new-video-policies-for-ios/:

在iPhone上,元素现在将允许内联播放,并且在播放开始时不会自动进入全屏模式。 没有playsinline属性的元素将继续需要全屏模式在iPhone上播放。 当用缩放手势退出全屏时,没有playsinline的元素将继续inline播放。

其他回答

试试这个:

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

我们最近用一个嵌入式视频解决了一个类似的问题,发现自动播放和静音属性对我们的实现来说不够。

我们在代码中添加了第三个“playsinline”属性,它为iOS用户解决了这个问题。

此修复是特定于视频要内联播放。来自https://webkit.org/blog/6784/new-video-policies-for-ios/:

在iPhone上,元素现在将允许内联播放,并且在播放开始时不会自动进入全屏模式。 没有playsinline属性的元素将继续需要全屏模式在iPhone上播放。 当用缩放手势退出全屏时,没有playsinline的元素将继续inline播放。

角10:

<video [muted]="true" [autoplay]="true" [loop]="true">
    <source src="/assets/video.mp4" type="video/mp4"/>
</video>

我有一个案例,它与不同文件类型的顺序有关。试着改变一下,看看是否有帮助。

碰巧Safari和Chrome on Desktop不喜欢围绕视频标签的DOM操作。当设置了自动播放属性时,即使在初始页面加载后视频标记周围的DOM发生变化时canplaythrough事件已经触发,它们也不会触发播放顺序。基本上我也有同样的问题,直到我删除了视频标签周围的.wrap() jQuery,之后它就会像预期的那样自动播放。