關於HTML5中Video標簽播放問題

 

PS：官網首頁視頻IOS與安卓都可播放代碼：

<video width="100%" height="auto" type="video/mp4" controls="controls" class="adVideo" id="adVideo"></video>

 

1、視頻文件問題 ：考慮代碼沒問題情況下，如IOS視頻還是播放不了，可能是視頻問題 ，視頻壓縮太狠或視頻編碼選不對都會導致播放只有聲，沒圖像的問題；

2、video 標簽在微信瀏覽器的問題解決方法

最近做的些web頁面,內嵌許多小視頻，在ios和安卓手機上播放時，遇到不少問題：

• 在微信瀏覽器內播放時，視頻會自動全屏
• 如果每個視頻都有一張自定義的圖片作為封面，在顯示視頻的同時，如果沒有給這個視頻設置高度，視頻的容器在安卓手機上會被視頻的封面撐大到變形

解決辦法：

給video標簽加一些屬性，調用h5原生video，我寫了個例子，加了注釋，如果有錯誤，煩指正，謝謝！

<video class="video-source"
     width="100%"　　　height="240px"  /*如果有封面，請設置高度*/     controls  /*這個屬性規定瀏覽器為該視頻提供播放控件*/  
     style="object-fit:fill"  /*加這個style會讓 Android / web 的視頻在微信里的視頻全屏，如果是在手機上預覽，會讓視頻的封面同視頻一樣大小*/
     webkit-playsinline="true"  /*這個屬性是ios 10中設置可以讓視頻在小窗內播放，也就是不是全屏播放*/  
     x-webkit-airplay="true"  /*這個屬性還不知道作用*/ 
     playsinline="true"  /*IOS微信瀏覽器支持小窗內播放*/ 
     x5-video-player-type="h5" /*啟用H5播放器,是wechat安卓版特性*/
     x5-video-orientation="h5" /*播放器支付的方向，landscape橫屏，portraint豎屏，默認值為豎屏*/
     x5-video-player-fullscreen="true" /*全屏設置，設置為 true 是防止橫屏*/
     preload="auto" /*這個屬性規定頁面加載完成后載入視頻*/ 
</video>

如果你的video標簽也加了上面的屬性，那么，你的視頻可以在IOS手機上的小窗口播放，同時，視頻封面同視頻的寬度與高度也保持一致了。

經過各種嘗試，在iOS下，可以給video添加webkit-playsinline屬性，使視頻在頁面上原本位置播放，但這個屬性在安卓上無效。

代碼參考：

 

<video src="images/video1.mp4" id="video-obj1" class="video-obj" controls="controls" x-webkit-airplay="true" webkit-playsinline="true" playsinline></video>

添加 x-webkit-airplay="true" webkit-playsinline="true" playsinline 三個屬性

注意：此方法在部分安卓手機微信端無法實現效果，因為是微信內核問題，並且微信會把播放的視頻的層級設置為最高，所以會存在視頻返回后視頻遮住頁面問題，

解決方法：監聽視頻暫停事件 pause，暫停后將視頻元素隱藏，寫一個視頻封面圖，點擊封面圖進行視頻顯示和播放

$("#video").addEventListener("pause",function(){
　　$(".video1").hide();
})

 

 

-------------------------------------

相關參考：https://www.cnblogs.com/baiyygynui/p/6323565.html