《HTML5》 Audio/Video全解

1、标签解读

• <audio> 标签属性

        <audio id="media" src="http://www.abc.com/test.mp3" controls></audio>  

src：音乐的URL （source标签在src属性不存在时使用） 
preload：预加载（none、metadata、auto。若是不使用此属性，默认为auto。）  
autoplay：自动播放 
loop：循环播放 
controls：浏览器自带的控制条

• <video> 标签属性

        <video id="media" src="http://www.abc.com/test.mp4" controls width="400px" height="400px"> </video> 

src：视频的URL 
poster：视频封面，没有播放时显示的图片 
preload：预加载 
autoplay：自动播放 
loop：循环播放 
controls：浏览器自带的控制条 
width：视频宽度 
height：视频高度 
muted:是否输出视频的声音  

 

2、Media对象方法和属性

• 获取HTMLVideoElement和HTMLAudioElement对象

1. //audio能够直接经过new建立对象  

2. Media = new Audio("http://www.abc.com/test.mp3");  

3. //audio和video均可以经过标签获取对象  

4. Media = document.getElementById("media");  

• Media方法和属性——HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement

1. //错误状态  

2. Media.error; //null:正常  

3. Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效  

4.   

5. //网络状态  

6. Media.currentSrc; //返回当前资源的URL  

7. Media.src = value; //返回或设置当前资源的URL  

8. Media.canPlayType(type); //是否能播放某种格式的资源  

9. Media.networkState; //0.此元素未初始化  1.正常但没有使用网络  2.正在下载数据  3.没有找到资源  

10. Media.load(); //从新加载src指定的资源  

11. Media.buffered; //返回已缓冲区域，TimeRanges  

12. Media.preload; //none:不预载 metadata:预载资源信息 auto:  

13.   

14. //准备状态  

15. Media.readyState;   //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA  

16. Media.seeking; //是否正在seeking  

17.   

18. //回放状态  

19. Media.currentTime = value; //当前播放的位置，赋值可改变位置  

20. Media.startTime; //通常为0，若是为流媒体或者不从0开始的资源，则不为0  

21. Media.duration; //当前资源长度 流返回无限  

22. Media.paused; //是否暂停  

23. Media.defaultPlaybackRate = value;//默认的回放速度，能够设置  

24. Media.playbackRate = value;//当前播放速度，设置后立刻改变  

25. Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文  

26. Media.seekable; //返回能够seek的区域 TimeRanges  

27. Media.ended;    //是否结束  

28. Media.autoPlay; //是否自动播放  

29. Media.loop; //是否循环播放  

30. Media.play();   //播放  

31. Media.pause();  //暂停//控制  

32. Media.controls;//是否有默认控制条  

33. Media.volume = value; //音量  

34. Media.muted = value; //静音  

35.   

36. //TimeRanges(区域)对象  

37. TimeRanges.length; //区域段数  

38. TimeRanges.start(index) //第index段区域的开始位置  

39. TimeRanges.end(index) //第index段区域的结束位置 

3、Media JS事件

 

   eventTester = function(e){           Media.addEventListener(e,function(){               console.log((newDate()).getTime(),e);           });      }         eventTester("loadstart");   //客户端开始请求数据      eventTester("progress");    //客户端正在请求数据      eventTester("suspend");     //延迟下载      eventTester("abort");       //客户端主动终止下载（不是由于错误引发）      eventTester("error");       //请求数据时遇到错误      eventTester("stalled");     //网速失速      eventTester("play");        //play()和autoplay开始播放时触发      eventTester("pause");       //pause()触发      eventTester("loadedmetadata");  //成功获取资源长度      eventTester("loadeddata");  //      eventTester("waiting");     //等待数据，并不是错误        eventTester("playing");     //开始回放      eventTester("canplay");     //能够播放，但中途可能由于加载而暂停      eventTester("canplaythrough"); //能够播放，歌曲所有加载完毕      eventTester("seeking");     //寻找中      eventTester("seeked");      //寻找完毕      eventTester("timeupdate");  //播放时间改变      eventTester("ended");       //播放结束       eventTester("ratechange");  //播放速率改变      eventTester("durationchange");  //资源长度改变    eventTester("volumechange");    //音量改变

 

      事件详细说明：

