H5中video標簽中設置autoplay不起作用。


解決方法:

需要給 video標簽 添加 muted 屬性

 

問題如下:

<div class="one_video">
    <video src="../a_images/xunlei/201702241034284066.mp4" autoplay loop></video>
</div>

video 加入 mp4格式。並設置了自動播放屬性,autoplay和循環播放,loop。

但是使用瀏覽器瀏覽時,視頻是能被加載出來,但是卡在第一個畫面無法進行播放.....

比較尷尬,只能去找原因。

網上給了兩個方案,不知道是不是答案太老了,看着都不靠譜:

1. 視頻太大了。     (我的視頻14M ,肯定是沒問題的)

2. 視頻不在根目錄。  (感覺上就覺,H5頁面不應該有這種規定吧?抱着試試的態度,果然還是沒用。)

 

最后,網上還說一種辦法,就是加上 muted屬性

同樣是,抱着試一試的態度,進行了測試,發現頁面中的視頻確實變得可以自動播放了。

那,這個 muted是什么屬性。隨即,去權威網站查了一下。

     

 

 

發現,muted 屬性也就是把音頻禁音。沒有特殊屬性。

我的視頻確實也是沒聲音的,所以,禁音這個屬性,對我這個案例來說是沒有影響的。

但是如果有聲音的視頻被禁音了。那豈不是還是有問題?

那為什么視頻禁音就能自動播放?

腦子里想着這些問題,我又開始新的資料查詢。

H5這塊是找不到,其他有關視頻 這塊的原因,

想着是不是容器這塊的問題?也就是瀏覽器這塊的問題?

 

果然還是瀏覽器這邊有了新的發現。

 

在瀏覽器 autoplay  自動播放策略的這塊發現:

 

1. 現在的瀏覽器不允許媒體自動播放。(版本應該是chrome 66.0版本開始。)

  我看我的瀏覽器版本,看來這個回答,還是比較靠譜的。

 

       

 

 

 2. safari 阻止自動播放視頻。

            

 

3. 出於用戶體驗,節省流量的考慮,移動端也是禁止自動播放。

4. opera 瀏覽器也是 阻止autoplay。

 

 

 

解決方案的話,我這塊還沒有親身經歷。

下面附個網上的文章。以后有機會了再試試。

 

 

autoplay自動播放策略簡單了解

 

 

 

 

希望可以幫助到你。

by不言謝

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM