|
H5的video標(biāo)簽讓前端開(kāi)發(fā)者用一行代碼就可以實(shí)現(xiàn)視頻和音頻的播放，然而，有時(shí)候我們會(huì)突然發(fā)現(xiàn)，某些Mp4格式的視頻在Chrome下居然無(wú)法正常播放？這究竟是什么原因呢？這篇文章主要分析了部分Mp4文件在Chrome下無(wú)法正常播放的原因，最后，將會(huì)給出相應(yīng)的解決方案~ 一、先從video標(biāo)簽講起在2000年代初期到后期，網(wǎng)絡(luò)上的視頻播放主要依靠Flash插件，這是因?yàn)楫?dāng)時(shí)沒(méi)有其它方法可以在瀏覽器上流式傳輸視頻，然而，并非所有瀏覽器都擁有相同的插件，同時(shí)，如果用戶如果沒(méi)有安裝Flash插件，則無(wú)法播放任何視頻 為了填補(bǔ)這個(gè)空白，WHATWG開(kāi)始研究HTML標(biāo)準(zhǔn)的新版本，并在HTML5中規(guī)定了一種通過(guò)video標(biāo)簽來(lái)包含視頻的標(biāo)準(zhǔn)方法。在HTML5中，在頁(yè)面中播放視頻非常簡(jiǎn)單，只需要在頁(yè)面中添加具有很少屬性的視頻標(biāo)簽即可~ <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等瀏覽器中都已經(jīng)支持<video>標(biāo)簽，同時(shí)，<video>也能夠支持MP4、WebM和Ogg等不同視頻格式文件的播放，因此，采用video標(biāo)簽在Web站點(diǎn)實(shí)現(xiàn)視頻的播放已經(jīng)成為了開(kāi)發(fā)者的首選~ 然而，前不久在做一個(gè)項(xiàng)目時(shí)，發(fā)現(xiàn)在Chrome下有些MP4視頻文件居然不能正常播放了?。。?！在這個(gè)項(xiàng)目中，主要包括了教師端和學(xué)生端，在教師端中，老師可以上傳MP4格式的視頻作為課件，而在學(xué)生端中，學(xué)生可以打開(kāi)視頻進(jìn)行學(xué)習(xí)。當(dāng)我用Chrome登錄到學(xué)生端時(shí)，可以看到很多課程列表，接著，我打開(kāi)了一個(gè)MP4課件進(jìn)行學(xué)習(xí)
嗯~這個(gè)視頻看起來(lái)挺正常的呀，于是我又選擇了另一個(gè)MP4視頻進(jìn)行播放~
咦？怎么這個(gè)MP4視頻在播放時(shí)不能看到圖像而只能聽(tīng)到聲音了？于是我又打開(kāi)了IE，發(fā)現(xiàn)這個(gè)視頻在IE中居然又可以正常播放了！
明明都是MP4視頻格式的文件，為什么在Chrome中一些MP4格式的視頻就不能正常播放了？要想弄清楚里面的原因，還需要先從視頻的文件格式、封裝格式和編碼方式講起~
二、視頻格式及編碼方式簡(jiǎn)介1、視頻文件格式在Windows系統(tǒng)中，我們所創(chuàng)建的文件都帶有后綴，如.doc等，Windows設(shè)置后綴名的目的是讓系統(tǒng)中的應(yīng)用程序來(lái)識(shí)別并關(guān)聯(lián)這些文件，讓相應(yīng)的文件由相應(yīng)的應(yīng)用程序打開(kāi)，比如我們雙擊.doc文件時(shí)，它會(huì)知道讓Microsoft Office去打開(kāi)而不是用PhotoShop去打開(kāi)這個(gè)文件~ 一般來(lái)說(shuō)，常用的視頻文件格式通常包括了.mpg、.mkv、.wmv和.mp4等，當(dāng)我們雙擊這些文件時(shí)，它會(huì)和我們電腦安裝的視頻播放器關(guān)聯(lián)，并且打開(kāi)視頻播放器進(jìn)行播放~我們可以隨意改擴(kuò)展名，但是千萬(wàn)不要以為將.avi改為.mp4，視頻就變成mp4格式了，要想真正的轉(zhuǎn)換，還需要采用如格式工廠等工具進(jìn)行轉(zhuǎn)換。 2、視頻封裝格式視頻封裝格式是指把編碼器生成的多媒體內(nèi)容（視頻、音頻和字幕）混合封裝在一起的標(biāo)準(zhǔn)。簡(jiǎn)單點(diǎn)講，視頻封裝格式其實(shí)就是相當(dāng)于一種存儲(chǔ)視頻信息的容器，我們可以往這個(gè)容器中嵌入任何形式的數(shù)據(jù)、各種編碼的視頻和音頻~我們平時(shí)看到的.avi、.mpg和.vob這些視頻文件格式的后綴名即采用相應(yīng)的視頻封裝格式的名稱。 一般來(lái)說(shuō)，常見(jiàn)的視頻封裝格式主要包括了以下幾種： （1）AVI格式（文件后綴為.avi）：Audio Video InterLeaved，音頻視頻交錯(cuò)格式，這種視頻格式圖像質(zhì)量好，但是體積過(guò)于龐大，壓縮標(biāo)準(zhǔn)不統(tǒng)一 （2）DV-AVI格式（文件后綴為.avi）：Digital Video Format，由索尼、松下、JVC等多家廠商聯(lián)合提出的一種家用數(shù)字視頻格式 （3）QuickTime File Format（文件后綴為.mov）：美國(guó)Apple公司開(kāi)發(fā)的一種視頻格式，默認(rèn)的播放器是蘋(píng)果的QuickTime，具有較高的壓縮比率和較完美的視頻清晰度 （4）MPGE格式（文件后綴可以是.mpg、.mpeg、.mpe、.dat、.vob、.asp、.3gp和mp4等）：Moving Picture Experts Group，運(yùn)動(dòng)圖像專家組格式，MPGE目前包括三個(gè)壓縮標(biāo)準(zhǔn)，分別是MPEG-1、MPEG-2和MPEG-4 （5）WMV格式（文件后綴為.wmv或.asf）：Windows Media Viedo，微軟推出的一種采用獨(dú)立編碼方式并且可以直接在網(wǎng)上實(shí)時(shí)觀看視頻節(jié)目的文件壓縮格式 （6）Real Video格式（文件后綴為.rm或.rmvb）：Real Networks公司所制定的音頻視頻壓縮規(guī)范 （7）Flash Video格式（文件后綴為.flv）：由Adobe Flash延伸出來(lái)的一種流行網(wǎng)絡(luò)視頻封裝格式 （8）Matroska格式（文件后綴為.mkv）：一種新的多媒體封裝格式，可以把多種不同編碼的視頻及16條或以上不同格式的音頻和語(yǔ)言不同的字幕封裝到一個(gè)Matroska Media檔內(nèi) 3、視頻編碼方式視頻編碼方式是指能夠?qū)?shù)字視頻進(jìn)行壓縮或者解壓縮（視頻編碼）的程序或設(shè)備，通常這種壓縮屬于有損數(shù)據(jù)壓縮，通過(guò)特定的壓縮技術(shù)，可以將某個(gè)視頻格式轉(zhuǎn)化成另一種視頻格式~從視頻誕生到發(fā)展，無(wú)疑在追求更高質(zhì)量的畫(huà)質(zhì)和盡可能低的比特率，下圖主要給出了視頻編碼方式的發(fā)展。 從上圖可以看出，目前常見(jiàn)的編碼方式式主要包括了以下幾種： （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等 在目前的編碼方式中，最新的就是大家關(guān)注的H.265和VP9，不過(guò)由于歷史的積累和瀏覽器的支持問(wèn)題，現(xiàn)在還是以H.264編碼的視頻為主~ 綜上所述，其實(shí)對(duì)于同一種視頻文件格式，如.mpg文件，它其實(shí)包括MPEG-1、MPEG-2和MPEG-4幾種不同的視頻封裝格式，而對(duì)于MPEG-4又可以使用多種視頻編碼格式，因此，視頻的編碼格式才是一個(gè)視頻文件的本質(zhì)所在，不要簡(jiǎn)單的通過(guò)文件格式和封裝格式來(lái)區(qū)分視頻~
三、部分MP4視頻文件無(wú)法在Chrome下播放的原因搞清楚了視頻的文件格式、封裝格式和編碼格式，讓我們?cè)倩貧w到前面說(shuō)的那個(gè)問(wèn)題中~前面提到了部分MP4視頻文件無(wú)法在Chrome正常播放的問(wèn)題。而通過(guò)前面的分析，我們可以知道，對(duì)于兩個(gè)不同的.mp4視頻來(lái)說(shuō)，雖然它們的后綴名是一樣的，但是兩個(gè)MP4視頻采用的編碼格式可能是不一樣的，它們可以采用H.264或H.265的編碼格式進(jìn)行編碼，也可以采用MPEG-4的編碼方式。而對(duì)于MP4視頻文件的播放，Chrome只支持標(biāo)準(zhǔn)的H.264方式編碼。因此如果MP4視頻的編碼格式不是H.264，那么這個(gè)視頻文件就無(wú)法正常播放~ 那么，為什么Chrome只支持H.264這種編碼方式而不支持所有的視頻編碼方式呢？Google查了一下，網(wǎng)上給出的原因主要是說(shuō)因?yàn)榻^大部分的視頻編碼格式都要付專利費(fèi)的，Google已經(jīng)購(gòu)買了H.264編碼格式，而其它的就沒(méi)有購(gòu)買了~因此如果一個(gè)MP4視頻不是H.264格式的，那么Chrome也是不支持播放的~
四、解決方案既然對(duì)于MP4視頻文件來(lái)說(shuō)，Chrome只能支持H.264編碼方式視頻文件的播放，而由于MP4視頻文件可能包含多種編碼，因此，較好的解決方案就是對(duì)上傳的MP4視頻文件進(jìn)行轉(zhuǎn)碼，將非H.264編碼方式的MP4視頻文件轉(zhuǎn)換成H.264編碼方式的視頻，這樣就能夠保證所有的MP4視頻文件在Chrome上正常播放~ 1、ffmpeg轉(zhuǎn)碼網(wǎng)上Google了一圈，發(fā)現(xiàn)很多方法都是推薦采用ffmpeg工具進(jìn)行轉(zhuǎn)碼，通過(guò)使用ffmpeg，就可以輕松使用命令行進(jìn)行視頻轉(zhuǎn)碼~ 如果你的電腦是mac，那么ffmpeg的安裝非常簡(jiǎn)單，只需要下面一句命令行就搞定了 brew install ffmpeg 我們也可以通過(guò)npm進(jìn)行安裝ffmpeg，并且在node中使用 npm install ffmpeg //安裝 var ffmpeg = require('ffmpeg'); 通過(guò)下面的命令，我們就可以輕松的將MP4視頻文件轉(zhuǎn)換成H.264編碼方式的視頻 ffmpeg -i input.mp4 -vcodec h264 output.mp4 //h264默認(rèn)轉(zhuǎn)碼 然而，在實(shí)際的業(yè)務(wù)中，我們并不能總要求用戶只上傳H.264編碼方式的MP4視頻文件，更好的方式是能夠?qū)崿F(xiàn)MP4視頻文件的自動(dòng)轉(zhuǎn)碼而無(wú)需用戶自己進(jìn)行轉(zhuǎn)碼，因此，最后我們采用了前端MP4視頻編碼格式判斷+后臺(tái)視頻文件轉(zhuǎn)碼的方案解決~ 2、前端MP4視頻編碼格式判斷+后臺(tái)視頻文件轉(zhuǎn)碼首先，當(dāng)用戶上傳MP4文件時(shí)，前端會(huì)對(duì)MP4視頻文件的編碼格式進(jìn)行判斷。如果該視頻文件是H.264編碼格式，則將事先約定的字段is_transcode設(shè)置為0，告訴后臺(tái)無(wú)需對(duì)該文件進(jìn)行轉(zhuǎn)碼。如果不是H.264編碼格式，則將is_transcode設(shè)置為1，告訴后臺(tái)需要將該MP4視頻文件轉(zhuǎn)換成H.264編碼格式的視頻。 那么，問(wèn)題又來(lái)了，前端怎么進(jìn)行判斷一個(gè)MP4視頻文件是不是H.264編碼格式呢？在這里，就需要獲取當(dāng)前視頻編碼的信息，也就是Codec，并且根據(jù)Codec進(jìn)行視頻編碼格式的判斷。而為了獲取到Codec，我們可以借助現(xiàn)有的一些插件，如mediainfo.js（https://github.com/buzz/mediainfo.js）或mp4box.js（https://github.com/gpac/mp4box.js）進(jìn)行獲取，而由于medianinfo.js的體積較大，mp4box.js比較輕量，因此實(shí)現(xiàn)過(guò)程中采用了mp4box.js進(jìn)行視頻編碼格式的檢測(cè)。 為了使用mp4box.js，我們首先需要先進(jìn)行mp4box.js的安裝 npm install mp4box --save 接著就需要在我們的項(xiàng)目中引入mp4box.js import mp4box from 'mp4box' 由于在mp4box.js中，如果一個(gè)MP4視頻文件的編碼格式為H.264，則其Codec是會(huì)包括avc這個(gè)字符串的，因此我們可以通過(guò)判斷Codec中是否包含"avc"從而進(jìn)行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; // 需要轉(zhuǎn)碼 } // 進(jìn)行文件上傳操作 ... } 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) } } } 最后，當(dāng)后臺(tái)接收到的is_transcode為1時(shí)，就將MP4視頻文件進(jìn)行轉(zhuǎn)碼，并且將轉(zhuǎn)碼后的視頻文件保存起來(lái)，這樣，無(wú)論用戶上傳什么編碼格式的MP4視頻文件，最后都能夠轉(zhuǎn)換成H.264編碼格式的視頻文件保存起來(lái)，因此，當(dāng)用戶下次訪問(wèn)頁(yè)面并播放MP4視頻時(shí)，就可以看到所有的MP4視頻都能夠在Chrome正常播放啦~ |
|
|
