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>

Answer 1

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

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

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

Answer 2

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

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