ios上的html5视频背景视频

Question

我有下面的视频，这是滑块的一部分。

<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/

Answer 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;
                }