ios上的html5视频背景视频

我有以下视频是滑块的一部分。ios上的html5视频背景视频

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

来源

2017-02-14 Craig Harshbarger

也不会玩，因为手机浏览器需要以发挥用户交互视频。这意味着播放方法必须从具有像“onClick”这样的用户交互的事件传播。如果您想马上播放，您需要像厌倦一样使用自动播放功能。 – MennyMT

@KingpinEX从我的文章中的webkit.org博客链接“如果视频元素的源媒体不包含音轨，或者如果它们的静音属性设置为true，则视频元素将被允许在没有用户手势的情况下播放（）”。另外，我提到我尝试了自动播放attr，但也没有奏效。 –

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

来源

2017-02-14 20:47:31

添加playsinline属性似乎这样做。目前我没有播放按钮。视频不会自动播放，这是问题所在。 –

ios上的html5视频背景视频

回答

相关问题