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

写在最前面

手机Web浏览器上播放视频实在是令人烦躁的问题。笔者一直从事微信端H5页面的制作，但即便如此，每次碰到视频项目，总需要花费很多时间在和用户商量处理视频的问题上。因为android，ios系统间的差异，不同android设备间的差异，屏幕分辨率差异，导致想让视频在所有设备上具有相同的播放效果总是很有难度。即使笔者自己，也脑子里一团乱，很难说清楚视频处理上，到底有多少条条框框。所以，产生了整理视频播放的念头。说不清，道不明的问题，现在理不清楚没关系，记录尽量多的实验结果，不断的尝试总结，最后总会有一个越来越接近真相，越来越简明的答案。

1. 准备工作

测试流程比较简单，比如：准备一些手机，都访问同一个视频播放url地址，分别记录下这个过程中视频出现的种种现象。
为了保证测试结果尽量稳定可信，应该尽量控制测试的变量，使测试的结果更加容易复现出来。

1.1 测试结果说明

从视频播放结果出发，总结了下面几点测试要求。这几乎是每次和客户商量的过程中，或早或晚都需要涉及到的内容。也就是不论测试内容是什么，都要在测试结果中描述到的场景：

1. 是否可以自动播放视频
2. 不同尺寸的视频，在全屏播放时，手机屏幕是否旋转
3. 视频播放完成后，是否会出现广告
4. 检查视频是否出现进度条

将上面提到的场景，再结合视频播放的几个大状态：未播放，播放中，播放完，分别细化到测试结果中去。

上述这些场景，随着测试越来越深入，会逐渐添加新的场景

1.2 测试设备说明

收集多收集一些稳定版本的手机测试

手机型号	系统	版本
小米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)
魅蓝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 基础代码

所有video标签都由此扩展

1.4 h5打开时说明

• 手机统一竖置
• wifi优先

2. 本次测试场景

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

要把视频问题测清楚，首先肯定要把手机默认浏览器过一遍。因为这才是最接近原生的形态，测试完这个之后，再考虑哪些特殊的内核浏览器中，比如微信，钉钉，手机淘宝等等。

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

1. 打开页面后，不能进行自动播放，必须手动点击页面（可以不是视频本身，其他按钮也可以）才能播放
2. ios播放时，视频会自动全屏
3. android播放时，根据手机机型不同略有差异，大多数都会保持其设定的css样式，但偶有出现自动全屏这样的情况

2.2 测试链接

• 横版视频

2.3 测试预期

预期序号	未播放预期内容	播放中预期内容	播放完成预期内容
1	视频封面poster能显示，样式完全按照css设定展示，拉伸	有进度条	有进度条
2		视频不会自动全屏	非全屏状态下，播放完成后，没有广告
3	没有进度条，视频中间一个大大的播放按钮	视频按照指定的css样式播放，视频保持原有比例，多余的地方会有黑边覆盖	全屏状态下，播放完成后，没有广告
4	视频不自动播放	视频进入全屏后，视频不会旋转，横版的视频横向撑满屏幕，上下两边留黑	停留在最后一帧

3. 测试结果汇总

手机	系统	版本	未播放	备注	播放中	备注	播放完	备注
小米mix2	MIUI 10 8.9.6	Android 8.0.0	满足预期		不满足4	4：当点击全屏按钮后，视频会自动横屏播放，此时高度撑满，宽度左右留有黑边，应该是contain的模式	满足预期
iphone6s	ios 11.4.1(15G77)		满足预期		不满足2，3	2：视频会自动全屏播放3：视频只能全屏，不能按指定尺寸播放，宽度撑满屏幕，视频比例不变	满足预期
iphone6s	ios 12.0.1(16A366)		满足预期		不满足2，3	2：视频会自动全屏播放3：视频只能全屏，不能按指定尺寸播放，宽度撑满屏幕，视频比例不变	满足预期
iphone7	ios 11.4.1(15G77)		满足预期		不满足2，3	2：视频会自动全屏播放3：视频只能全屏，不能按指定尺寸播放，宽度撑满屏幕，视频比例不变	满足预期
iphoneX	ios 11.4.1(15G77)		满足预期		不满足2，3	2：视频会自动全屏播放3：视频只能全屏，不能按指定尺寸播放，宽度撑满屏幕，视频比例不变	满足预期
魅蓝E2	Flyme6.3.0.2A	Android 6.0.1	满足预期		不满足4	4：当点击全屏按钮后，视频会自动横屏播放，此时高度撑满，宽度左右留有黑边，应该是contain的模式;魅族浏览器无法播放：无法播放MOV格式的视频"	满足预期
小米5s	MIUI 9.6	Android 7.0	满足预期		不满足4	4：当点击全屏按钮后，视频会自动横屏播放，此时高度撑满，宽度左右留有黑边，应该是contain的模式	满足预期
华为	荣耀V8 EMUI 8.0.0	Android 8.0.0	满足预期		不满足4	4：当点击全屏按钮后，视频会自动横屏播放，此时高度撑满，宽度左右留有黑边，应该是contain的模式	不满足1,2,3	播放完成后，会在最后一帧短暂停留，然后盖上一页黑色底色的广告页1：黑色广告页覆盖了进度条;2：非全屏后有广告;3：全屏后有广告;

4. 测试结论

经过以上测试，大致上，看到了两个系统间有不同的地方，总结如下：

1. 在未播放和播放完这两个状态中，ios和android结果都比较一致，比如：

• 未播放时，所有手机都满足预期的结果，即不自动播放，样式可控
• 播放完后，几乎所有手机都满足预期，只有华为手机出现了广告的现象。

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

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

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

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