手机h5视频测试：手机默认浏览器（3）

写在最前面

本文基于上一篇手机h5视频测试：手机默认浏览器1及其他几篇后续测试，继续测试手机默认浏览器的场景，这次主要测试内容如下：

手机默认浏览器播放竖版视频

1. 准备工作

略，同手机h5视频测试：手机默认浏览器1

1.1 测试结果说明

略，同手机h5视频测试：手机默认浏览器1

1.2 测试设备说明

略，同手机h5视频测试：手机默认浏览器1

1.3 基础代码

所有video标签都由此扩展

<video src="xxx" poster="xxx.png" controls></video>

1.4 h5打开时说明

• 手机统一竖置
• wifi优先

2. 本次测试场景

手机默认浏览器，最原始标签，自动播放，视频本身为竖屏

2.1 一些已知的手机默认浏览器的限制

略，同手机h5视频测试：手机默认浏览器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 之前测试结果汇总

1. 在未播放状态中，ios和android关于自动播放区别明显，比如：

• 所有手机都按css样式展示
• android可以自动播放，ios不可以

2. 在播放时状态中，两系统差异比较明显，比如：

• ios会统一自动全屏播放，且只能在全屏下播放（回到原始尺寸就暂停）
• android不会自动进去全屏，同时样式上采用左右撑满，上下留黑边的方式，视频本身保证原比例，并不会拉伸。一旦进入全屏后，一定会横屏播放，导致用户必须手机旋转到横屏下观看，此时视频高度撑满，宽度左右留有黑边。

3. 在播放完状态中，ios和android结果都比较一致，比如：

• 几乎所有手机都满足预期，只有华为手机出现了广告的现象。

4. 多个手机同一个系统的，ios的结果很一致，android则有差异，比如：

• 同是ios的手机，所有测试情况都是一致的
• 华为，在播放最后，出现了广告
• 魅族，mov格式无法播放（原先测试里使用的是mov格式，当魅族不能播放后，统一改成了mp4）

2.4 测试预期

将上一次测试的结果，导入到这次的预测里，可以更突出这次的测试重点

预期序号	未播放预期内容	播放中预期内容	播放完成预期内容
1	封面poster能显示，样式完全按照css设定展示，拉伸	有进度条	有进度条
2	按照css样式展示	android：不自动全屏 ios：自动且只能全屏，位于最顶层，看不到浏览器上方的网址	非全屏下，播放完成后，没有广告
3	没有进度条，视频中间一个大大的播放按钮	非全屏下，按照css样式播放，视频保持原有比例（左右撑满，上下留黑）	全屏下，播放完成后，没有广告
4		全屏后， android：视频右转90度，手机得横着拿，比例不变（上下撑满，左右留黑） ios：视频不旋转，比例不变（左右撑满，上下留黑）	停留在最后一帧
5			华为手机1，2，3都不满足，最后有广告

关于测试预期的简单说明：

• 竖屏场景的测试重点，是播放时视频是否拉伸或者旋转，包括全屏时其自适应的方法，按照上次横屏全屏的经验，预测应该是屏幕旋转，高度撑满，左右留黑边的样式。
• 尽量将所有手机已知的情况都写到预期里，避免测试结果汇总显示效果不佳的情况

3. 测试结果汇总

手机	系统	原生	未播放	备注	播放中	备注	播放完	备注
mi mix2	MIUI 10 8.9.6	8.0.0	满足预期		满足预期		满足预期
iph6s	ios 11.4.1(15G77)		满足预期		满足预期		满足预期
iph6s	ios 12.0.1(16A366)		满足预期		满足预期		满足预期
iph7	ios 11.4.1(15G77)		满足预期		满足预期		满足预期
iphX	ios 11.4.1(15G77)		待测		待测		待测
魅蓝E2	Flyme6.3.0.2A	6.0.1	满足预期		满足预期		满足预期
mi 5s	MIUI 9.6	7.0	满足预期		满足预期		满足预期
荣耀V8	EMUI 8.0.0	8.0.0	满足预期		满足预期		满足预期

4. 测试结论

竖版视频测试基于上两次测试的结论，已经十分符合测试预期中的内容。以下详细总结以下本地测试的重点，视频播放时的填充以及旋转方式：

• ios下，统一全屏，不旋转，比例不变，采用宽度撑满，高度居中留黑边的做法
• android下，非全屏时，不旋转，比例不变，采用宽度撑满，高度居中留黑边的做法
• android下，全屏时，顺时针旋转90度，比例不变，采用高度撑满，宽度居中留黑边的做法，此时竖版视频的浏览效果会很差，因为左右黑边会非常非常大