HTML5Audio/Video全解（疑難雜症）

一、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 

  1 2 3 4 5 6 7 8

  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;