4、浏览器对音视频格式支持说明

　　 Audio 
　　Firefox：支持 Ogg Vorbis和WAV 
　　Opera ：支持Ogg Vorbis和WAV 
　　Safari ：支持MP3，AAC格式 ，和MP4 
　　Chrome ：支持Ogg Vorbis，MP3，WAV，AAC和MP4 
　　Internet Explorer 9+ ：支持MP3，AAC格式 ，和MP4 
　　IOS ：支持MP3，AAC格式 ，和MP4 
　　Android ：支持AAC和MP3 
　　为了最大程度支持全部上面提到的浏览器，建议开发者使用Ogg Vorbis和MP3这两种格式例如。 

<audio controls>
   <source src="myAudio.ogg" type="audio/ogg">    <source src="myAudio.mp3" type="audio/mp3"> </audio>

 

　　 Video 
　　Firefox ：支持Ogg Theora格式和WEBM 
　　Opera ：支持Ogg Theora格式和WEBM 
　　Safari ：支持MP4 
　　Chrome ：支持Ogg Theora格式，MP4和WEBM 
　　Internet Explorer 9 ：支持MP4和WEBM(须要安装插件) 
　　IOS ：支持MP4 
　　Android ：支持MP4和WEBM(Android 2.3版本以上) 
　　 为了支持上述全部的浏览器，建议使用WebM和MP4视频文件做为source元素。例如。

<video controls>
   <source src="myVideo.mp4" type="video/mp4">    <source src="myVideo.webm" type="video/webm"> </video>

 

　　再来张截图示意：（http://en.wikipedia.org/wiki/Html_video_tag）

 

 

 

5、疑难杂症

　　一、mp4格式视频没法在chrome中播放

　　Chrome浏览器支持HTML5，它支持原生播放部分的MP4格式（不用经过Flash等插件）。
为何是部分MP4呢？MP4有很是复杂的含义（见http://en.wikipedia.org/wiki/Mp4），普通人对MP4的理解是后缀为.mp4的文件。但MP4自己不是一种简单的视频格式，它是一个包装了视频和音频格式的壳。至于里面的视频和音频使用什么编码格式是可变的。MP4的视频格式可使用DivX也可以使用H264，Chrome只支持H264。
　　而后，我猜想问题的缘由是这样的：Chrome浏览器见到MP4后缀的文件，使用了原生HTML5视频播放起播放，但却发现视频格式没法解码。对于Firefox，它不支持原生播放MP4，因而使用了Flash，绝大部分的视频格式基本均可经过Flash播放。
　　这篇2011年1月的消息提到Google将放弃对H264的支持：http://www.infoq.com/cn/news/2011/01/chrome-h264。这篇是Google方面的描述：http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html。若是Google再也不支持在Chrome上原生播放MP4，那么会调用Flash播放器播放，这样反而不会出现有些MP4文件播放不了的问题。
　　为何Chrome不支持全部的视频编码格式？绝大部份的视频编码格式都是要付版权费的，Google已经为H264买了单，Firefox没有Google那么有钱不肯意买。
　　最后，我录制了一段教学视频，指导你们怎样把各类视频转换成兼容性比较好的MP4文件。视频中使用的软件是“格式工厂”（http://www.formatoz.com/CN/index.html），这个软件基本上只是作了一个界面，其核心调用了开源软件FFMPEG。因为它违反了FFMPEG的LGPL许可协议，备受指责。使用Linux的朋友能够直接使用FFMPEG命令进行视频格式转换，命令以下：
　　ffmpeg -i infile.flv -vcodec libx264 o5.mp4
　　若是转换出的视频在某些设备仍是没法播放，能够试试利用MediaCoder转换兼容性更好的MP4

　　二、让服务器能正确识别多媒体的MIME类型

