微信中H5同層Video播放器接入教程

x5-video-player-type 啟用Ｈ5同層播放器

通過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’也是一樣

x5-video-player-fullscreen全屏方式

視頻播放時將會進入到全屏模式

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

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

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

需要監聽窗口大小變化(resize)實現全屏

window.onresize = function(){test_video.style.width = window.innerWidth + "px";test_video.style.height = window.innerHeight + "px";}

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

x5-video-orientation 控制橫豎屏

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

可選值： landscape 橫屏, portraint豎屏

默認值：portraint

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

橫屏

<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”情況下生效

事件回調

x5videoenterfullscreen進入全屏通知

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

x5videoenterfullscreen: 表示播放器進入全屏狀態

示例：

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

通過JS監聽事件

myVideo.addEventListener("x5videoenterfullscreen", function(){alert("player enterfullscreen");})

x5videoexitfullscreen退出全屏通知

x5videoexitfullscreen: 表示播放器退出了全屏狀態

使用方法與x5videoenterfullscreen類似

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

監聽resize 事件實現自適應視口大小變化，視頻播放時會調整視口大小

在視頻播放期間的交互，彈框，字幕在視頻視頻區域中，不要在視頻區域外

對于直播類全屏視頻，最好不要在最頂部放交互性元素

交互性視頻實現建議

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

對于需要全屏交互的,可以將video區域設置為視口大小>

同層播放器支持版本

TBS微信:

TBS內核>=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內核>= 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

視頻顯示位置控制

默認視頻在指定區域的居中顯示，可以通過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"

效果：

Q&A

Q：如何安裝新版tbs？

A：請使用微信掃描以下二維碼，掃描后將會自動進行安裝，無需其他操作。

Q: 如果要在QQ瀏覽器里測試，如何安裝新版本QQ瀏覽器

Q：如何測試效果，確定進入了同層播放器？

A：安裝新的tbs版本后，如果要測試效果，請殺掉微信進程，把系統時間往后調一天以上，再進入網頁進行視頻播放，如果微信的頂bar消失，進入了一個沉浸式的播放器，則是進了同層播放器。

Q：如何查看當前的的tbs版本？

A：在微信聊天窗口輸入//gettbs 并發送，查看彈出的Toast上顯示的tbsCoreVersion 是否等于36849 ，若是則tbs版本正確。注：這是之后進行測試的基礎，這個版本一定要正確

Q：接入了同層播放器，在老版本的tbs是否會出問題？

A：對老版本不會產生影響。

Q：同層播放器在iOS上會生效嗎？

A：目前的同層播放器只在Android（包括微信）上生效，暫時不支持iOS

Q：同層播放器頂部”<”和“…”按鈕可以去掉嗎？

A：不能

Q: 在微信TBS里如何區是否支持同層播放器

A: a)在微信等TBS里通過UA判斷X5內核版本來區分,當版版本號>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

b)在QQ瀏覽器Android版本中,當瀏覽器版本>=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

總結

以上是生活随笔為你收集整理的微信中H5同层Video播放器接入教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。