移动设备上HTML视频无法播放

Question

我有一个自动播放、循环的全宽背景视频，在桌面上表现得非常好，但在移动设备上出现黑屏，无法播放。我需要解决这个问题，如果无法在移动设备上播放视频，我可以在移动设备上使用背景图像。

<video autoplay loop muted autobuffer preload="auto" poster="poster.png" class="background-video">
        <source src="video.webm" type='video/webm; codecs="vp8.0, vorbis"'>
        <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
        <source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
    </video>

- Partteam

---

什么类型的手机？操作系统是什么？版本号是多少？使用的浏览器是哪一个？控制台中是否有错误信息？ - Marcos Pérez Gude

也许你可以尝试使用https://www.jwplayer.com/products/jwplayer/mobile-video/。 - user2592416

嗯，我会看看的。 - Partteam

@Paulosá，您将能够使用所有Chrome开发者工具（检查器、控制台、网络、调试器等），通过这些工具，您可以准确地识别问题。您可以在网络中查看视频资源是否已加载，如果控制台抛出错误，则可以检查元素以查看其是否位于正确的位置...等等。 - Marcos Pérez Gude

HTML5视频在桌面和移动设备上以本地模式运行，没有任何问题，您不需要像jwplayer这样的插件，尽管它曾经很有用，但现在已经不再必要。 - Marcos Pérez Gude

Answer 1

在视频标签中添加playsinline属性解决了我的问题。

根据谷歌搜索，在移动设备上，Video元素会回退到海报...请注意视频大小，以便用户不会产生大量的数据使用费用，并确保网站响应灵敏。

<video playsinline autoplay loop muted id="myVideo"></video>

- Tom

Answer 2

移动设备通常不支持自动播放标签 - 这是为了避免用户因视频文件过大而产生数据传输费用并影响数据限制。

然而，海报标签应该可以正常工作，就像您在上一条评论中提到的那样。

- Mick

Answer 3

原来视频确实能播放，但奇怪的是它是如何播放的！ 首先，我正在测试 Android 5.1.1 上。 好的，这是情况： 加载时，视频不会播放，而是显示备用海报图像。 我已经放弃了视频，但当我浏览网站并在某个时候决定要回到主页时，我导航到主页，视频正在播放！我尝试刷新页面，视频没有在加载时播放，而是得到了海报图像！ 可能发生了什么？ 我发现只是点击手机的返回按钮导航到主页仍然无法播放视频，但明确地点击主页链接可以！ 所以我再试一次-刷新页面，视频不播放，点击主页链接，视频开始播放加载！ 这是我的主页链接的结构：<a href="./"><img src="path-to-logo" /></a> 有人能解释一下可能发生了什么吗？

- kawerewagaba

---

这是HTML视频元素的行为。在用户与网站进行交互之前，它不会触发自动播放。在移动浏览器的初始加载中，它仍然不被视为用户与网站进行了交互。当您第二次加载时，它会计算交互并开始播放。 - Ramesh