寫在最前面
本文基于上一篇手機(jī)h5視頻測試：手機(jī)默認(rèn)瀏覽器1及其他幾篇后續(xù)測試，繼續(xù)測試手機(jī)默認(rèn)瀏覽器的場景橘券，這次主要測試內(nèi)容如下：
手機(jī)默認(rèn)瀏覽器播放豎版視頻
1. 準(zhǔn)備工作
略鼎姐，同手機(jī)h5視頻測試：手機(jī)默認(rèn)瀏覽器1
1.1 測試結(jié)果說明
略芍躏，同手機(jī)h5視頻測試：手機(jī)默認(rèn)瀏覽器1
1.2 測試設(shè)備說明
略，同手機(jī)h5視頻測試：手機(jī)默認(rèn)瀏覽器1
1.3 基礎(chǔ)代碼
所有
video標(biāo)簽都由此擴(kuò)展
<video src="xxx" poster="xxx.png" controls></video>
1.4 h5打開時說明
- 手機(jī)統(tǒng)一豎置
- wifi優(yōu)先
2. 本次測試場景
手機(jī)默認(rèn)瀏覽器毅舆，最原始標(biāo)簽值戳，自動播放议谷，視頻本身為豎屏
2.1 一些已知的手機(jī)默認(rèn)瀏覽器的限制
略，同手機(jī)h5視頻測試：手機(jī)默認(rèn)瀏覽器1
2.2 測試代碼&鏈接
http://dev.herdsric.com:215/video-native-v.html
- 豎版自動播放視頻代碼
<video
id="media"
src="xxx.mp4"
poster="xxx.png"
controls>
</video>
2.3 之前測試結(jié)果匯總
- 在未播放狀態(tài)中述寡，
ios和android關(guān)于自動播放區(qū)別明顯柿隙，比如：
- 所有手機(jī)都按
css樣式展示 -
android可以自動播放叶洞，ios不可以
- 在播放時狀態(tài)中鲫凶，兩系統(tǒng)差異比較明顯，比如：
-
ios會統(tǒng)一自動全屏播放衩辟，且只能在全屏下播放（回到原始尺寸就暫停） -
android不會自動進(jìn)去全屏螟炫，同時樣式上采用左右撐滿，上下留黑邊的方式艺晴，視頻本身保證原比例昼钻，并不會拉伸。一旦進(jìn)入全屏后封寞，一定會橫屏播放然评，導(dǎo)致用戶必須手機(jī)旋轉(zhuǎn)到橫屏下觀看，此時視頻高度撐滿狈究，寬度左右留有黑邊碗淌。
- 在播放完狀態(tài)中，
ios和android結(jié)果都比較一致，比如：
- 幾乎所有手機(jī)都滿足預(yù)期亿眠，只有華為手機(jī)出現(xiàn)了廣告的現(xiàn)象碎罚。
- 多個手機(jī)同一個系統(tǒng)的，
ios的結(jié)果很一致纳像，android則有差異荆烈，比如：
- 同是
ios的手機(jī)，所有測試情況都是一致的 - 華為竟趾，在播放最后憔购，出現(xiàn)了廣告
- 魅族，
mov格式無法播放（原先測試?yán)锸褂玫氖?code>mov格式潭兽，當(dāng)魅族不能播放后倦始，統(tǒng)一改成了mp4）
2.4 測試預(yù)期
將上一次測試的結(jié)果，導(dǎo)入到這次的預(yù)測里山卦，可以更突出這次的測試重點
| 預(yù)期序號 | 未播放預(yù)期內(nèi)容 | 播放中預(yù)期內(nèi)容 | 播放完成預(yù)期內(nèi)容 |
|---|---|---|---|
| 1 | 封面poster能顯示鞋邑，樣式完全按照css設(shè)定展示，拉伸 | 有進(jìn)度條 | 有進(jìn)度條 |
| 2 | 按照css樣式展示 |
android：不自動全屏 ios：自動且只能全屏账蓉，位于最頂層枚碗，看不到瀏覽器上方的網(wǎng)址 |
非全屏下，播放完成后铸本，沒有廣告 |
| 3 | 沒有進(jìn)度條肮雨，視頻中間一個大大的播放按鈕 | 非全屏下，按照css樣式播放箱玷，視頻保持原有比例（左右撐滿怨规，上下留黑） | 全屏下，播放完成后锡足，沒有廣告 |
| 4 | 全屏后波丰，android：視頻右轉(zhuǎn)90度，手機(jī)得橫著拿舶得，比例不變（上下?lián)螡M掰烟，左右留黑）ios：視頻不旋轉(zhuǎn)，比例不變（左右撐滿沐批，上下留黑） |
停留在最后一幀 | |
| 5 | 華為手機(jī)1纫骑，2，3都不滿足九孩，最后有廣告 |
關(guān)于測試預(yù)期的簡單說明：
- 豎屏場景的測試重點先馆，是播放時視頻是否拉伸或者旋轉(zhuǎn)，包括全屏?xí)r其自適應(yīng)的方法躺彬，按照上次橫屏全屏的經(jīng)驗煤墙，預(yù)測應(yīng)該是屏幕旋轉(zhuǎn)缤底，高度撐滿，左右留黑邊的樣式番捂。
- 盡量將所有手機(jī)已知的情況都寫到預(yù)期里个唧，避免測試結(jié)果匯總顯示效果不佳的情況
3. 測試結(jié)果匯總
| 手機(jī) | 系統(tǒng) | 原生 | 未播放 | 備注 | 播放中 | 備注 | 播放完 | 備注 |
|---|---|---|---|---|---|---|---|---|
| mi mix2 | MIUI 10 8.9.6 | 8.0.0 | 滿足預(yù)期 | 滿足預(yù)期 | 滿足預(yù)期 | |||
| iph6s | ios 11.4.1(15G77) | 滿足預(yù)期 | 滿足預(yù)期 | 滿足預(yù)期 | ||||
| iph6s | ios 12.0.1(16A366) | 滿足預(yù)期 | 滿足預(yù)期 | 滿足預(yù)期 | ||||
| iph7 | ios 11.4.1(15G77) | 滿足預(yù)期 | 滿足預(yù)期 | 滿足預(yù)期 | ||||
| iphX | ios 11.4.1(15G77) | 待測 | 待測 | 待測 | ||||
| 魅藍(lán)E2 | Flyme6.3.0.2A | 6.0.1 | 滿足預(yù)期 | 滿足預(yù)期 | 滿足預(yù)期 | |||
| mi 5s | MIUI 9.6 | 7.0 | 滿足預(yù)期 | 滿足預(yù)期 | 滿足預(yù)期 | |||
| 榮耀V8 | EMUI 8.0.0 | 8.0.0 | 滿足預(yù)期 | 滿足預(yù)期 | 滿足預(yù)期 |
4. 測試結(jié)論
豎版視頻測試基于上兩次測試的結(jié)論，已經(jīng)十分符合測試預(yù)期中的內(nèi)容设预。以下詳細(xì)總結(jié)以下本地測試的重點徙歼，視頻播放時的填充以及旋轉(zhuǎn)方式：
-
ios下，統(tǒng)一全屏鳖枕，不旋轉(zhuǎn)魄梯，比例不變，采用寬度撐滿宾符，高度居中留黑邊的做法 -
android下酿秸，非全屏?xí)r，不旋轉(zhuǎn)魏烫，比例不變辣苏，采用寬度撐滿，高度居中留黑邊的做法 -
android下哄褒，全屏?xí)r稀蟋，順時針旋轉(zhuǎn)90度，比例不變呐赡，采用高度撐滿退客，寬度居中留黑邊的做法，此時豎版視頻的瀏覽效果會很差链嘀，因為左右黑邊會非常非常大
