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

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

src 視頻的地址

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

controls 屬性規(guī)定視頻下載時(shí)顯示的圖像，或者在用戶點(diǎn)擊播放按鈕前顯示的圖像

preload 在頁面加載后載入視頻

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

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

x5-video-player-type 啟用同層H5播放器，就是在視頻全屏的時(shí)候，div可以呈現(xiàn)在視頻層上，也是WeChat安卓版特有的屬性。同層播放別名也叫做沉浸式播放，播放的時(shí)候看似全屏，但是已經(jīng)除去了control和微信的導(dǎo)航欄，只留下"X"和"<"兩鍵。目前的同層播放器只在Android（包括微信）上生效，暫時(shí)不支持iOS。至于為什么同層播放只對(duì)安卓開放，是因?yàn)榘沧坎荒芟馡SO一樣局域播放，默認(rèn)的全屏?xí)沟靡恍┙缑娌僮鞅蛔钄r，如果是全屏H5還好，但是做直播的話，諸如彈幕那樣的功能就無法實(shí)現(xiàn)了，所以這時(shí)候同層播放的概念就解決了這個(gè)問題。不過在測試的過程中發(fā)現(xiàn)，不同版本的IOS和安卓效果略有不同 安卓效果圖-如圖所示

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

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

自動(dòng)播放

全屏處理

播放控制

隱藏視頻播放的控制條

video設(shè)置封面顯示空白

video在某些機(jī)型上，再次播放會(huì)黑屏，沒圖像只有聲音

安卓手機(jī)播放結(jié)束后，會(huì)有廣告彈出

... 后邊問題會(huì)逐步完善 ...

webview對(duì)于video原生標(biāo)簽的支持(存在過閃退的現(xiàn)象)

多視頻播放的時(shí)候，會(huì)存在播放黑屏？？

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

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

PC端的瀏覽器具體情況有所差別，這個(gè)沒有進(jìn)行深入研究，大家有采坑歡迎進(jìn)行補(bǔ)充。

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

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

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

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

這個(gè)其實(shí)并不難，安卓和IOS，在微信環(huán)境下打開，默認(rèn)應(yīng)該都是全屏(不是視頻占據(jù)整個(gè)手機(jī)的全屏，而是占用body內(nèi)的視窗范圍之內(nèi))

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

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

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

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

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

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

安卓監(jiān)聽進(jìn)入全屏的事件：

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

IOS監(jiān)聽進(jìn)入全屏的事件：

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

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

監(jiān)聽暫停事件

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

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

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

上面的說法我并沒有真正核實(shí)過，不過可以使用css進(jìn)行操作，我實(shí)現(xiàn)的方式是在video外層套一個(gè)div,height設(shè)置為100%并且設(shè)置overflow:hidden,video大于100%，就能把控制條頂?shù)揭暣巴狻＿@算是視覺的隱藏(驚喜萬分~)，這個(gè)時(shí)候?qū)τ趘ideo可能會(huì)造成放大，視頻要留有一定的安全區(qū)，防止遮擋主體內(nèi)容。對(duì)于用戶體驗(yàn)來說，長視頻沒有控制欄還是挺不合適的，當(dāng)然這個(gè)只是一個(gè)思路，具體的情況還是看產(chǎn)品的形式適合哪種。

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

解決方案：

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

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

var cut = function() {
  // 1. 創(chuàng)建畫布
  let canvas = document.createElement("canvas");
  canvas.width = video.videoWidth * scale;
  // 2. 設(shè)定寬高比
  canvas.height = video.videoHeight * scale;
  // 3. 將視頻此刻幀數(shù)畫入畫布
  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);//在視頻幀數(shù)已加載時(shí)執(zhí)行截取

現(xiàn)象描述：第一次播放視頻ok,但是在IOS12.*以下的機(jī)型，再次播放視頻會(huì)出現(xiàn)黑屏的現(xiàn)象。檢查代碼發(fā)現(xiàn)，video使用了v-show,關(guān)閉之后，對(duì)應(yīng)的方法執(zhí)行，但是只有聲音沒有圖像，為啥？？？

解決方案：

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

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

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

代碼片1：

  


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

代碼片2：
 

  

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

首先判斷設(shè)備是安卓還是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)
  }
}

總結(jié)上面的問題，發(fā)現(xiàn)正是的場景下不同設(shè)備的手機(jī)兼容情況還是真的不一樣的，我們針對(duì)特定的情況考慮一個(gè)合適的兜底方案即可，盡量使用最保險(xiǎn)的做法，畢竟上線盡量保證沒有bug才是極好的。

當(dāng)使用video進(jìn)行視頻播放，相對(duì)于早期來說，現(xiàn)在手機(jī)的性能越來越好，流量時(shí)代也要迎來5G,會(huì)越來越放寬限制，現(xiàn)在表現(xiàn)雖然不太一樣，但是未來還是會(huì)走向統(tǒng)一的。

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