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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

但是，正如我认为您在上一条评论中指出的那样，海报标签应该可以正常工作。

原文由 Mick 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将 playsinline 属性添加到视频标签为我解决了这个问题。

根据一个很好的谷歌搜索，在移动设备上，视频元素会退回到海报……请注意视频大小，这样他们的用户就不会再承担大量数据使用费用并维护响应式网站。

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

原文由 Tom 发布，翻译遵循 CC BY-SA 4.0 许可协议