ios支持video标签吗_video标签移动端兼容性问题总结

最近开发了一个wap版的贵金属营销直播间，直播间主要由视频区和互动区组成。视频区使用了原生的video标签实现视频播放；互动区展示了分析师和用户之间的文本对话。

直播间开发过程中遇到了不少兼容性问题，这些问题大多数都是由移动端浏览器对video标签的实现差异造成的。现总结如下：

视频无法自动播放

autoplay属性失效

HTML5标准规定：video标签设置autoplay属性后，当页面加载完成时，媒体资源将自动开始播放。

然而，在实际开发过程中发现，给video标签设置autoplay属性，在很多移动设备的浏览器中是无法实现自动播放的。

在iphone上做测试，发现autoplay属性在safari里无效、在微信里有效。查看苹果开发者中心的文档,发现苹果对video标签的autoplay属性做了如下规定：

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled.

因此，在ios系统的safari浏览器中设置autoplay是无效的；此外很多安卓机浏览器也采用了禁用autoplay的策略。

调用play()方法无效

继续在iphone上做测试，在页面加载完成后调用play()方法，尝试实现自动播放的效果。发现在safari里视频没有播放，在微信里视频开始播放。

苹果开发者中心的文档同样对ios设备上的safari浏览器中，play()方法的触发时机做了规定：

No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

也就是说，在safari里，需要把play()方法绑定到用户交互事件(eg.onclick,ontouchstart)，当用户交互事件触发时，play()才会执行。如果把play()方法绑定到非用户交互事件(eg.onload),该事件被触发时play()不会被执行。

ios设备视频全屏/非全屏切换时，视频停止播放

在ios设备上全屏播放视频时，点击左上角的“完成”按钮(左图)，视频将恢复到非全屏状态，同时视频播放也中止了(右图)。

产品同事希望在点击完成按钮后，视频播放能够继续播放。

onwebkitpresentationmodechanged

经测试发现，通过onwebkitpresentationmodechanged事件可以检测video标签当前视频展示模式的变化。当onwebkitpresentationmodechanged事件触发时，调用play()方法，可以让视频继续播放。这种方式在ios设备的safari和微信里都能生效。

onresize

经测试发现，通过onresize事件可以检测到video标签宽高的变化，从而也能够间接检测到视频展示模式的变化。

监测视频是否正在播放

在视频播放过程中，video标签的timeupdate事件不间断地触发，每两次触发之间的时间间隔不大于250ms。因此通过检测视频播放过程中timeupdate事件的触发频率，就可以知道当前视频是正在播放还是发生了卡顿。

ps：有一些安卓机浏览器对timeupdate的实现机制不符合标准。在直播间测试过程中，发现在一款三星手机(android5.0)的(自带)浏览器中，只在点击视频暂停按钮后触发一次timeupdate事件(currenttime一直是0)，无法通过timeupdate检测视频是否正在播放中。

x5内核浏览器中视频脱离文档流

经测试发现，在iphone的qq浏览器中，一旦开始播放视频，视频就浮动在页面最顶层，可以被拖动，不受dom操作控制。在一些安卓机qq浏览器、安卓机微信中也存在这个问题。

原因是x5内核的浏览器对video的实现没有遵循标准，把video标签解析成了等宽高的native播放框。目前还没有找到很好的解决办法。

ps：除了x5内核浏览器外，在uc浏览器和一些安卓机的自带浏览器中，video标签播放时也是浮在最顶层的，并且会自动全屏。

待完善...