h5 页面在ios 手机上，有一些video播放不出来，和其他问题汇总

最近遇到一个奇怪的问题：同一个video，格式都是mp4 ，在安卓机的 h5 页面上播放没有问题，但是在苹果手机就出现如下图：
开始分析原因： 觉得是转码的原因。于是从视频编辑部 要了 原稿视频原件，自己去下载了一个 转码制作软件，在mac 电脑上转码成mp4 格式 ，然后在ios里面可以播放出来。但问题是为啥在视频编辑部那边制作的视频，有一些不能在ios 上正常播放，莫非是因为我们用的平台不一样，视频编辑部用的是 win 系统，转码软件跟我也不一样，所以导致视频制作的转码不一样。继续分析~~~ 终于发现是 ：
h264编码的压缩级别问题导致。苹果官方文档中对 ios 能支持的压缩级别进行了描述：

https://developer.apple.com/library/content/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html 。

解决方法：因为我的视频是上传到阿里云那边去的，所以后来采用了 阿里云的视频转码服务，也就是 调用了 他们的接口，获取到阿里云转码返回来的视频 url 地址，用这个地址在ios和安卓机上播放就没有问题了。 自己用转码软件 制作mp4 格式的视频 ，还是存在兼容性问题，所以最好还是采取第三方转码。

video 标签在安卓机上面，没有办法实现在不脱离文档流的情况下浮层显示。
在安卓机上，一个页面有多个video，当主图的video 有poster 的时候，播放另外的一个视频，暂停之后，在点击播放主图的video的时候 会出现灰色的一块区域，这个时候需要单独设置当主图的video暂停情况下，多做一个遮罩层即可实现 一个页面多个video 标签来回播放 不会出现灰色区域。

在ios 内嵌的h5页面上，video标签则支持的好很多，如果是设置了 webkit-playsinline=“true” 那么要想真的让这个属性生效，不脱离文档流播放，那么就需要让ios 的开发人员帮忙加一下
allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES 这两个属性即可。

最后，可以微信扫码加群一起交流哦