写在最前面
本文基于上一篇手机h5视频测试：手机默认浏览器1，继续测试手机默认浏览器的场景，这次主要测试内容如下：
手机默认浏览器自动播放视频
1. 准备工作
1.1 测试结果说明
1.2 测试设备说明
1.3 基础代码
所有
video标签都由此扩展
<video src="xxx" poster="xxx.png" controls></video>
1.4 h5打开时说明
- 手机统一竖置
- wifi优先
2. 本次测试场景
手机默认浏览器，最原始标签，自动播放，视频本身为横屏
2.1 一些已知的手机默认浏览器的限制
2.2 测试代码
- 横版自动播放视频代码
<video
id="media"
src="xxx.mp4"
poster="xxx.png"
autoplay
controls>
</video>
2.3 上次测试结果
- 在未播放和播放完这两个状态中，
ios和android结果都比较一致，比如：
- 未播放时，所有手机都满足预期的结果，即不自动播放，样式可控
- 播放完后，几乎所有手机都满足预期，只有华为手机出现了广告的现象。
- 在播放时状态中，两系统差异比较明显，比如：
-
ios会统一自动全屏播放，且只能在全屏下播放（回到原始尺寸就暂停） -
android不会自动进去全屏，同时样式上采用黑边填充，视频本身不会拉伸，但进入全屏后，一定会横屏播放，导致用户必须手机旋转到横屏下观看，此时视频高度撑满，宽度左右留有黑边。
- 多个手机同一个系统的，
ios的结果很一致，android则有差异，比如：
- 同是
ios的手机，所有测试情况都是一致的 - 华为，在播放最后，出现了广告
- 魅族，
mov格式无法播放（原先测试里使用的是mov格式，当魅族不能播放后，统一改成了mp4）
2.4 测试预期
将上一次测试的结果，导入到这次的预测里，可以更突出这次的测试重点
| 预期序号 | 未播放预期内容 | 播放中预期内容 | 播放完成预期内容 |
|---|---|---|---|
| 1 | 封面poster能显示，样式完全按照css设定展示，拉伸 | 有进度条 | 有进度条 |
| 2 | 按照css样式展示 |
android：不自动全屏 ios：自动且只能全屏，位于最顶层，看不到浏览器上方的网址 |
非全屏状态下，播放完成后，没有广告 |
| 3 | 没有进度条，视频中间一个大大的播放按钮 | 按照css样式播放，视频保持原有比例，多余的地方会有黑边覆盖 | 全屏状态下，播放完成后，没有广告 |
| 4 | 视频不自动播放 | 进入全屏后，视频会旋转，手机得横着拿，横版视频纵向撑满屏幕，左右两边留黑 | 停留在最后一帧 |
| 5 | 华为手机1，2，3都不满足，最后有广告 |
关于测试预期的简单说明：
- 根据微信x5的经验，
autoplay标签不起作用，应该都无法自动播放 - 尽量将所有手机已知的情况都写到预期里，避免测试结果汇总显示效果不佳的情况
3. 测试结果汇总
| 手机 | 系统 | 原生 | 未播放 | 备注 | 播放中 | 备注 | 播放完 | 备注 |
|---|---|---|---|---|---|---|---|---|
| mi mix2 | MIUI 10 8.9.6 | 8.0.0 | 不满足4 | 4:自动播放 | 满足预期 | 满足预期 | ||
| 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 | 不满足4 | 4:自动播放 | 满足预期 | 满足预期 | ||
| mi 5s | MIUI 9.6 | 7.0 | 不满足4 | 4:自动播放 | 满足预期 | 满足预期 | ||
| 荣耀V8 | EMUI 8.0.0 | 8.0.0 | 不满足4 | 4:自动播放 | 满足预期 | 满足预期 |
4. 测试结论
经测试后，惊讶的发现在android都能自动播放，ios都不能。
网友评论