最近要被微信瀏覽器搞炸了，在app內(nèi)的頁面使用視頻播放沒問題，放到微信內(nèi)視頻播放就會自動全屏，很難受，多方查證下，發(fā)現(xiàn)可以設(shè)置video屬性“x5-video-player-type”聲明啟用同層H5播放器

    <video
      loop
      playsinline="true"
      webkit-playsinline="true"
      x-webkit-airplay="allow"
      airplay="allow"
      autoplay
      x5-video-player-type="h5"
      x5-video-player-fullscreen="false"
      x5-video-orientation="portrait"
    ></video>

x5-video-player-fullscreen全屏方式
視頻播放時將會進入到全屏模式

如果不申明此屬性，頁面得到視口區(qū)域為原始視口大小(視頻未播放前)，比如在微信里，會有一個常駐的標題欄，如果不聲明此屬性，這個標題欄高度不會給頁面，播放時會平均分為兩塊（上下黑塊）

注： 聲明此屬性，需要頁面自己重新適配新的視口大小變化。可以通過監(jiān)聽resize 事件來實現(xiàn)

<video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>

需要監(jiān)聽窗口大小變化(resize)實現(xiàn)全屏

window.onresize = function(){

  test_video.style.width = window.innerWidth + "px";

  test_video.style.height = window.innerHeight + "px";

}

注: : 1. 為了讓視頻真正鋪滿全屏,可以適當讓video的顯示區(qū)域大于視口區(qū)域,這樣在顯示時在視口外的部截掉后,不會出四周黑邊的情況

x5-video-orientation 控制橫豎屏

功能：聲明播放器支持的方向

可選值： landscape 橫屏, portraint豎屏

默認值：portraint

e.g: http://res.imtt.qq.com/qqbrowser/js/test_video_orientation_attr.html

橫屏

<video ... x5-video-player-type=”h5” x5-video-orientation="landscape"/>

豎屏

<video ... x5-video-player-type="h5" x5-video-orientation="portrait"/>

跟隨手機自動旋轉(zhuǎn)

<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>

注: 此屬性只在聲明了x5-video-player-type=”h5”情況下生效

事件回調(diào)

x5videoenterfullscreen進入全屏通知

支持版本: TBS中從>=036900開始支持，QB中是>=7.2開始支持

x5videoenterfullscreen: 表示播放器進入全屏狀態(tài)

示例：

<video id=“myVideo".../>

通過JS監(jiān)聽事件

myVideo.addEventListener("x5videoenterfullscreen", function(){

  alert("player enterfullscreen");

})

x5videoexitfullscreen退出全屏通知

x5videoexitfullscreen: 表示播放器退出了全屏狀態(tài)

使用方法與x5videoenterfullscreen類似