寫在最前面
手機(jī)Web瀏覽器上播放視頻實(shí)在是令人煩躁的問題欢顷。筆者一直從事微信端H5頁面的制作劝堪，但即便如此，每次碰到視頻項(xiàng)目弹囚，總需要花費(fèi)很多時(shí)間在和用戶商量處理視頻的問題上厨相。因?yàn)?code>android，ios系統(tǒng)間的差異，不同android設(shè)備間的差異领铐，屏幕分辨率差異，導(dǎo)致想讓視頻在所有設(shè)備上具有相同的播放效果總是很有難度宋舷。即使筆者自己绪撵，也腦子里一團(tuán)亂，很難說清楚視頻處理上祝蝠，到底有多少條條框框音诈。所以，產(chǎn)生了整理視頻播放的念頭绎狭。說不清细溅，道不明的問題，現(xiàn)在理不清楚沒關(guān)系儡嘶，記錄盡量多的實(shí)驗(yàn)結(jié)果喇聊，不斷的嘗試總結(jié)，最后總會有一個(gè)越來越接近真相蹦狂，越來越簡明的答案誓篱。
1. 準(zhǔn)備工作
測試流程比較簡單，比如：準(zhǔn)備一些手機(jī)凯楔，都訪問同一個(gè)視頻播放url地址窜骄，分別記錄下這個(gè)過程中視頻出現(xiàn)的種種現(xiàn)象。
為了保證測試結(jié)果盡量穩(wěn)定可信摆屯，應(yīng)該盡量控制測試的變量邻遏，使測試的結(jié)果更加容易復(fù)現(xiàn)出來。
1.1 測試結(jié)果說明
從視頻播放結(jié)果出發(fā)虐骑，總結(jié)了下面幾點(diǎn)測試要求准验。這幾乎是每次和客戶商量的過程中，或早或晚都需要涉及到的內(nèi)容廷没。也就是不論測試內(nèi)容是什么沟娱，都要在測試結(jié)果中描述到的場景：
- 是否可以自動播放視頻
- 不同尺寸的視頻，在全屏播放時(shí)腕柜，手機(jī)屏幕是否旋轉(zhuǎn)
- 視頻播放完成后济似，是否會出現(xiàn)廣告
- 檢查視頻是否出現(xiàn)進(jìn)度條
將上面提到的場景，再結(jié)合視頻播放的幾個(gè)大狀態(tài)：未播放盏缤，播放中砰蠢，播放完，分別細(xì)化到測試結(jié)果中去唉铜。
上述這些場景台舱，隨著測試越來越深入，會逐漸添加新的場景
1.2 測試設(shè)備說明
收集多收集一些穩(wěn)定版本的手機(jī)測試
| 手機(jī)型號 | 系統(tǒng) | 版本 |
|---|---|---|
| 小米mix2 | MIUI 10 8.9.6 | Android 8.0.0 |
| iphone6s | ios 11.4.1(15G77) | |
| iphone6s | ios 11.4.1(15G77) | |
| iphone6s | ios 12.0.1(16A366) | |
| iphoneX | ios 11.4.1(15G77) | |
| 魅藍(lán)E2 | Flyme6.3.0.2A | Android 6.0.1 |
| 小米5s | MIUI 9.6 | Android 7.0 |
| 華為 榮耀V8 | EMUI 8.0.0 | Android 8.0.0 |
1.3 基礎(chǔ)代碼
所有
video標(biāo)簽都由此擴(kuò)展
<video src="xxx" poster="xxx.png" controls></video>
1.4 h5打開時(shí)說明
- 手機(jī)統(tǒng)一豎置
- wifi優(yōu)先
2. 本次測試場景
手機(jī)默認(rèn)瀏覽器，最原始標(biāo)簽竞惋，不自動播放柜去，視頻本身為橫屏
要把視頻問題測清楚，首先肯定要把手機(jī)默認(rèn)瀏覽器過一遍拆宛。因?yàn)檫@才是最接近原生的形態(tài)嗓奢，測試完這個(gè)之后，再考慮哪些特殊的內(nèi)核瀏覽器中浑厚，比如微信股耽，釘釘，手機(jī)淘寶等等钳幅。
2.1 一些已知的手機(jī)默認(rèn)瀏覽器的限制
- 打開頁面后物蝙，不能進(jìn)行自動播放，必須手動點(diǎn)擊頁面（可以不是視頻本身敢艰，其他按鈕也可以）才能播放
- ios播放時(shí)诬乞，視頻會自動全屏
- android播放時(shí)，根據(jù)手機(jī)機(jī)型不同略有差異钠导，大多數(shù)都會保持其設(shè)定的css樣式丽惭，但偶有出現(xiàn)自動全屏這樣的情況
2.2 測試鏈接
- 橫版視頻
<video
id="media"
src="http://alicdn.herdsric.com/video-demo/vh.mp4"
poster="http://alicdn.herdsric.com/video-demo/vh-cover.png"
controls>
</video>
2.3 測試預(yù)期
| 預(yù)期序號 | 未播放預(yù)期內(nèi)容 | 播放中預(yù)期內(nèi)容 | 播放完成預(yù)期內(nèi)容 |
|---|---|---|---|
| 1 | 視頻封面poster能顯示，樣式完全按照css設(shè)定展示辈双，拉伸 | 有進(jìn)度條 | 有進(jìn)度條 |
| 2 | <video>樣式完全按照css設(shè)定展示 | 視頻不會自動全屏 | 非全屏狀態(tài)下责掏，播放完成后，沒有廣告 |
| 3 | 沒有進(jìn)度條湃望，視頻中間一個(gè)大大的播放按鈕 | 視頻按照指定的css樣式播放换衬，視頻保持原有比例，多余的地方會有黑邊覆蓋 | 全屏狀態(tài)下证芭，播放完成后瞳浦，沒有廣告 |
| 4 | 視頻不自動播放 | 視頻進(jìn)入全屏后，視頻不會旋轉(zhuǎn)废士，橫版的視頻橫向撐滿屏幕叫潦，上下兩邊留黑 | 停留在最后一幀 |
3. 測試結(jié)果匯總
| 手機(jī) | 系統(tǒng) | 版本 | 未播放 | 備注 | 播放中 | 備注 | 播放完 | 備注 |
|---|---|---|---|---|---|---|---|---|
| 小米mix2 | MIUI 10 8.9.6 | Android 8.0.0 | 滿足預(yù)期 | 不滿足4 | 4：當(dāng)點(diǎn)擊全屏按鈕后，視頻會自動橫屏播放官硝，此時(shí)高度撐滿矗蕊，寬度左右留有黑邊，應(yīng)該是contain的模式 | 滿足預(yù)期 | ||
| iphone6s | ios 11.4.1(15G77) | 滿足預(yù)期 | 不滿足2氢架，3 | 2：視頻會自動全屏播放3：視頻只能全屏傻咖，不能按指定尺寸播放，寬度撐滿屏幕岖研，視頻比例不變 | 滿足預(yù)期 | |||
| iphone6s | ios 12.0.1(16A366) | 滿足預(yù)期 | 不滿足2卿操，3 | 2：視頻會自動全屏播放3：視頻只能全屏，不能按指定尺寸播放，寬度撐滿屏幕害淤，視頻比例不變 | 滿足預(yù)期 | |||
| iphone7 | ios 11.4.1(15G77) | 滿足預(yù)期 | 不滿足2扇雕，3 | 2：視頻會自動全屏播放3：視頻只能全屏，不能按指定尺寸播放窥摄，寬度撐滿屏幕镶奉，視頻比例不變 | 滿足預(yù)期 | |||
| iphoneX | ios 11.4.1(15G77) | 滿足預(yù)期 | 不滿足2，3 | 2：視頻會自動全屏播放3：視頻只能全屏溪王，不能按指定尺寸播放腮鞍，寬度撐滿屏幕值骇，視頻比例不變 | 滿足預(yù)期 | |||
| 魅藍(lán)E2 | Flyme6.3.0.2A | Android 6.0.1 | 滿足預(yù)期 | 不滿足4 | 4：當(dāng)點(diǎn)擊全屏按鈕后莹菱，視頻會自動橫屏播放，此時(shí)高度撐滿吱瘩，寬度左右留有黑邊道伟，應(yīng)該是contain的模式;魅族瀏覽器無法播放：無法播放MOV格式的視頻" | 滿足預(yù)期 | ||
| 小米5s | MIUI 9.6 | Android 7.0 | 滿足預(yù)期 | 不滿足4 | 4：當(dāng)點(diǎn)擊全屏按鈕后，視頻會自動橫屏播放使碾，此時(shí)高度撐滿蜜徽，寬度左右留有黑邊，應(yīng)該是contain的模式 | 滿足預(yù)期 | ||
| 華為 | 榮耀V8 EMUI 8.0.0 | Android 8.0.0 | 滿足預(yù)期 | 不滿足4 | 4：當(dāng)點(diǎn)擊全屏按鈕后票摇，視頻會自動橫屏播放拘鞋，此時(shí)高度撐滿，寬度左右留有黑邊矢门，應(yīng)該是contain的模式 | 不滿足1,2,3 | 播放完成后盆色，會在最后一幀短暫停留，然后蓋上一頁黑色底色的廣告頁1：黑色廣告頁覆蓋了進(jìn)度條;2：非全屏后有廣告;3：全屏后有廣告; |
4. 測試結(jié)論
經(jīng)過以上測試祟剔，大致上隔躲，看到了兩個(gè)系統(tǒng)間有不同的地方，總結(jié)如下：
- 在未播放和播放完這兩個(gè)狀態(tài)中物延，
ios和android結(jié)果都比較一致宣旱，比如：
- 未播放時(shí)，所有手機(jī)都滿足預(yù)期的結(jié)果叛薯，即不自動播放浑吟，樣式可控
- 播放完后，幾乎所有手機(jī)都滿足預(yù)期耗溜，只有華為手機(jī)出現(xiàn)了廣告的現(xiàn)象买置。
- 在播放時(shí)狀態(tài)中，兩系統(tǒng)差異比較明顯强霎，比如：
-
ios會統(tǒng)一自動全屏播放忿项，且只能在全屏下播放（回到原始尺寸就暫停） -
android不會自動進(jìn)去全屏，同時(shí)樣式上采用黑邊填充，視頻本身不會拉伸轩触，但進(jìn)入全屏后寞酿，一定會橫屏播放，導(dǎo)致用戶必須手機(jī)旋轉(zhuǎn)到橫屏下觀看脱柱，此時(shí)視頻高度撐滿伐弹，寬度左右留有黑邊。
- 多個(gè)手機(jī)同一個(gè)系統(tǒng)的榨为，
ios的結(jié)果很一致惨好，android則有差異，比如：
- 同是
ios的手機(jī)随闺，所有測試情況都是一致的 - 華為日川，在播放最后，出現(xiàn)了廣告
- 魅族矩乐，
mov格式無法播放（原先測試?yán)锸褂玫氖?code>mov格式龄句，當(dāng)魅族不能播放后，統(tǒng)一改成了mp4）
