OStack程序员社区-中国程序员成长平台

标题: javascript - ios上的html5视频背景视频 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 18:58
标题: javascript - ios上的html5视频背景视频

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

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

---

Best Answer-推荐答案

将此添加到您的 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;
                }

关于javascript - ios上的html5视频背景视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42229146/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4