摘要：中在安卓與實際應用中遇到的問題及解決安卓和對于中的兼容一直是大問題，各種不一樣，體驗還很差。參考視頻播放踩坑小計中在安卓與實際應用中遇到的問題及解決視頻標簽的一些特殊屬性詳解微信中同層播放器接入教程標簽在微信瀏覽器的問題解決方法

安卓和IOS對于html5中的video兼容一直是大問題，各種不一樣，體驗還很差。這段時間做一個html的video播放的時候，要求全屏展示，真是各種問題。下面就就記一下這個項目中遇到的一下手機兼容問題和對應的處理方法。查資料的過程中，發現針對于video的兼容問題還是比較多個，會羅列視頻播放的通用場景和各個場景下踩過的坑，希望在需求開發的時候，能夠針對合適的場景，選擇合適的技術方案。有相關的補充，歡迎大家進行補充。

src 視頻的地址

poster 允許用戶控制視頻的播放，包括音量，跨幀，暫停/恢復播放。

controls 屬性規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像

preload 在頁面加載后載入視頻

webkit-playsinline && playsinline 視頻播放時局域播放，不脫離文檔流 。但是這個屬性比較特別， 需要嵌入網頁的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。換句話說，如果APP不設置，你頁面中加了這標簽也無效，這也就是為什么安卓手機WeChat 播放視頻總是全屏，因為APP不支持playsinline，而ISO的WeChat卻支持。

x-webkit-airplay 這個屬性應該是使此視頻支持ios的AirPlay功能。使用AirPlay可以直接從使用iOS的設備上的不同位置播放視頻、音樂還有照片文件，也就是說通過AirPlay功能可以實現影音文件的無線播放，當然前提是播放的終端設備也要支持相應的功能

x5-video-player-type 啟用同層H5播放器，就是在視頻全屏的時候，div可以呈現在視頻層上，也是WeChat安卓版特有的屬性。同層播放別名也叫做沉浸式播放，播放的時候看似全屏，但是已經除去了control和微信的導航欄，只留下"X"和"<"兩鍵。目前的同層播放器只在Android（包括微信）上生效，暫時不支持iOS。至于為什么同層播放只對安卓開放，是因為安卓不能像ISO一樣局域播放，默認的全屏會使得一些界面操作被阻攔，如果是全屏H5還好，但是做直播的話，諸如彈幕那樣的功能就無法實現了，所以這時候同層播放的概念就解決了這個問題。不過在測試的過程中發現，不同版本的IOS和安卓效果略有不同 安卓效果圖-如圖所示

x5-video-orientation 聲明播放器支持的方向，可選值landscape 橫屏, portraint豎屏。默認值portraint。無論是直播還是全屏H5一般都是豎屏播放，但是這個屬性需要x5-video-player-type開啟H5模式

x5--video--player--fullscreen 全屏設置。它又兩個屬性值，ture和false，true支持全屏播放，false不支持全屏播放。其實，IOS 微信瀏覽器是Chrome的內核，相關的屬性都支持，也是為什么X5同層播放不支持的原因。安卓微信瀏覽器是X5內核，一些屬性標簽比如playsinline就不支持，所以始終全屏。

自動播放

全屏處理

播放控制

隱藏視頻播放的控制條

video設置封面顯示空白

video在某些機型上，再次播放會黑屏，沒圖像只有聲音

安卓手機播放結束后，會有廣告彈出

... 后邊問題會逐步完善 ...

webview對于video原生標簽的支持(存在過閃退的現象)

多視頻播放的時候，會存在播放黑屏？？

video和audio同時播放的場景，怎么兼容更好？？

早期的安卓和IOS都需要用戶手勢才能自動播放，后期逐漸放寬的自動播放的策略，逐漸開始支持自動播放，當然在不同的安卓微信手機和對應的瀏覽器上，展示略有差異，這個沒有完全清楚所以機型展示情況。

PC端的瀏覽器具體情況有所差別，這個沒有進行深入研究，大家有采坑歡迎進行補充。

真正的做法是，檢測當前的瀏覽器是否能支持自動播放，示例代碼：

var promise = document.querySelector("video").play();
if (promise !== undefined) {
  promise.then(() => {
    // video can play
  }).catch(err => {
    // video cannot play
  })
}

不同的應用下，展示情況略有差異，釘釘可以支持，但是微信就禁止，但是自己提供了內置的事件來支持自動播放，示例代碼：

document.addEventListener("WeixinJSBridgeReady", function () {
  music.play()
}, false)

這個其實并不難，安卓和IOS，在微信環境下打開，默認應該都是全屏(不是視頻占據整個手機的全屏，而是占用body內的視窗范圍之內)

安卓全屏效果，沒有頂部的導航欄，只有”>“ 和 ”...“,[效果如下]:

IOS會直接打開全屏模式。效果如下：

IOS的非全屏展示。對安卓無影響 IOS效果圖-如圖所示:

但是有的時候不想全屏展示，只需要加上webkit-playsinline && playsinline即可，視頻播放不脫離文檔流，進行局部播放。安卓情況下有"..."， 如果安裝過QQ瀏覽器會能進行小窗播放，懸浮在頁面的最上面，這個現象符合條件都有，但是不能去掉。這個還是解決不了的，不過一般這樣操作的用戶還是在少數。

