騰訊技術指南:H5同層播放器接入規範
(提示:該指南只適用騰訊系產品)
H5同層播放器接入規範
x5-video-player-type 啟用H5同層播放器
通過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/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"/>
跟隨手機自動旋轉
<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類似
使用同層播放器的一些建議
1. 監聽resize 事件實現自適應視口大小變化,視訊播放時會調整視口大小
2. 在視訊播放期間的互動,彈框,字幕在視訊視訊區域中,不要在視訊區域外
3. 對於直播類全屏視訊,最好不要在最頂部放互動性元素
互動性視訊實現建議
允許視訊區域(video元素)之上的操作
1. 對於需要全屏互動的,可以將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/qqbrowser/js/testx5videoplayertype.html
置頂:
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