#001 移动端下坑爹的Audio，Video的问题

时间：2017-02-19 20:52:19
作者：zhongxia

目前移动端的audio，video还不是很成熟，存在大量的问题，如果只是简单的使用，没有问题，但是如果需要一些比较个性的功能，那么就坑爹了。

一、背景

最近有一个移动端项目，使用到audio和video，用的功能比较多一点，突然发现好多功能在移动端各种兼容性问题，而且还没有解决方案。

二、audio兼容性问题

1. Android 下 audio playbackspeed 播放速度不兼容

1. IOS的safari浏览器兼容
2. android的chrome内核不兼容
3. 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 的使用。