最近开发了一个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 load