【20170219】移动端下坑爹的Audio,Video的问题
Closed this issue · 0 comments
zhongxia245 commented
时间:2017-02-19 20:52:19
作者:zhongxia
这里记录目前遇到的问题,可能后面继续补充。
目前移动端的audio,video还不是很成熟,存在大量的问题,如果只是简单的使用,没有问题,但是如果需要一些比较个性的功能,那么就坑爹了。
一、背景
最近有一个移动端项目,使用到audio和video,用的功能比较多一点,突然发现好多功能在移动端各种兼容性问题,而且还没有解决方案。
二、audio兼容性问题
1. Android 下 audio playbackspeed 播放速度不兼容
- IOS的safari浏览器兼容
- android的chrome内核不兼容
- PC端没有问题
2. 移动端下无法自动播放
正常会在body添加一个点击事件,触摸屏幕的时候,开始触发播放。
3. 移动端下,音量属性 volume 不起作用
这个目前没有找到解决方案,无解。网上相关的资料又少的要死。
4. 回调事件兼容性
还有audio的一些回调事件,比如可以开始播放,加载结束等一下事件,在 android 和 iphone 的兼容性还不同。
5. IOS 每一个audio占一个线程
如果有非常多个的audio,则很占资源。
解决方案:
创建一个audio,然后修改它的src,来播放不同的音频
三、video 兼容性
1. 回调事件兼容性
和audio一样,回调事件中,很多兼容性问题,需要做 android 和 iphone的处理
2. video 页面会默认最顶层
video的播放面板,每次都跑到最顶层去。所以想在video上覆盖按钮,或者其他操作,问题很多。
3. 不同的浏览器,video的面板不一样
不同的浏览器,使用同一个 video,结果出来的效果很不一样,这样会让网站看起来很不美观。
解决方案:
用一个图片来占住位置,点击图片的时候,开始播放。 或者使用 videojs 来播放。 根据兼容性切换 flash 或者 h5 的使用。