ios上的html5视频背景视频答案

【问题标题】：html5 video background video on iosios上的html5视频背景视频
【发布时间】：2017-02-15 04:47:31
【问题描述】：

我有以下视频，它是滑块的一部分。

<div class="slide video-bg">
    <video muted webkit-playsinline playsinline poster="/video/3/4_Marching_band-HD_1080p.jpg">
        <source src="/video/3/4_Marching_band-HD_1080p.webm" type="video/webm">
        <source src="/video/3/4_Marching_band-HD_1080p.mp4" type="video/mp4">
        <source src="/video/3/4_Marching_band-HD_1080p.ogv" type="video/ogg">
    </video>
</div>

页面加载时，视频会调用play()。在我尝试过的每个桌面浏览器上，效果都很好。但在 iOS 上，视频从不播放。

我已阅读 https://webkit.org/blog/6784/new-video-policies-for-ios/ 并尝试遵循每个要求。我什至在视频中添加了autoplay 属性，即使我想用 js 来控制它。该视频没有音频，并且在页面加载时可见。知道为什么它不能在 iOS 上播放吗？

有问题的页面：http://heartland.thinkersites.com/products/

【问题讨论】：

它不会播放，因为移动浏览器需要用户交互才能播放视频。这意味着播放方法必须从具有用户交互的事件（如“onClick”）传播。如果您想立即播放，则需要像累了一样使用自动播放。
@KingpinEX 来自我的帖子中的 webkit.org 博客链接“如果视频元素的源媒体不包含音轨，或者设置了静音属性，则将允许在没有用户手势的情况下播放（）视频元素为真”。另外，我提到我尝试了自动播放属性，但也没有用。

标签： javascript ios html video

【解决方案1】：

将此添加到您的 CSS 以从 iOS 设备上移除难看的播放按钮：

                *::-webkit-media-controls-panel {
                  display: none!important;
                  -webkit-appearance: none;
                }

                *::--webkit-media-controls-play-button {
                  display: none!important;
                  -webkit-appearance: none;
                }

                *::-webkit-media-controls-start-playback-button {
                  display: none!important;
                  -webkit-appearance: none;
                }

【讨论】：

添加 playinline 属性似乎可以做到这一点。目前我没有播放按钮。视频无法自动播放，这就是问题所在。