H5視頻播放器特性

微信瀏覽器全屏播放，官方稱爲（Ｈ5同層播放器）

---

1. 經過video屬性x5-video-player-type聲明啓用同層H5播放器 x5-video-player-type支持的值類型：h5

<video src="http://xxx.mp4" x5-video-player-type="h5"/>
複製代碼

注：這個屬性須要在播放前設置好，播放以後設置無效，下面的x5-video-player-fullscreen也是同樣

2. 經過video屬性x5-video-player-fullscreen聲明啓用全屏播放x5-video-player-fullscreen支持的值類型：true

<video id="test_video" src="http://xxx.mp4" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>
複製代碼

x5-video-orientation 控制橫豎屏

---

• 功能：聲明播放器支持的方向
• 可選值： landscape 橫屏, portraint豎屏
• 默認值：portraint

橫屏

<video x5-video-player-type=」h5」 x5-video-orientation="landscape"/>
複製代碼

豎屏

<video x5-video-player-type="h5" x5-video-orientation="portrait"/>
複製代碼

跟隨手機自動旋轉

<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>
複製代碼

注: 此屬性只在聲明瞭x5-video-player-type="h5"狀況下生效

事件回調

---

1. x5videoenterfullscreen進入全屏通知

myVideo.addEventListener("x5videoenterfullscreen", function(){
    alert("player enterfullscreen")
})
複製代碼

2. x5videoexitfullscreen退出全屏通知

myVideo.addEventListener("x5videoexitfullscreen", function(){
    alert("player exitfullscreen")
})
複製代碼

視頻顯示位置控制

---

默認視頻在指定區域的居中顯示，能夠經過css object-position 屬性控制視頻(左上角) 顯示位置

置頂顯示：

myVideo.style["object-position"]= "0px 0px"
複製代碼

底部顯示：

var offsetY = myVideo.clientHeight - (myVideo.clientWidth * myVideo.videoHeight / myVideo.videoWidth)
myVideo.style["object-position"]= "0px " + offsetY + "px"
複製代碼

控制視頻填充容器的樣式 object-fit

---

• fill： 中文釋義「填充」。默認值。替換內容拉伸填滿整個content box, 不保證保持原有的比例。

---

• contain： 中文釋義「包含」。保持原有尺寸比例。保證替換內容尺寸必定能夠在容器裏面放得下。所以，此參數可能會在容器內留下空白。

---

• cover： 中文釋義「覆蓋」。保持原有尺寸比例。保證替換內容尺寸必定大於容器尺寸，寬度和高度至少有一個和容器一致。所以，此參數可能會讓替換內容（如圖片）部分區域不可見。

---

• none： 中文釋義「無」。保持原有尺寸比例。同時保持替換內容原始尺寸大小。

---

• scale-down： 中文釋義「下降」。就好像依次設置了none或contain, 最終呈現的是尺寸比較小的那個。

---

video標籤常見問題實踐總結

---

webkit-playsinline 內聯播放

IOS微信瀏覽器	IOS Safari瀏覽器	Android微信瀏覽器	Android Chrome瀏覽器
支持	支持	支持	支持

webkit-playsinline 內聯隱藏工具條

IOS微信瀏覽器	IOS Safari瀏覽器	Android微信瀏覽器	Android Chrome瀏覽器
支持	支持	不支持	不支持

全屏播放視頻上浮DOM元素

IOS微信瀏覽器	IOS Safari瀏覽器	Android微信瀏覽器	Android Chrome瀏覽器
支持	支持	支持	不支持

內聯播放視頻上浮DOM元素

IOS微信瀏覽器	IOS Safari瀏覽器	Android微信瀏覽器	Android Chrome瀏覽器
支持	支持	不支持	不支持

橫屏狀態下全屏播上浮DOM

IOS微信瀏覽器	IOS Safari瀏覽器	Android微信瀏覽器	Android Chrome瀏覽器
支持	支持	支持	支持

微信瀏覽器自動播放

IOS微信瀏覽器	IOS Safari瀏覽器	Android微信瀏覽器	Android Chrome瀏覽器
支持	支持	不支持	不支持

自動播放，只能調用X5內核WeixinJSBridgeReady API,關於這個API的詳細說明，請參考微信公衆平臺開發者中心的接口文檔。

代碼以下：

if (typeof WeixinJSBridgeReady === 'undefined') {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', function() {
            video.play()
            }, false)
        }
    }
複製代碼