video 元素有提供多個行為事件供開發者控制視頻播放，兼容性比較好的有 onended 、 ontimeupdate、onplay、onplaying等，有些事件在不同瀏覽器不同設備上的的表現情況并不一致，不同的系統，設備，瀏覽器顯示的特性還是很不一樣的，還是看業務場景需要兼容到什么樣，盡量不要大量處理這些事件，不然用戶去瀏覽的時候，兼容問題較多。

我處理的基本是，安卓和IOS進入全屏，退出全屏，暫停和停止這4個事件，其中進入全屏，退出全屏需要針對安卓和IOS做不同的處理。

安卓監聽進入全屏的事件：

jsvideo.addEventListener("x5videoenterfullscreen", () => {
  console.log("進入全屏通知");
})
jsvideo.addEventListener("x5videoexitfullscreen", () => {
  console.log("退出全屏通知");
})

IOS監聽進入全屏的事件：

jsvideo.addEventListener("webkitbeginfullscreen", () => {
  console.log("進入全屏通知");
})

jsvideo.addEventListener("webkitendfullscreen", () => {
  console.log("退出全屏通知");
})

監聽暫停事件

jsvideo.addEventListener("pause", () => {
  console.log("暫停了")
})

監聽停止事件
jsvideo.addEventListener("ended", () => {
console.log("停止了22")
})

重頭戲來了，相信這個這個問題已困擾無數的前端開發人員，再搜尋這個問題的解決方法時，幾乎所有的文章都是告訴你android下，播放器的控件是去不了的。其實似乎確實是這樣的，但后邊在的android下，也是沒有控制條的。最初看到那些H5視頻我首先并沒有去看他們的內容多么新穎，傳播量多么廣，我是第一時間測試了android下的兼容問題，發現并沒有出現控制條。在我研究半天未果時，在一篇技術帖中看到說：因是騰訊自己的項目，微信是騰訊自己的，他們在瀏覽器里做了一些配置，對旗下出品的H5有所“優待”，才能確保視頻的順利“喬裝”。

上面的說法我并沒有真正核實過，不過可以使用css進行操作，我實現的方式是在video外層套一個div,height設置為100%并且設置overflow:hidden,video大于100%，就能把控制條頂到視窗外。這算是視覺的隱藏(驚喜萬分~)，這個時候對于video可能會造成放大，視頻要留有一定的安全區，防止遮擋主體內容。對于用戶體驗來說，長視頻沒有控制欄還是挺不合適的，當然這個只是一個思路，具體的情況還是看產品的形式適合哪種。

現象描述：設置poster在不同設備上表現不同，瀏覽器沒問題，但是微信瀏覽器和IOS就是死活顯示空白，展示效果就是：孤零零的一個播放按鈕展示在白紙上一樣

解決方案：

方案1： 如果有視頻合成的封面圖，就自定義一個div，將封面放在div中，然后div蓋在video的上面。

方案2： 沒有封面圖就通過canvas截取視頻第一幀作為默認顯示的圖片。

var cut = function() {
  // 1. 創建畫布
  let canvas = document.createElement("canvas");
  canvas.width = video.videoWidth * scale;
  // 2. 設定寬高比
  canvas.height = video.videoHeight * scale;
  // 3. 將視頻此刻幀數畫入畫布
  canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
  let img = document.createElement("img");
  img.src = canvas.toDataURL("image/png");
  // 4. 寫入到Dom
  Dom.appendChild(img);
};
video.addEventListener("loadeddata",cut);//在視頻幀數已加載時執行截取

現象描述：第一次播放視頻ok,但是在IOS12.*以下的機型，再次播放視頻會出現黑屏的現象。檢查代碼發現，video使用了v-show,關閉之后，對應的方法執行，但是只有聲音沒有圖像，為啥？？？

解決方案：

方案1：嘗試加了代碼 webkit-playsinline && playsinline ，能保證再次進入不黑屏，但是IOS自動全屏的失效。

思考：但是為啥這樣子？？不太符合邏輯的呢，仔細又看了代碼，發現外邊有v-show(代碼如：代碼1所示),猜測可能是這樣引起的，第二次使用的時候，難道IOS12.*以下的手機本身有兼容問題，因此，沒有使用v-show處理，只用css處理了。，這樣能保證IOS打開視頻全屏，再次打開也不黑屏。根本原因還是有待深究的。

方案2：沒有使用v-show處理，只用css進行兼容處理(代碼如：代碼2所示)

代碼片1：

  


----  分割線  -----

代碼片2：
 

  

如果你沒有付費的話 從理論來說 廣告是不可避免的 但是可以通過一些方法繞過廣告：
簡單粗暴解決方案：

首先判斷設備是安卓還是iOS

在視頻播放完成事件中添加，先播放視頻再暫停視頻即可

let isiOS = !!navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/)
let videoContext = document.getElementById("video");
videoContext.addEventListener("ended", () => {
  if (!isiOS) {
      videoContext.play();
      setTimeout(() => {
          videoContext.pause();
      }, 100)
  }
}

總結上面的問題，發現正是的場景下不同設備的手機兼容情況還是真的不一樣的，我們針對特定的情況考慮一個合適的兜底方案即可，盡量使用最保險的做法，畢竟上線盡量保證沒有bug才是極好的。

當使用video進行視頻播放，相對于早期來說，現在手機的性能越來越好，流量時代也要迎來5G,會越來越放寬限制，現在表現雖然不太一樣，但是未來還是會走向統一的。

視頻播放--踩坑小計
html5中video在安卓與ios實際應用中遇到的問題及解決
視頻標簽 video的一些特殊屬性詳解
微信中H5同層Video播放器接入教程
video 標簽在微信瀏覽器的問題解決方法