H5的video標簽讓前端開發者用一行代碼就可以實作視頻和音頻的播放，然而，有時候我們會突然發現，某些Mp4格式的視頻在Chrome下居然無法正常播放？這究竟是什么原因呢？這篇文章主要分析了部分Mp4檔案在Chrome下無法正常播放的原因，最后，將會給出相應的解決方案~
一、先從video標簽講起
在2000年代初期到后期，網路上的視頻播放主要依靠Flash插件，這是因為當時沒有其它方法可以在瀏覽器上流式傳輸視頻，然而，并非所有瀏覽器都擁有相同的插件，同時，如果用戶如果沒有安裝Flash插件，則無法播放任何視頻
為了填補這個空白，WHATWG開始研究HTML標準的新版本，并在HTML5中規定了一種通過video標簽來包含視頻的標準方法，在HTML5中，在頁面中播放視頻非常簡單，只需要在頁面中添加具有很少屬性的視頻標簽即可~
<html> <head> <meta charset="UTF-8"> <title>My Video</title> </head> <body> <video src="some_video.mp4" width="1280px" height="720px" /> </body> </html>
到目前為止，Internet Explorer 9+、FireFox、Opera、Chrome和Safari等瀏覽器中都已經支持<video>標簽，同時，<video>也能夠支持MP4、WebM和Ogg等不同視頻格式檔案的播放，因此，采用video標簽在Web站點實作視頻的播放已經成為了開發者的首選~
然而，前不久在做一個專案時，發現在Chrome下有些MP4視頻檔案居然不能正常播放了！！！！在這個專案中，主要包括了教師端和學生端，在教師端中，老師可以上傳MP4格式的視頻作為課件，而在學生端中，學生可以打開視頻進行學習，當我用Chrome登錄到學生端時，可以看到很多課程串列，接著，我打開了一個MP4課件進行學習
嗯~這個視頻看起來挺正常的呀，于是我又選擇了另一個MP4視頻進行播放~
咦？怎么這個MP4視頻在播放時不能看到影像而只能聽到聲音了？于是我又打開了IE，發現這個視頻在IE中居然又可以正常播放了！
明明都是MP4視頻格式的檔案，為什么在Chrome中一些MP4格式的視頻就不能正常播放了？要想弄清楚里面的原因，還需要先從視頻的檔案格式、封裝格式和編碼方式講起~
二、視頻格式及編碼方式簡介
1、視頻檔案格式
在Windows系統中，我們所創建的檔案都帶有后綴，如.doc等，Windows設定后綴名的目的是讓系統中的應用程式來識別并關聯這些檔案，讓相應的檔案由相應的應用程式打開，比如我們雙擊.doc檔案時，它會知道讓Microsoft Office去打開而不是用PhotoShop去打開這個檔案~
一般來說，常用的視頻檔案格式通常包括了.mpg、.mkv、.wmv和.mp4等，當我們雙擊這些檔案時，它會和我們電腦安裝的視頻播放器關聯，并且打開視頻播放器進行播放~我們可以隨意改擴展名，但是千萬不要以為將.avi改為.mp4，視頻就變成mp4格式了，要想真正的轉換，還需要采用如格式工廠等工具進行轉換，
2、視頻封裝格式
視頻封裝格式是指把編碼器生成的多媒體內容（視頻、音頻和字幕）混合封裝在一起的標準，簡單點講，視頻封裝格式其實就是相當于一種存盤視頻資訊的容器，我們可以往這個容器中嵌入任何形式的資料、各種編碼的視頻和音頻~我們平時看到的.avi、.mpg和.vob這些視頻檔案格式的后綴名即采用相應的視頻封裝格式的名稱，
一般來說，常見的視頻封裝格式主要包括了以下幾種：
（1）AVI格式（檔案后綴為.avi）：Audio Video InterLeaved，音頻視頻交錯格式，這種視頻格式影像質量好，但是體積過于龐大，壓縮標準不統一
（2）DV-AVI格式（檔案后綴為.avi）：Digital Video Format，由索尼、松下、JVC等多家廠商聯合提出的一種家用數字視頻格式
（3）QuickTime File Format（檔案后綴為.mov）：美國Apple公司開發的一種視頻格式，默認的播放器是蘋果的QuickTime，具有較高的壓縮比率和較完美的視頻清晰度
（4）MPGE格式（檔案后綴可以是.mpg、.mpeg、.mpe、.dat、.vob、.asp、.3gp和mp4等）：Moving Picture Experts Group，運動影像專家組格式，MPGE目前包括三個壓縮標準，分別是MPEG-1、MPEG-2和MPEG-4
（5）WMV格式（檔案后綴為.wmv或.asf）：Windows Media Viedo，微軟推出的一種采用獨立編碼方式并且可以直接在網上實時觀看視頻節目的檔案壓縮格式
（6）Real Video格式（檔案后綴為.rm或.rmvb）：Real Networks公司所制定的音頻視頻壓縮規范
（7）Flash Video格式（檔案后綴為.flv）：由Adobe Flash延伸出來的一種流行網路視頻封裝格式
（8）Matroska格式（檔案后綴為.mkv）：一種新的多媒體封裝格式，可以把多種不同編碼的視頻及16潭訓以上不同格式的音頻和語言不同的字幕封裝到一個Matroska Media檔內
3、視頻編碼方式
視頻編碼方式是指能夠對數字視頻進行壓碩訓者解壓縮（視頻編碼）的程式或設備，通常這種壓縮屬于有損資料壓縮，通過特定的壓縮技術，可以將某個視頻格式轉化成另一種視頻格式~從視頻誕生到發展，無疑在追求更高質量的畫質和盡可能低的位元率，下圖主要給出了視頻編碼方式的發展，
從上圖可以看出，目前常見的編碼方式式主要包括了以下幾種：
（1）H.26X系列：包括H.261、H.262、H.263、H.264和H.265
（2）MPEG系列：包括MPEG-1第二部分、MPEG-2第二部分、MPEG-4第二部分和MPEG-4第十部分
（3）其它系列：AMV、AVS、Bink、CineForm、Cinepak、Dirac、VP3、VP5、VP6、VP7、VP8和VP9等
在目前的編碼方式中，最新的就是大家關注的H.265和VP9，不過由于歷史的積累和瀏覽器的支持問題，現在還是以H.264編碼的視頻為主~
綜上所述，其實對于同一種視頻檔案格式，如.mpg檔案，它其實包括MPEG-1、MPEG-2和MPEG-4幾種不同的視頻封裝格式，而對于MPEG-4又可以使用多種視頻編碼格式，因此，視頻的編碼格式才是一個視頻檔案的本質所在，不要簡單的通過檔案格式和封裝格式來區分視頻~
三、部分MP4視頻檔案無法在Chrome下播放的原因
搞清楚了視頻的檔案格式、封裝格式和編碼格式，讓我們再回歸到前面說的那個問題中~前面提到了部分MP4視頻檔案無法在Chrome正常播放的問題，而通過前面的分析，我們可以知道，對于兩個不同的.mp4視頻來說，雖然它們的后綴名是一樣的，但是兩個MP4視頻采用的編碼格式可能是不一樣的，它們可以采用H.264或H.265的編碼格式進行編碼，也可以采用MPEG-4的編碼方式，而對于MP4視頻檔案的播放，Chrome只支持標準的H.264方式編碼，因此如果MP4視頻的編碼格式不是H.264，那么這個視頻檔案就無法正常播放~
那么，為什么Chrome只支持H.264這種編碼方式而不支持所有的視頻編碼方式呢？Google查了一下，網上給出的原因主要是說因為絕大部分的視頻編碼格式都要付專利費的，Google已經購買了H.264編碼格式，而其它的就沒有購買了~因此如果一個MP4視頻不是H.264格式的，那么Chrome也是不支持播放的~
四、解決方案
既然對于MP4視頻檔案來說，Chrome只能支持H.264編碼方式視頻檔案的播放，而由于MP4視頻檔案可能包含多種編碼，因此，較好的解決方案就是對上傳的MP4視頻檔案進行轉碼，將非H.264編碼方式的MP4視頻檔案轉換成H.264編碼方式的視頻，這樣就能夠保證所有的MP4視頻檔案在Chrome上正常播放~
1、ffmpeg轉碼
網上Google了一圈，發現很多方法都是推薦采用ffmpeg工具進行轉碼，通過使用ffmpeg，就可以輕松使用命令列進行視頻轉碼~
如果你的電腦是mac，那么ffmpeg的安裝非常簡單，只需要下面一句命令列就搞定了
brew install ffmpeg
我們也可以通過npm進行安裝ffmpeg，并且在node中使用
npm install ffmpeg //安裝 var ffmpeg = require('ffmpeg');
通過下面的命令，我們就可以輕松的將MP4視頻檔案轉換成H.264編碼方式的視頻
ffmpeg -i input.mp4 -vcodec h264 output.mp4 //h264默認轉碼
然而，在實際的業務中，我們并不能總要求用戶只上傳H.264編碼方式的MP4視頻檔案，更好的方式是能夠實作MP4視頻檔案的自動轉碼而無需用戶自己進行轉碼，因此，最后我們采用了前端MP4視頻編碼格式判斷+后臺視頻檔案轉碼的方案解決~
2、前端MP4視頻編碼格式判斷+后臺視頻檔案轉碼
首先，當用戶上傳MP4檔案時，前端會對MP4視頻檔案的編碼格式進行判斷，如果該視頻檔案是H.264編碼格式，則將事先約定的欄位is_transcode設定為0，告訴后臺無需對該檔案進行轉碼，如果不是H.264編碼格式，則將is_transcode設定為1，告訴后臺需要將該MP4視頻檔案轉換成H.264編碼格式的視頻，
那么，問題又來了，前端怎么進行判斷一個MP4視頻檔案是不是H.264編碼格式呢？在這里，就需要獲取當前視頻編碼的資訊，也就是Codec，并且根據Codec進行視頻編碼格式的判斷，而為了獲取到Codec，我們可以借助現有的一些插件，如mediainfo.js（https://github.com/buzz/mediainfo.js）或mp4box.js（https://github.com/gpac/mp4box.js）進行獲取，而由于medianinfo.js的體積較大，mp4box.js比較輕量，因此實作程序中采用了mp4box.js進行視頻編碼格式的檢測，
為了使用mp4box.js，我們首先需要先進行mp4box.js的安裝
npm install mp4box --save
接著就需要在我們的專案中引入mp4box.js
import mp4box from 'mp4box'
由于在mp4box.js中，如果一個MP4視頻檔案的編碼格式為H.264，則其Codec是會包括avc這個字串的，因此我們可以通過判斷Codec中是否包含"avc"從而進行H.264視頻編碼格式的判斷
示例代碼如下：
var input = document.getElementById("file"); // 獲取上傳的檔案 input.onchange = function() { var file = this.files[0]; var mp4boxfile = MP4Box.createFile(); var is_transcode = 0; mp4boxFile.onReady = function(info){ let mime = info.mime let codec = mime.match(/codecs="(\S*),/)[1] if (codec.indexOf('avc') === -1) { is_transcode = 1; // 需要轉碼 } // 進行檔案上傳操作 ... } if(file){ // 讀取mp4的buffer var reader = new FileReader(); var buffer = reader.readAsArrayBuffer(file); reader.onload = function(e) { var arrayBuffer = e.target.result arrayBuffer.fileStart = 0 mp4boxFile.appendBuffer(arrayBuffer) } } }
最后，當后臺接收到的is_transcode為1時，就將MP4視頻檔案進行轉碼，并且將轉碼后的視頻檔案保存起來，這樣，無論用戶上傳什么編碼格式的MP4視頻檔案，最后都能夠轉換成H.264編碼格式的視頻檔案保存起來，因此，當用戶下次訪問頁面并播放MP4視頻時，就可以看到所有的MP4視頻都能夠在Chrome正常播放啦~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/134956.html
標籤：其他
上一篇：JS-iframe-跨視窗通訊