写在最前面
本文基于上一篇手机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 测试代码&链接
http://dev.herdsric.com:215/video-native-v.html
- 竖版自动播放视频代码
<video
id="media"
src="xxx.mp4"
poster="xxx.png"
controls>
</video>
2.3 之前测试结果汇总
- 在未播放状态中，
ios和android关于自动播放区别明显，比如：
- 所有手机都按
css样式展示 -
android可以自动播放，ios不可以
- 在播放时状态中，两系统差异比较明显，比如：
-
ios会统一自动全屏播放，且只能在全屏下播放（回到原始尺寸就暂停） -
android不会自动进去全屏，同时样式上采用左右撑满，上下留黑边的方式，视频本身保证原比例，并不会拉伸。一旦进入全屏后，一定会横屏播放，导致用户必须手机旋转到横屏下观看，此时视频高度撑满，宽度左右留有黑边。
- 在播放完状态中，
ios和android结果都比较一致，比如：
- 几乎所有手机都满足预期，只有华为手机出现了广告的现象。
- 多个手机同一个系统的，
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度，比例不变，采用高度撑满，宽度居中留黑边的做法，此时竖版视频的浏览效果会很差，因为左右黑边会非常非常大
网友评论