微信中H5同层Video播放器接入教程
微信中H5同層Video播放器接入教程
x5-video-player-type 啟用Ｈ5同層播放器
通過(guò)video屬性“x5-video-player-type”聲明啟用同層H5播放器
x5-video-player-type支持的值類型：h5
示例：
<video src="http://xxx.mp4" x5-video-player-type="h5"/>注： 這個(gè)屬性需要在播放前設(shè)置好，播放之后設(shè)置無(wú)效，下面的’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è)面自己重新適配新的視口大小變化。可以通過(guò)監(jiān)聽(tīng)resize 事件來(lái)實(shí)現(xiàn)
<video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>需要監(jiān)聽(tīng)窗口大小變化(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=”h5” x5-video-orientation="landscape"/>豎屏
<video ... x5-video-player-type="h5" x5-video-orientation="portrait"/>跟隨手機(jī)自動(dòng)旋轉(zhuǎn)
<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>注: 此屬性只在聲明了x5-video-player-type=”h5”情況下生效
事件回調(diào)
x5videoenterfullscreen進(jìn)入全屏通知
支持版本: TBS中從>=036900開(kāi)始支持，QB中是>=7.2開(kāi)始支持
x5videoenterfullscreen: 表示播放器進(jìn)入全屏狀態(tài)
示例：
<video id=“myVideo".../>通過(guò)JS監(jiān)聽(tīng)事件
myVideo.addEventListener("x5videoenterfullscreen", function(){alert("player enterfullscreen");})x5videoexitfullscreen退出全屏通知
x5videoexitfullscreen: 表示播放器退出了全屏狀態(tài)
使用方法與x5videoenterfullscreen類似
使用同層播放器的一些建議
交互性視頻實(shí)現(xiàn)建議
允許視頻區(qū)域(video元素)之上的操作
同層播放器支持版本
TBS微信:
TBS內(nèi)核>=036849 后開(kāi)始支持
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ū)域的居中顯示，可以通過(guò)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ǐng)使用微信掃描以下二維碼，掃描后將會(huì)自動(dòng)進(jìn)行安裝，無(wú)需其他操作。
Q: 如果要在QQ瀏覽器里測(cè)試，如何安裝新版本QQ瀏覽器
Q：如何測(cè)試效果，確定進(jìn)入了同層播放器？
A：安裝新的tbs版本后，如果要測(cè)試效果，請(qǐng)殺掉微信進(jìn)程，把系統(tǒng)時(shí)間往后調(diào)一天以上，再進(jìn)入網(wǎng)頁(yè)進(jìn)行視頻播放，如果微信的頂bar消失，進(jìn)入了一個(gè)沉浸式的播放器，則是進(jìn)了同層播放器。
Q：如何查看當(dāng)前的的tbs版本？
A：在微信聊天窗口輸入//gettbs 并發(fā)送，查看彈出的Toast上顯示的tbsCoreVersion 是否等于36849 ，若是則tbs版本正確。注：這是之后進(jìn)行測(cè)試的基礎(chǔ)，這個(gè)版本一定要正確
Q：接入了同層播放器，在老版本的tbs是否會(huì)出問(wèn)題？
A：對(duì)老版本不會(huì)產(chǎn)生影響。
Q：同層播放器在iOS上會(huì)生效嗎？
A：目前的同層播放器只在Android（包括微信）上生效，暫時(shí)不支持iOS
Q：同層播放器頂部”<”和“…”按鈕可以去掉嗎？
A：不能
Q: 在微信TBS里如何區(qū)是否支持同層播放器
A: a)在微信等TBS里通過(guò)UA判斷X5內(nèi)核版本來(lái)區(qū)分,當(dāng)版版本號(hào)>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版本中,當(dāng)瀏覽器版本>=7.1時(shí)開(kāi)始支持
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
總結(jié)
以上是生活随笔為你收集整理的微信中H5同层Video播放器接入教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Python之IO模型
- 下一篇： hdu 2433 Travel