騰訊技術指南：H5同層播放器接入規範
（提示：該指南只適用騰訊系產品）
H5同層播放器接入規範
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/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