《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;         }     }         }