【前端幫幫忙】第6期 移動端使用video標籤須要注意的一些問題

相信使用過<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>標籤在各個端的表現（未播放視頻時默認的效果）：

在谷歌模擬器下的效果

安卓手機的微信內置瀏覽器

蘋果手機的微信內置瀏覽器

安卓手機的自帶瀏覽器

蘋果手機的自帶瀏覽器

問題

經過上面的測試，咱們發現幾個問題：

1. 安卓中會默認顯示播放器的控制條，說實話真很差看，介意的能夠把controls屬性去掉，而後自定義控制條的樣式
2. 安卓跟蘋果默認顯示的播放按鈕樣式也是不同
3. 在模擬器中，視頻未播放時，會默認以第一幀做爲封面圖，比較好看，在真實的手機中，無論是安卓仍是蘋果，都是黑色背景

那若是咱們想要設置一張默認的封面圖，怎麼辦？能夠給<video>標籤加上poster屬性，好比：

<video poster="../images/poster.jpg"></video>
複製代碼

這時候，咱們發現封面圖有了，可是封面圖並無鋪滿顯示，而是居中了，咱們能夠給<video>標籤添加樣式：

video {
  object-fit: cover;
}
複製代碼

沒加以前的效果：

加上後的效果：

各個端播放時的表現（帶視頻）

接下來，咱們再來看下<video>標籤在安卓手機和蘋果手機下播放時的一個效果(點擊視頻能夠播放)：

安卓手機的微信內置瀏覽器

蘋果手機的微信內置瀏覽器

安卓手機的自帶瀏覽器

蘋果手機的自帶瀏覽器

問題

經過上面的測試，咱們能夠總結出：

1. 微信內置瀏覽器播放的時候，會自動全屏，播放結束的時候還不會自動關掉，還會推薦一些騰訊自帶的其餘視頻
2. 蘋果手機微信內置瀏覽器跟自帶的瀏覽器播放效果一致，算是個好事
3. 安卓手機自帶的瀏覽器播放時不會自動全屏

解決方案

如何解決自動全屏的問題：

經測試

蘋果手機：給<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;
}
複製代碼

層級問題

後面在作商品詳情頁的視頻跟圖片切換的時候，又碰到了個很麻煩的問題，就是在安卓手機下，無論是微信內置的瀏覽器仍是自帶的瀏覽器，當你點擊視頻播放後，該視頻就會始終顯示在最上層，播放結束後也是在最上層，這時候假如咱們有在視頻的容器中放一些其餘元素的話，都會被蓋住了，就點擊不到，能夠看下我錄製的視頻感覺一下：

能夠看到，原本在視頻的上層，還有兩個頁籤（商品、詳情），跟（視頻、圖片）的切換功能，當點擊播放視頻後，都被蓋住了。

後面個人解決思路是：

1. 默認把<video>標籤隱藏起來
2. 自定義封面圖跟播放按鈕的樣式
3. 點擊自定義播放按鈕的時候，<video>標籤顯示，自定義的封面圖隱藏
4. 監聽<video>標籤播放結束後的事件ended，自定義封面顯示，<video>標籤隱藏

測試機型

本文章的例子都是基於安卓手機（版本：8.0.0），蘋果手機（iPhone 6 Plus/IOS 12.1.3）來測試的，其餘手機型號未測試，因此僅供參考了。

最後

感謝耐心讀完，若是還有什麼疑問或者建議，能夠多多交流。

好了，本文到此結束，但願對你有幫助 🙂

原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。

關注

歡迎你們關注個人公衆號前端幫幫忙，你們一塊兒學習進步！