时间：2017-02-19 20:52:19
作者：zhongxia
目前移动端的audio，video还不是很成熟，存在大量的问题，如果只是简单的使用，没有问题，但是如果需要一些比较个性的功能，那么就坑爹了。
一、背景
最近有一个移动端项目，使用到audio和video，用的功能比较多一点，突然发现好多功能在移动端各种兼容性问题，而且还没有解决方案。
二、audio兼容性问题
1. Android 下 audio playbackspeed 播放速度不兼容
- IOS的safari浏览器兼容
- android的chrome内核不兼容
- PC端没有问题
Paste_Image.png
2. 移动端下无法自动播放
正常会在body添加一个点击事件，触摸屏幕的时候，开始触发播放。
3. 移动端下，音量属性 volume 不起作用
这个目前没有找到解决方案，无解。网上相关的资料又少的要死。
Paste_Image.png
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 的使用。
网友评论