怎么使用H5同層Video播放器接入

怎么使用H5同層Video播放器接入？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

示例：

<video src="http://xxx.mp4" x5-video-player-type="h6"/>

注： 這個(gè)屬性需要在播放前設(shè)置好，播放之后設(shè)置無效，下面的’x5-video-player-fullscreen’也是一樣

x5-video-player-fullscreen全屏方式

視頻播放時(shí)將會(huì)進(jìn)入到全屏模式

如果不申明此屬性，頁(yè)面得到視口區(qū)域?yàn)樵家暱诖笮?視頻未播放前)，比如在微信里，會(huì)有一個(gè)常駐的標(biāo)題欄，如果不聲明此屬性，這個(gè)標(biāo)題欄高度不會(huì)給頁(yè)面，播放時(shí)會(huì)平均分為兩塊（上下黑塊）

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

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

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

window.onresize = function(){

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

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

}

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

x5-video-orientation 控制橫豎屏

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

可選值： landscape 橫屏, portraint豎屏

默認(rèn)值：portraint

e.g: http://res.imtt.qq.com/qqbrow...

橫屏

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

豎屏

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

跟隨手機(jī)自動(dòng)旋轉(zhuǎn)

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

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

事件回調(diào)

x5videoenterfullscreen進(jìn)入全屏通知

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

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

示例：

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

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

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

  alert("player enterfullscreen");

})

x5videoexitfullscreen退出全屏通知

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

使用方法與x5videoenterfullscreen類似

使用同層播放器的一些建議

1. 監(jiān)聽resize 事件實(shí)現(xiàn)自適應(yīng)視口大小變化，視頻播放時(shí)會(huì)調(diào)整視口大小

2. 在視頻播放期間的交互，彈框，字幕在視頻視頻區(qū)域中，不要在視頻區(qū)域外

3. 對(duì)于直播類全屏視頻，最好不要在最頂部放交互性元素

交互性視頻實(shí)現(xiàn)建議

允許視頻區(qū)域(video元素)之上的操作

1. 對(duì)于需要全屏交互的,可以將video區(qū)域設(shè)置為視口大小>

同層播放器支持版本

TBS微信:

TBS內(nèi)核>=036849 后開始支持

UA示例：

Mozilla/5.0 (Linux? Android 4.4.4? OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML,like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.8 TBS/036849 Safari/537.36 MicroMessenger/6.3.27.861 NetType/WIFI Language/zh_CN

TBS手Q:

TBS內(nèi)核>= 036855

Android QQ瀏覽器：

瀏覽器版本>=7.1

UA示例：

UserAgent: Mozilla/5.0 (Linux? U? Android 4.4.4? zhcn? OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36

視頻顯示位置控制

默認(rèn)視頻在指定區(qū)域的居中顯示，可以通過css object-position 屬性控制視頻(左上角) 顯示位置

示例: http://res.imtt.qq.com/qqbrow...

置頂：

myVideo.style["object-position"]= "0px 0px"

效果圖：

底部顯示：

var offsetY = myVideo.clientHeight - (myVideo.clientWidth * myVideo.videoHeight / myVideo.videoWidth)

myVideo.style["object-position"]= "0px " + offsetY + "px"

效果：

關(guān)于怎么使用H5同層Video播放器接入問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。