音视频播放 Video Audio

音视频播放(Video,Audio)和常见的坑处理

1. 前言背景

在HTML5出现之前，Web页面访问音视频主要是通过Flash，Activex插件，还有微软后来推出的silverlight来展现的，尽管FLASH曾经风靡全球，但是随着互联网的不断发展，进入移动时代以后，Flash的风头渐渐被HTML5替代，主要原因是Flash经常爆出漏洞，安全性令人担忧，性能方面较差，对网络浏览和设备的电池也消耗比较大等等，Flash天生就是为PC而生，无法适应移动时代的特点，所以被各大厂商逐渐抛弃，连Adobe自己都已经放弃了Flash。所以HTML5是未来Web多媒体的主要方向。

2. 音频格式
   　　先安利一下格式的定义：

   Ogg：一种新的音频压缩格式，是完全免费、开放和没有专利限制的。

   MP3：是一种音频压缩技术。它被设计用来大幅度地降低音频数据量。

   WAV：为微软公司开发的一种声音文件格式，声音文件质量和CD相差无几。

opera,chrome和firefox对三种模式都支持，而微软和苹果则对自己有专利利益的mp3格式情有独钟，而对潜在竞争者开源的ogg进行了封杀，ogg是一种为了对抗mpeg(音频上就是mp3)格式开发的一种音视频技术，但他的关系比较微妙，因为目前没有哪个正式的公司敢直接使用ogg，因为商业推广ogg存在专利诉讼风险，之所以目前还没有人诉讼ogg，是因为目前没有大鱼上钩，不值得诉讼，但是反过来一旦诉讼失败，ogg被证明没有侵权mpeg，那以后mpeg就没有人使用了。

3. audio 标准API

src: 要播放的音频的 URL。
preload: 是否预加载，如果使用 “autoplay”，则忽略该属性。
autoplay: 是否自动播放。
loop: 是否循环播放。
controls: 是否显示浏览器自带的控制条，例如播放按钮。




您的浏览器不支持音频播放

//js获取Dom对象
var audio_test = new Audio(“test.mp3”);
var audio_test = document.getElementById(“audio_test”);
DOM对象方法:

canPlayType(type);能否播放某个资源文件，返回三个字符串之一：empty、maybe 或 probably
load();重新加载资源
pay();播放
pause();暂停

DOM对象属性，因为比较多这里只展示了几个重要属性：

Media.currentSrc; //返回当前资源的URL
Media.src = value; //返回或设置当前资源的URL
Media.currentTime = value; //当前播放的位置，赋值可改变位置
Media.volume = value; //音量
Media.muted = value; //静音
3. audio实际上的坑

Audio标签API其实非常简单，但只有PC浏览器支持的比较好，移动端却因为流量问题存在各种坑。

（1）自动播放

ios Safari会忽视autoplay属性，原因据官方说明是因为流量问题，Safari认为不让用户确认就下载音频文件会引起流量问题，所以禁止了这个功能，除了ios,高版本的安卓(5.0)部分机器也存在这个问题，为了绕开这个功能必须要做一些处理：

解决办法就是在页面上新增一个按钮，当用户点击按钮时播放音乐

$('#myBtn').on('touchstart',function(){
    
    var audio = $('#audio')[0]; 
    audio.load