解決方法:
需要給 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。
解決方案的話,我這塊還沒有親身經歷。
下面附個網上的文章。以后有機會了再試試。
希望可以幫助到你。
by不言謝