神經病啊！——微信同層播放器接(踩)入(坑)總結

時間 2019-11-05

標籤神經病微信播放總結简体版

原文原文鏈接

估計踩過微信視頻這個坑的，心裏都想說上一句：javascript

「神經病啊！」css

而微信也終於出了個《H5同層播放器接入規範》，算是正常點了……好了閒話不說，下邊進入正題：html

1. `<video>`標籤裏的內聯播放相關屬性

微信在video標籤上新增了一些x5的私有屬性，分別是：java

x5-video-player-type
啓用同層播放。取值固定爲'h5'。css3
x5-video-player-fullscreen
是否全屏。取值爲'true'或'false'。web
x5-video-orientation
視頻方向。取值分別爲'landscape'、'portrait'或者'landscape|portrait'，分別對應橫屏、豎屏及自動旋轉（這個應該用的少）。瀏覽器

不過有一點須要注意的是，這些都是x5的私有屬性，僅適用於Android平臺。而跟iOS平臺相關的，則是這幾個屬性：微信

airplayapp
x-webkit-airplayide
playsinline
webkit-playsinline

其中最後兩個是iOS平臺下的內聯播放屬性，都是布爾屬性，不須要賦值（存在便是true）；前兩個是iOS平臺下airplay的相關屬性（說實話我如今也沒搞明白爲何網頁須要airplay屬性），取值爲'allow'或'deny'，一般保險起見用'allow'就能夠。

2. CSS的屬性選擇及取值

微信在同層接入規範中提到了object-position這個屬性，用於設置視頻出現的位置。實際在嘗試的過程當中，搭配object-fit屬性同時使用的效果會比較好。但這兩個屬性並非x5私有屬性，而是原生的，因此它們同時適用於Android和iOS兩個平臺。

object-position和object-fit這兩個元素主要的做用是爲「可替換元素」設置位置和大小。這裏的「可替換元素」，指的是內容不受CSS顯式控制的元素，好比比較典型的就是<img>、<object>、<video>和表單元素等。

說回視頻播放。微信官方的同層接入規範中推薦的作法，是用js動態計算須要的像素值，而後給object-position屬性賦值。而我本身嘗試了一圈下來，發現object-position這個屬性自己支持百分比取值，一般視頻默認的值是'50% 50%'，也就是居中；全屏視頻通常狀況下須要貼底放，因此要把取值改爲'0 100%'。

另外一個屬性object-fit，有點相似background-size屬性，用來設置視頻在容器內的填充方式，平時用只須要取值'contain'（保持寬高比填滿容器）就能夠了。不過這裏須要留意的是，全屏下，因爲視頻通常都不會正好填滿屏幕（寬高比差別以及輸出分辨率沒算頂部標題欄），會在頂部留下一條空隙。這條空隙一般是默認黑色的，若是須要更改顏色，首先要加上個'display:block;'（由於video默認是inline的），而後直接改background-color就OK~

3. 視頻封面

<video>標籤裏有一個與視頻封面相關的屬性poster，可是在使用中發現性能存在一些問題，在Android端打開視頻時（加載），會有跳動的感受，可是若是去掉，在視頻加載時（preload取值'auto'，且未用預加載）則會顯示空白頁面。目前換用了背景圖片的方式，但因爲視頻全屏播放時頂部會有空隙，因此額外加了個background-position: bottom;以及background-size: contain;（取值和視頻保持一致），這樣設置好的背景在播放視頻時就不會漏邊了。

4. 設置視頻視口大小

同層接入規範裏推薦在resize事件回調裏設置視頻視口大小，我習慣直接設置<video>標籤的width和height，因此在resize回調里加入：

$('video')
        .attr({
            'width': window.innerWidth + 'px',
            'height': window.innerHeight + 'px'
        });

就能夠了。

5. UA特性探測

同層接入規範裏給的，判斷是不是同層播放器方法：

在微信等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
在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

參考資料：