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視頻背景視頻

回答

相關問題