1. 程式人生 > >Video標籤播放視訊?谷歌瀏覽器?safari?? 谷歌瀏覽器播放不了mp4格式的視訊的原因

Video標籤播放視訊?谷歌瀏覽器?safari?? 谷歌瀏覽器播放不了mp4格式的視訊的原因

webm格式和mp4格式,判斷了瀏覽器能否支援的視訊型別後,給了一個if判斷,如果是支援mp4格式,就返回視訊字尾mp4,如果是webm,就返回字尾webm。結果,在谷歌瀏覽器中播放不了,為什麼我指定源為webm格式的視訊時,谷歌瀏覽器毫無錯誤的播放了,但是,如果是使用if判斷,發現選擇的是mp4,而不是webm,咋辦?

先來看看這兩段程式碼,差別只是順序上的。

/*************************************獲取視訊格式***************************/

function getFormatExtension(){
    if( video.canPlayType("video/webm") !="")
{ //針對谷歌瀏覽器 return ".webm"; }else if( video.canPlayType("video/mp4") !="" ){ //針對safari瀏覽器 return ".mp4"; } }
/*************************************獲取視訊格式***************************/

function getFormatExtension(){
    if( video.canPlayType("video/mp4") !
="")
{ //針對谷歌瀏覽器 return ".mp4"; }else if( video.canPlayType("video/webm") !="" ){ //針對safari瀏覽器 return ".webm"; } }
結果:在谷歌瀏覽器中不能正常播放。

下面我們來看一張各個瀏覽器對video元素支援的三種視訊格式的情況表:

我們可以看到,

1、chrome既支援mp4格式也支援webm格式。但是火狐和谷歌瀏覽器都會優先選擇mp4格式(實踐證明的)。

2.此時當這裡的mp4格式的視訊播放不了時,就出現了我遇到的情況,例如:在獲取中會顯示視訊被破壞。所以還是建議把瀏覽器選擇webm格式的程式碼寫在前面,mp4的寫在後面,為了讓它先選擇webm格式的視訊,或者用程式中的判斷也可以。

現在來說說為什麼谷歌播放不了mp4格式的視訊的原因??

這是谷歌搜尋後學到的內容,又有進步了,哈哈。

原因:

Chrome瀏覽器支援HTML5,它只是支援原生播放部分的MP4格式。MP4視訊格式,在我寫這篇筆記時,我也以為mp4格式就是字尾為.mp4,其實不是,MP4本身不是一種簡單的視訊格式,它是一個包裝視訊和音訊格式的殼,裡面的視訊音訊的編碼格式使用什麼編碼方式是可變的。MP4視訊有兩種編碼方式,Divx和H264,but,Chrome支援H264。於是我上面的例子中,瀏覽器看到有MP4字尾的檔案,使用原生HTML5視訊播放,後來卻發現視訊格式無法解碼,於是,Chrome無法播放視訊。FF估計也是類似的原因。