写在最前面

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

1. 准备工作

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

1.1 测试结果说明

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

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

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

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

1.2 测试设备说明

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

1.3 基础代码

所有video标签都由此扩展

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

1.4 h5打开时说明

• 手机统一竖置
• wifi优先

2. 本次测试场景

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

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

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

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

2.2 测试链接

• 横版视频

<video 
  id="media" 
  src="http://alicdn.herdsric.com/video-demo/vh.mp4" 
  poster="http://alicdn.herdsric.com/video-demo/vh-cover.png" 
  controls>
</video>

2.3 测试预期

3. 测试结果汇总

4. 测试结论

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

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

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

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

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

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

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