　　即便对浏览器来讲，已经设置了正确的媒体，但有多是您的服务器并不能正确识别多媒体的MIME类型。MIME类型告诉服务器如何处理不一样的文件类型。若是你使用Apache，则能够在.htaccess文件中添加下面的音频支持：
　　AddType audio/ogg ogg AddType audio/ogg oga AddType audio/wav wav AddType audio/mpeg mp3 AddType audio/mp4 mp4 AddType audio/mp4 mpa
　　相似地添加以下代码，以支持视频：
　　AddType video/webm webm AddType video/mp4 mp4 AddType video/ogg ogg AddType video/ogg ogv
　　若是不能访问服务器的.htaccess文件，则有可能在服务器的控制面板地方有一个选项，容许查看和添加MIME类型。
　　若是是Windows服务器，那么可能须要在IIS或者web.config中进行设置在web.config文件中 。

　　三、文件格式转换的问题

　　一种很常见的状况是，用户从客户端提交给服务端一个类型的媒体文件，而且尽管你已经从它的文件扩展名中确认了其MIME类型。可是，该文件没有被正确解码。例如，它能够是一个彻底有效的MP4文件，但因为某种缘由，在一些浏览器中没法播放。若是发生这种状况，最好把用户上传的文件进行编码，好比使用如Miro Video Coverter和Media Converter等编码器，能够确保正确的编码。 
　　此外，一些文件，尤为是MP4文件，在测试时，不要老是在一个支持其格式的浏览器中进行测试，这是由于事实上，MP4存在不一样的编码格式，能够根据不一样格式对MP4(又称如H.264)进行编码(参考：http://en.wikipedia.org/wiki/H.264#Profiles)若是有的浏览器不支持其中的编码格式,那么它天然不会工做。若是遇到这种状况，尝试确保该文件是以最基本的MP4编码方式进行编码。最好建议使用工具，好比Miro转换工具，它能确保MP4文件能在最多的浏览器中获得支持。 
　　若是须要支持Firefox 3.6和更低的版本，还须要转换对应的音频文件为Ogg格式}，并将它们添加到中的元素中。

　　四、可否在MP4完整下载前进行播放？

　　通常状况下，HTML5的的音频和视频播放器将容许用户在完整下载文件前，就能够开始进行播放了，有时候，对于MP4文件来讲却不能这样，要必须等待全部的视频下载完毕再播放，这主要是编码问题形成的 
　　有时，MP4文件使用索引进行了编码(其中包含了好比文件长度等信息)，每每这些信息是放在文件的尾部而不是头部。索引信息中，包含了文件的元信息，浏览器根据这些元信息去进行下载。若是索引放在后面的话，则必须等待到得到整个文件的索引后，才能知道文件的元信息，因此就必须等到整个文件下载完毕才能开始播放了。 
　　若是您遇到这种状况，还有一个简单的修补程序，是由埃里克森Renaun提供的，下载地址为：http://renaun.com/blog/code/qtindexswapper/，下载到计算机上运行，则能够把文件的索引信息移动到文件头并保存。

　　五、避免用JS访问废除的属性

　　这个问题看上去好像有点多余，但每次在Stack Overflow中，都会看到不少开发者发问，好比为何某个方法不能运行，缘由在于他们使用了不存在的属性。好比，在 
<audio>和<video>标签中都有的旧的属性autobuffer,在2010年10月已经被preload取代了。 
　　人们彷佛忘记了，HTML5是还没有敲定的标准(虽然它的大部份内容如今已经都至关稳定)，因此做为开发者，必须多到W3C的官方网站去进行查阅相关资料。

　　六、Firefox 11 以上版本的音量控制的问题

