H5視訊播放器特性

Jerry_Zeng發表於2019-04-30
原文網址 : http://juejin.im/post/5cc7e8b6f265da03a00fdd5c
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也是一樣

  1. 通過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")
})
複製程式碼
  1. 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)
        }
    }
複製程式碼

相關文章