HTML視頻標籤不適用於Safari和手機

我有以下代碼用於在我的頁面上自動播放視頻。問題在於，視頻在桌面瀏覽器上運行良好，但在桌面Safari瀏覽器和移動瀏覽器上，它只顯示封面圖片，而不是播放視頻。我已經嘗試了幾種來自互聯網的解決方案，但他們中的任何一個似乎都不適合我。HTML視頻標籤不適用於Safari和手機

 <section class="video-bg"> 
     <div class="embed-responsive embed-responsive-16by9"> 
      <figure class="overlay"> 
      <video autoplay class="embed-responsive-item" poster="videos/cover.jpg"> 
       <source src="videos/landing_page_video_vimeo5_converted.mp4" type="video/mp4"> 
       <source src="videos/landing page video vimeo5.ogg" type="video/ogg"> 
       <source src="videos/landing page video vimeo5.ogg" type="video/webm"> 
      </video> 
      <figcaption> 
       <h1>text</h1> 
       <p>text</p> 
       <p>text</p> 
       <p>text</p> 
       <a class="video-play" data-toggle="modal" data-target="#myModal"></a> 
      </figcaption> 
      </figure> 
     </div> 
     </section>

來源

2016-03-10 AdrianAdr

你能直接在瀏覽器中播放視頻嗎？ – Rayon

在桌面瀏覽器中，效果很好。我只有在iOS，桌面Safari瀏覽器，移動鉻，移動Firefox等問題。所有的移動瀏覽器 – AdrianAdr

嘗試打開移動瀏覽器配對中的URL。如果它工作，然後添加'controls'屬性的視頻元素，並點擊'播放'按鈕..我希望它可以幫助.. – Rayon

自動播放功能是禁用由蘋果從iOS的6.1，參見here

在Safari iOS上（對於所有設備，包括ipad公司），其中用戶可以是蜂窩網絡上，並且按每個數據單元收費，預加載和自動播放功能被禁用。直到用戶啓動它纔會加載數據。這意味着JavaScript的play()和load()方法也無活性直到用戶開始播放，除非play()或load()方法由用戶操作觸發的。換句話說，用戶啓動的Play按鈕有效，但事件不會。

加上這個source

<source src="videos/landing page video vimeo5.ogg" type="video/webm">

應該.webm由於你的類型是video/webm

只是一個提示，嘗試具有針對源相同的名稱，避免了空間。

來源

2016-03-10 11:22:20 dippas

而且該視頻不會在移動Chrome，移動Firefox上自動播放，無論是... – AdrianAdr

HTML視頻標籤不適用於Safari和手機

回答

相關問題