视频未在 iOS10 Chrome 上播放

Question

我就是找不到这个视频片段有什么问题。

<video poster="sample.jpg" loop autoplay controls muted playsinline>
    <source type="video/webm" src="sample.webm"></source>
    <source type="video/mp4" src="sample.mp4"></source>
</video>

视频在 Safari 中播放没有任何问题（没有针对 iOS 的早期版本进行测试，但我唯一担心的是自动播放问题？），但在 Chrome 上唯一的问题我看到的是封面图片和一个不会触发任何内容的播放按钮。我错过了什么吗？我真的需要使用 JS 才能让它工作吗？

更新：使用 iOS Chrome 播放 Webm 文件似乎有问题 - 我尝试了来自不同位置的多个文件，似乎需要先下载它们才能使用玩

Answer 1

Google Chrome currently has a bug in which it will not autoplay a .webm video if it comes after anything else. Try to use a code published here.

像往常一样构建一个HTML5 video：

<video playsinline autoplay muted loop poster="aurora.jpg" id="bgvid">
    <source src="aurora.webm" type="video/webm"> </source>
    <source src="aurora.mp4" type="video/mp4"> </source>
</video>

如果之前的建议没有帮助，请尝试在 Github 上使用脚本回放示例 video.js and simpl。

另请阅读this post dedicated to muted autoplay in mobile browsers. And it must be useful to read Stack Overflow post as well – Efficiently detect if a device will play silent videos。

Answer 2

I just can't seem to locate what's wrong with this video snippet.
<video poster="sample.jpg" loop autoplay controls muted playsinline>
    <source type="video/webm" src="sample.webm"></source>
    <source type="video/mp4" src="sample.mp4"></source>
</video>
...Update: It seems there's an issue with playing Webm files with iOS Chrome.

最简单和最好的解决方法是确保先声明 mp4 文件，然后再声明 webm（相反您显示的订单）。我相信 iOS 期望 mp4 作为 HTML5 视频标签中的第一个文件。所有 iOS 看到的是 src="sample.webm"，这不是有效的预期 MPEG 编解码器，因此导致您的 "...播放按钮不会触发任何东西"。你在某处遇到了静默错误。

尝试：

<video poster="sample.jpg" loop autoplay controls muted playsinline>
    <source type="video/mp4" src="sample.mp4"></source>
    <source type="video/webm" src="sample.webm"></source>
</video>

旁注：只是我的意见，但是，我认为这里有 webm 是多余的，因为主要支持系统（基于 Google 的技术）已经可以处理 mp4 无论如何。

最好在 [最终用户] 的浏览器中为这些视频解码器提供 mp4 或 ogv 的选择（以防万一火狐）。

PS：由于 SIM 数据限制，大多数移动系统都禁用自动播放。最终用户必须选择播放该视频。网上可能有聪明的解决方法，但请记住，这是预期的行为，因此不是您当前代码的问题。

视频未在 iOS10 Chrome 上播放

Video not playing on iOS10 Chrome

html

video

google-chrome

playback

ios10