video移動端兼容問題

video在各版本ios和安卓上面表現形式都有所區別，為了解決這一問題我在網上找了許多方法，也親自嘗試了一些。

這里，提供一個簡單而又能解決大部分移動端兼容的方式：

 

給video加上 webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow"

<video id="mpVideo" width="100%" height="100%" webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow"
    src="{{{data.src}}}" controls="controls" preload="auto" poster="">
    您的手機不支持該視頻文件！！！
</video>

 

1.  webkit-playsinline和playsinline   

這個屬性作用是讓視頻播放時局域播放（不全屏，在原有位置上播放），不脫離文檔流 。

但這個屬性需要嵌入網頁的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。

換句話說，安卓不支持，而IOS的wechat卻支持，因為APP不支持playsinline，所以安卓是默認全屏播放的。

2.  x5-playsinline=""　

在X5內核中讓video標簽播放不自動全屏，這也是解決大部分安卓手機兼容問題的核心代碼。

3.  x-webkit-airplay="true" 　

把當前的視頻投放到其他支持此技術的設備上。

4.  x5-video-player-type='h5'

啟用同層H5播放器，學名叫沉浸式播放。播放的時候除去了control和微信的導航欄，只留下"X"和"<"兩鍵，目前的同層播放器只在Android（包括微信）上生效，暫時不支持iOS。

至於為什么同層播放只對安卓開放，是因為安卓不能像ISO一樣局域播放，默認的全屏會使得一些界面操作被阻攔，如果是全屏H5還好，但是做直播的話，諸如彈幕那樣的功能就無法實現了，所以這時候同層播放的概念就解決了這個問題。

不過在測試的過程中發現，不同版本的ISO和安卓效果略有不同。

5.  video加上object-fit: fill;

style屬性：解決Android的微信里面出現上下有黑邊，不能全屏的問題。

6.  WeixinJSBridgeRead和wx.ready

微信瀏覽器下實現自動播放：   

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

 

說道這里稍微詳細的說下h5的自動播放

目前而言h5完全實現自動播放，只有在ios11及以上版本才是支持的，部分安卓可以通過觸摸的方式來實現半自動播放，而更多的安卓和ios更需要的是點擊某一區域的交互方式來實現所謂的自動播放

出於點擊才能觸發的原因，大部分實現安卓半自動播放的交互都是進入頁面彈出友好提示彈框提醒用戶WiFi環境播放之類的，讓用戶點擊確認按鈕觸發播放

如果微信jsapi完成了config配置，你可能會用到以下代碼：

html：

<div style="width: 100%; height: 100%;" {{{if !data.src}}} class="no-resources" {{{else if !!data.src}}} class="video-box" {{{/if}}}>
  <video id="mpVideo" width="100%" height="100%" webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow"
    src="{{{data.src}}}" controls="controls" preload="auto" poster="" data-autoplay="{{{data.autoplay}}}">
    您的手機不支持該視頻文件！！！
  </video>
</div>

 

if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
  _video[0].play();
} else {
  if (document.addEventListener) {
    document.addEventListener("WeixinJSBridgeReady", function() {
      _video[0].play();
    }, false);
  } else if (document.attachEvent) {
    document.attachEvent("WeixinJSBridgeReady", function() {
      _video[0].play();
    });
    document.attachEvent("onWeixinJSBridgeReady", function() {
      _video[0].play();
    });
  }
}

var play = function () {
  console.log('touchstart-video')
  _video[0].play();
  document.removeEventListener('touchstart',play,false);
};
document.addEventListener('touchstart',play,false);

setTimeout(function () {
  try { _video[0].play(); } catch (err) { console.error(err) };
  if (window.wx) {
    // 兼容微信自動播放
    wx.ready(function () { _video[0].play(); });
  }
},500)

　　

這一塊還有許多知識沒能了解到，希望大家能留言備注，一起完善