IIS 服务器上的 mp4 在 iOS 上无法播放

[Dream4ever]

需求描述

公司阿里云服务器安装的 Windows 系统，网站均用 IIS 管理。不知道哪次做了什么设置之后，网站上的 mp4 视频（绝大多数）没法在 iOS 上播放了，只有一批似乎是用 Adobe 的 FMS 管理的视频可以正常播放，连在 iOS 7 上都可以播放。放在七牛云上的 mp4，在 iOS 7 上也没法播放，看来就是后端设置的问题。既然如此，就研究一下那批可以播放的视频是如何设置的，以后所有视频资源都应用同样的设置就行了。

研究过程

现象描述

经过仔细测试，发现部分视频可以在各版本 iOS 上播放，剩下视频是无法播放的。

分别检查在 iOS 上能播放的视频和不能播放的视频的网络请求和响应（在 PC 端的 Chrome 浏览器上测试的），对比两者不同的部分，发现两者的响应头是相同的，只有请求头略有不同。

能播放的视频：

请求：
Accept-Encoding: identity;q=1, *;q=0
Range: bytes=0-

不能播放的视频：

请求：
Accept-Encoding: gzip, deflate
Access-Control-Allow-Origin: *

但是只有请求头不同，响应头是相同的，难道又是前端的问题？不对啊，前端代码显然是没变过的，但是突然就出现 mp4 无法访问的问题，这说明还是跟服务器的配置有关。那就集中全力检查服务器上 IIS 和 FMS 的配置。

视频编码研究

将能播放的视频和不能播放的视频的编码格式对比了一下，完全相同！这么说不是视频的因素。

参考链接：Unable to play embedded Mp4 videos on iPad or iPhone in Confluence

FMS 研究

又检查 FMS 软件安装目录内的 mp4 视频和网站目录下 applications 文件夹里的视频（FMS 也有 applications 文件夹），发现都是无法播放的视频，说明 FMS 并没有起作用？

为了验证自己的想法，将 FMS 的三个服务全部停止，果然刚才能播放的视频依然能播放，不能播放的视频依然不能播放。

视频播放插件研究

又想试试换个前端插件能不能解决问题，用了最通用的 video.js，依然不行！

视频重编码

用下面的视频对不能播放的视频重编码，依然不行！对可以播放的视频重编码，依然可以播放……不是视频的原因？

$ .\ffmpeg.exe -i .\input.mp4 -profile:v baseline -level 3.0 -framerate 30 -b:v 850k -b:a 150k output.mp4

参考资料：

• H.264 encoded MP4 presented in HTML5 plays on Safari but not iOS devices

HLS 方案研究

第二天又理了理思路：mp4 格式的视频在所有安卓设备上都是可以直接查看的。在 iOS 设备上无法直接访问，hls.js 在新的 iOS 上是可以正常使用的，那么在旧的 iOS 上呢？感觉昨天用 iOS 7 测试时，设置好像不大对，于是今天又研究了研究。发现 Safari 一直在无痕模式下，刷新页面用的好像一直是本地缓存？这就尴尬了，退出了无痕模式并清理 Safari 的缓存后再访问页面，这回果然可以看到最新的页面了！接着在 iOS 7 设备上测试 hls.js 播放流媒体，果然可以了！好开心！哈哈哈哈。

想研究研究 hls.js 究竟能不能在 Android 4.4 上应用，看了看 官方文档的兼容列表，说是支持 Android Chrome 34 及以上版本。

查了查 iOS 7 和 Android 4.4 这两个设备的 UserAgent，发现 iOS 7 的设备是 WebKit 537 的内核，Android 4.4 则是 WebKit 534.3 的内核。

查看 Wikipedia 上的 Google Chrome version history 这篇文档可知，534.3 的内核对应的 Chrome 版本是 6.0.472，这可太老了。

hls.js 是通过 MediaSource 和 HLS 这两种方式实现流媒体的播放的，上网查了查，这两个功能在 WebKit 534.3 上都是不支持的。

具体来说，支持 MediaSource 的 Android WebView 和 Chrome for Android 最低版本号为 33（参考：MediaSource），而版本号 33 的 Android WebView 和 Chrome for Android 是随着 Android 4.4.3 版本发布的（参考：WebView FAQ - What version of Chrome is it based on?）。Android 测试机的系统版本号是 4.4，对应的 WebView 版本号为 30，是不支持 MediaSource 的，也就是没法使用流媒体播放的功能。

查看 百度流量研究院的统计数据，Android 4.4 大版本在国内还是占到了 10% 左右的用户的，这个比例可不小，那么还是需要照顾这部分用户的。

这样一来，安卓设备播放 mp4 格式视频就可以了，iOS 设备用 hls.js 播放流媒体，爽！

2018年6月22日 更新：

后来综合考虑之后，决定页面只提供流媒体视频资源，对于老旧安卓不提供支持，然后用 4.4.2 的三星 Tab 测试，发现又能播放流媒体了，什么鬼？？？

iOS 无法播放 mp4 的原因

• Google：ios 网页 播放 mp4 (服务端 OR 后端)
• video标签在iPhone手机上不能播放？万能的知乎大神请指引我，实在没办法了
• h5点播播放mp4视频遇到的坑,ios的h5不能播放视频等

其它参考资料

• HTML5 Video won't play on my ipad or iphone