　　最近相信很多开发者会发现音量控制的操做在Firefox 11及以上的版本中被取消了。是的，静音和音量控制仍然是可使用的，但要经过键盘上的上和向下键进行控制，其缘由主要是发现了两个bug(请参考：http://www.iandevlin.com/blog/2012/04/html5/html5-media-controls-and-firefox)，这一点请开发者注意，估计firefox会很快修复这个问题。

　　七、音视频播放是否彻底脱离插件？

　　HTML5的音频和视频点的最大卖点之一就是不须要安装第三方插件-例如Flash 
　　不幸的是，这不彻底正确，ie 9及以上版本的浏览器和Safari是须要使用Microsoft Media Player和Apple的QuickTime，才能播放HTML5音频和视频。

　　八、如何全屏视频？支持状况如何？

　　HTML5 视频的其中一大威力在于其全屏播放的特性但HTML5 规范中，对这个竟然没有任何说起，相反，在另一个关于全屏幕播放的API中有定义，但仍是在草稿阶段，在一些浏览器中开始有试验性的支持。 
　　如下浏览器去一些支持全屏API，但具体使用的api方法各自有不一样： 
　　Chrome 19 版本以上 
　　Firefox的12 + 
　　Safari浏览器5.1 + 
　　注：iPhone上，video自动全屏播放！ 
　　也有一些其余方法，能在其余浏览器中支持使用全屏API,好比https://github.com/sindresorhus/screenfull.js 
　　Internet Explorer9 以上版本忽略了video poster属性 
　　若是在HTML 5的video标签中使用poster属性，其含义为在视频播放前提供一张静态的图片给用户，但ie 9以上的版本，除非设置了preload属性为none，不然将会忽略掉设置的poster属性。 
　　这是因为Internet Explorer是最迟支持HTML 5的浏览器，咱们都习惯了其余浏览器中，若是设置了poster属性，则会在播放视频前，先显示设置的这张图片。但IE 9并不这样作，若是要播放的视频的第一帧已经加载了，则不会显示有poster属性指定的图片了，并且在IE 10中，目前依然存在这个问题。 　

　　九、经过HTML5技术可否访问摄像头和麦克风？

　　HTML 5的起草者们，一直都但愿HTML 5能访问摄像头和麦克风，所以早期是使用标签的，但如今是被getUserMedia API所取代了(详见： http://dev.w3.org/2011/webrtc/editor/getusermedia.html)。 

　　API自己是容易使用的 ，但目前浏览器支持至关有限。Opera是目前惟一个实现这些功能的浏览器，但只支持视频Internet Explorer 10也将对其进行部分支持,Firefox也会跟随。

　　十、autoplay在iphone/ipad中不能实现的问题

• 经过iframe 

  var ifr=document.createElement("iframe");   ifr.setAttribute('src', "song.mp3");   ifr.setAttribute('width', '1px');   ifr.setAttribute('height', '1px');      ifr.setAttribute('scrolling', 'no');   ifr.style.border="0px";   document.body.appendChild(ifr);

   

• 经过页面上的其余触摸或者点击事件来调用对应的play()方法

 

 

　　十一、解决iPhone中，视频自动在新窗口打开问题

      HTML

<video id="player" width="480" height="320" webkit-playsinline>

 

      Obj-C

webview.allowsInlineMediaPlayback = YES;

 

6、参考范例：音乐播放器

　　在网上看到有人用JS写的播放器，木有仔细看，先贴过来。感受让我本身写想不到这么周全，等后面要用再仔细寻更好方案。

　　原文地址：http://www.cnblogs.com/arby/archive/2012/04/07/2436352.html

function Audio(song, playType, dom){     /*      * 播放器构造函数。      * dom:为audio元素，能够不传。      * song : 为歌曲列表，只支持数组形式，格式为[{}{}]      * playType 为播放方式： 1 顺序播放  2 随机播放  3 单曲循环  4 所有循环      */     if(!dom) {         this.media = document.createElement('audio');         document.body.appendChild(this.media);     }else {         this.media = typeof dom == 'string' ? document.getElementById(dom) : dom;     }     this.currentIndex = 0;     this.songList = song;     this.countTotal = this.songList.length;     this.playType = playType || 1;     this.MusicInfo = [];     this.playing = false; } /*  * 播放器启动主函数  */ Audio.prototype.startPlay = function(){     this.media.src = this.songList[this.currentIndex].src;     this._play(); } /*  * 播放器播放核心函数.  */ Audio.prototype._play = function(){     var self = this;     this.media.play();     this.playing = true;     this.mediaEvent('ended' ,callback);     function callback(){         //单曲循环无需单独处理,只需直接调用startPlay()函数。  if(self.media.currentTime == self.media.duration){             switch(self.playType){                 case 1:                     if(self.currentIndex == self.countTotal-1){                     return false;                     }else{                         self.currentIndex++;                     }                     break;                 case 2:                     self.currentIndex = Math.floor(Math.random()*self.countTotal);                     break;                 case 4:                      self.currentIndex++;                     console.log("self.currentIndex==",self.currentIndex);                     self.currentIndex = (self.currentIndex > self.countTotal-1) ? 0 : self.currentIndex;                     break;             }             self.startPlay();         }     } } /*  *播放下一首若是当前已是最后一首则播放第一首  */ Audio.prototype.playNext = function(){     this.currentIndex++;     this.currentIndex = this.currentIndex > this.countTotal-1 ? 0 : this.currentIndex;     this.startPlay(); } /*  *播放上一首若是当前已是第一首则播放最后一首  */ Audio.prototype.playPrevious = function(){     this.currentIndex++;     this.currentIndex = this.currentIndex < 0 ? this.countTotal-1 : this.currentIndex;     this.startPlay();      } /*  * 暂停当前播放，若是传回调函数，则暂停后执行回调。  */ Audio.prototype.playPause = function(callback){     if(this.playing){         this.media.pause();         this.playing = false;     }else{         this.media.play();         this.playing = true;     }     if(!callbakc){callback();} } /*  *  获取当前播放位置  */  Audio.prototype.getCurrentTime = function(){     return this.media.currentTime; } /*  * 播放器各类事件监听.  * tip 类型必须是正确的类型  */ Audio.prototype.mediaEvent = function(eventType, callback){          Event.add(this.media,eventType,callback); } /*  * 播放用户自定义时间，即拖动进度条。  */ Audio.prototype.playUserTime = function(time){          this.media.currentTime = time; } /*  * 获取当前媒体信息  * src 当前媒体路径  * size 当前媒体总时长.  */ Audio.prototype.getMusicInfo = function(){     this.MusicInfo.src = this.media.currentSrc;     this.MusicInfo.size = this.media.duration;     this.MusicInfo.name = this.songList[this.currentIndex].name;     return this.MusicInfo; } /*  * 设置或者获取当前音量  * voluems的值需大于0 小于等于 1  */ Audio.prototype.setVolume = function(volumes){     if(volumes) {         this.media.volume = volumes;     }else{         return this.media.volume;     } } /*  * 设置或者取消静音.  * flag的值为true是静音，false时正常  */ Audio.prototype.muted = function(flag){     if(flag){         this.media.muted = 1;     }else{         this.media.muted = 0;     } } /*  * 向播放列表添加新歌曲  * song为所须要添加的歌曲，能够多首，格式如构造函数中song.  */  Audio.prototype.addSongToList = function(song){     this.songList.push(song);     this.countTotal = this.songList.length;  }   Audio.prototype.getBuffered = function(){     return this.media.buffered; } /*全局事件监听封装函数*/ var Event = {     add : function(node, eventType, callback){         var node = typeof node == 'string' ? document.getElementById(node) : node;         if(document.addEventListener){             node.addEventListener(eventType, callback, false);         }else{             node.attachEvent('on' + eventType, callback);         }     },     remove : function(node, eventType, callback){         var node = typeof node == 'string' ? document.getElementById(node) : node;         if(document.removeEventListener){             node.removeEventListener(eventType, callback, false);         }else{             node.detachEvent('on' + eventType, callback);         }     } } var core = {      formatPlayTime : function(tempTime){         var temp = tempTime.toString().split(".")[0];         if(tempTime<=60){             temp = temp>=10? temp : "0"+temp;             return "00 : " + temp;         }else{             var minute =Math.floor(temp/60);              minute = (minute >= 10)? minute : "0"+ minute;             var second = temp%60;              second = (second >= 10)? second : "0"+second;             return minute + " : " + second;         }     }         }