html5 audio/video 的那些坑
当我最近项目用到audio的时候，我们用到了jPlayer作为三方库。
功能实现了，暂停播放，进度条什么的，都很顺利的搞定了。后来考虑到当网速过慢时需要给播放按钮一个载入动画，然后就一发不可收拾了。
找到jPlayer官方文档，看了下events事件，嗯不错，事件很全，几乎能解决任何需求：
从图中可以看出，我们肯定会用到waiting和playing事件来解决刚才提出的问题。
啪啪啪搞定：
jq('#jPlayer').on($.jPlayer.event.waiting, function(){
loadingBar.show()
});
jq('#jPlayer').on($.jPlayer.event.playing, function(){
loadingBar.hide()
});
chrome打开，测试通过，mobile模式下也通过。下班！
程序猿的第六感也是很强，回到家脑子里突然闪过一个想法，手机测会不会有问题啊。按理说-webkit-浏览器都应该会支持的，
chrome测试了应该没问题了。但是就是有很大的感觉，移动端会出问题。果然，第二天就傻尿了。手机上微信内置浏览器，
QQ内置浏览器，系统浏览器都失效了（我的魅族魅蓝手机）。拿同事的小米4和iPhone6测试也是差不多啥反应也没有。
(⊙o⊙)噢！一定是jPlayer太渣了，这些事件支持力这么差，打开W3C教程：
事件和jPlayer的一样嘛，再看看jplayer的源码，原来就是用的原生的事件，只是它自己封装了一下而已，自己写个原生的demo，
果然还是一样。那么waiting、playing事件是不能用了的。那么时时出现缓冲显示loading条这个功能确实实现不了了。
最开始我限制3G或者2G的流量的时候发现，音频只要能播放了，再跳到接近终点的位置播放，还是能够播放出来，我一度以为audio
是载入完了，才会再播放，或者说我们项目里的音频文件都比较小，很快能载入完。那么我可以在"开始载入"事件触发显示loadingBar，在第一次开始播放时
隐藏掉loadingBar。
上面那个事件列表里，很多事件是黑的，没有详细说明。
只有：
- loadstart
- durationchange
- loadedmetadata
- loadeddata
- progress
- canplay
- canplaythrough
这是一个加载流程，这么一说我可以利用这里面的canplay事件替代之前的playing，loadStart代替waiting事件，前提audio的属性要设置为preload=“none”（禁止预加载，
确实也需要让用户点击后才加载，因为用户本来就不一定要听，预加载了不就是浪费用户流量了吗）。
我以为事件列表里有详细说明的事件肯定是所有浏览器都支持的，事实上我错了，canplay事件在移动端的浏览器里表现不一，甚至不支持。
后来我又用一个较大的MP3文件测试，audio的载入流程，证实了audio和video一样，都是边载入边播放的，并不是一次载完才播放。
由于项目中的音频比较小，用2G或3G的流量情况下，只要开始播放了，就能流畅的播放下去，结合我发现的timeupdate这个事件支持比较好。
就只有暂时做个“假”的loadingBar，仅在第一次播放之前的载入过程显示loadingBar。
定义一个全局变量，判断是否开始播放：var isLoaded = 0;
在点击播放事件里控制显示loadingBar：
var play = function() {
if(isLoaded == 0){
loadingBar.show()
}else{
loadingBar.hide()
}
}
在timeupdate事件里判断是否开始播放：
timeupdate: function(e) {
if(e.jPlayer.status.currentTime > 0 && isLoaded == 0){
loadingBar.hide()
isLoaded = 1;
}
}
后来又在W3C里发现了这个 html5视频/DOM教程 ，页面底部列出了大多数浏览器支持的方法、属性和事件。我绝逼确定waiting事件支持很不好！！
最开始我是看的这个 html5 视频/音频参考手册，上面的大多数浏览器支持列表还真不容易发现。
最后有个测试地址，如下：
