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

移动设备上的自动播放代码通常不受支持 - 这是为了避免用户因视频文件很大而导致数据传输费用，并且可能会影响数据限制。

海报标签应该可以正常工作，但是，正如我在您上次评论中提到的那样。

Answer 2

显示实际播放的视频-但这是奇怪的！首先，我正在Android 5.1.1上进行测试。好吧，这是情况： On load，该视频不播放，而是显示后备海报图像。我已经放弃了有关视频的事情，但是当我浏览该站点并决定要返回Home时，我导航到了主页，并且正在播放视频！我尝试刷新页面，但视频没有播放on load，而是得到了海报图片！可能会发生什么？我发现仅单击电话的back button即可导航到主页，但仍无法播放视频，而明确单击home link可以播放视频！因此，我又拍了一张照片-刷新页面，视频不播放，单击home link，视频开始播放on load！这是我的home link的结构：<a href="./"><img src="path-to-logo" /></a> 有人可以解释发生了什么事吗？

Answer 3

将playsinline属性添加到视频标签中后，为我解决了该问题。

根据良好的google搜索，在移动设备上，视频元素会退回到海报上... 请注意视频的大小，这样他们的用户就不会再为海量的数据使用费而烦恼，并且不会维护响应迅速的网站。

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

HTML视频无法在移动版

3 个答案: