相信使用過<video>標籤的都知道，<video>標籤在pc端跟手機端顯示的樣式並不一樣，而且還有個很蛋疼的就是微信中內建的瀏覽器，播放的時候會自動全屏問題。
接下來我們通過例子來分析下使用過程中可能碰到的一些問題，供大家參考。
示例程式碼
這是程式碼，只加了controls="controls"顯示播放控制條，為了保持視訊寬高比例，所以<video>外層套了一個div。
<div class="mod-video-container">
<video class="mod-video-ele" controls="controls">
<source src="https://cloud.video.taobao.com/play/u/2616970884/p/1/e/6/t/1/50067740635.mp4" type="video/mp4">
您的瀏覽器不支援最新的video播放
</video>
</div>
複製程式碼.mod-video-container {
position: relative;
padding-top: 56.25%;
background: #000;
}
.mod-video-ele {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
複製程式碼各個端的表現
我們先來看下<video>標籤在各個端的表現（未播放視訊時預設的效果）：
在谷歌模擬器下的效果
安卓手機的微信內建瀏覽器
蘋果手機的微信內建瀏覽器
安卓手機的自帶瀏覽器
蘋果手機的自帶瀏覽器
問題
通過上面的測試，我們發現幾個問題：
- 安卓中會預設顯示播放器的控制條，說實話真不好看，介意的可以把controls屬性去掉，然後自定義控制條的樣式
- 安卓跟蘋果預設顯示的播放按鈕樣式也是不一樣
- 在模擬器中，視訊未播放時，會預設以第一幀作為封面圖，比較好看，在真實的手機中，不管是安卓還是蘋果，都是黑色背景
那如果我們想要設定一張預設的封面圖，怎麼辦？可以給<video>標籤加上poster屬性，比如：
<video poster="../images/poster.jpg"></video>
複製程式碼這時候，我們發現封面圖有了，但是封面圖並沒有鋪滿顯示，而是居中了，我們可以給<video>標籤新增樣式：
video {
object-fit: cover;
}
複製程式碼沒加之前的效果：
加上後的效果：
各個端播放時的表現（帶視訊）
接下來，我們再來看下<video>標籤在安卓手機和蘋果手機下播放時的一個效果(點選視訊可以播放)：
安卓手機的微信內建瀏覽器
蘋果手機的微信內建瀏覽器
安卓手機的自帶瀏覽器
蘋果手機的自帶瀏覽器
問題
通過上面的測試，我們可以總結出：
- 微信內建瀏覽器播放的時候，會自動全屏，播放結束的時候還不會自動關掉，還會推薦一些騰訊自帶的其他視訊
- 蘋果手機微信內建瀏覽器跟自帶的瀏覽器播放效果一致，算是個好事
- 安卓手機自帶的瀏覽器播放時不會自動全屏
解決方案
如何解決自動全屏的問題：
經測試
蘋果手機：給<video>標籤加上playsinline屬性即可解決，安卓無效，以防萬一可以把webkit-playsinline屬性也加上
安卓手機：給<video>標籤加上x5-playsinline屬性就可以解決
最終程式碼
<div class="mod-video-container">
<video class="mod-video-ele" controls="controls" playsinline webkit-playsinline x5-playsinline poster="images/poster.jpg">
<source src="https://cloud.video.taobao.com/play/u/2616970884/p/1/e/6/t/1/50067740635.mp4" type="video/mp4">
您的瀏覽器不支援最新的video播放
</video>
</div>
複製程式碼.mod-video-container {
position: relative;
padding-top: 56.25%;
background: #000;
}
.mod-video-ele {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
複製程式碼層級問題
後面在做商品詳情頁的視訊跟圖片切換的時候，又碰到了個很麻煩的問題，就是在安卓手機下，不管是微信內建的瀏覽器還是自帶的瀏覽器，當你點選視訊播放後，該視訊就會始終顯示在最上層，播放結束後也是在最上層，這時候假如我們有在視訊的容器中放一些其他元素的話，都會被蓋住了，就點選不到，可以看下我錄製的視訊感受一下：
可以看到，本來在視訊的上層，還有兩個頁籤（商品、詳情），跟（視訊、圖片）的切換功能，當點選播放視訊後，都被蓋住了。
後面我的解決思路是：
- 預設把
<video>標籤隱藏起來 - 自定義封面圖跟播放按鈕的樣式
- 點選自定義播放按鈕的時候，
<video>標籤顯示，自定義的封面圖隱藏 - 監聽
<video>標籤播放結束後的事件ended，自定義封面顯示，<video>標籤隱藏
測試機型
本文章的例子都是基於安卓手機（版本：8.0.0），蘋果手機（iPhone 6 Plus/IOS 12.1.3）來測試的，其他手機型號未測試，所以僅供參考了。
最後
感謝耐心讀完，如果還有什麼疑問或者建議，可以多多交流。
好了，本文到此結束，希望對你有幫助 ?
原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
關注
歡迎大家關注我的公眾號前端幫幫忙，大家一起學習進步！
