昨天遇到了這樣一個(gè)問(wèn)題，我打算使用HTML5的video標(biāo)簽簡(jiǎn)單的在網(wǎng)頁(yè)上插入一個(gè)MP4視頻，類似這樣

<video preload="none" controls>
  <source src="video.mp4" type="video/mp4">
</video>

但是在網(wǎng)頁(yè)中我點(diǎn)擊播放的時(shí)候，卻發(fā)現(xiàn)只有聲音而沒(méi)有圖像。不過(guò)我用電腦中的視頻播放器播放這段視頻還是可以看到圖像的。那么問(wèn)題來(lái)了，這個(gè)鍋誰(shuí)來(lái)背？

問(wèn)題出在哪

經(jīng)過(guò)一些搜索得知，其實(shí)根本的問(wèn)題是雖然大家都是.mp4后綴的文件，但是編碼方式不同，而video標(biāo)簽的標(biāo)準(zhǔn)是用H.264方式編碼視頻的MP4文件（當(dāng)然video標(biāo)簽還可以播放WebM和OGG格式的文件，這里就不多說(shuō)了），而我之前使用的視頻文件是Xvid編碼的MP4文件,所以只能播放出音頻而不能看到圖像

解決方法

既然知道了問(wèn)題出在哪，接下來(lái)就要想辦法把我現(xiàn)有的視頻文件轉(zhuǎn)碼成H.264編碼的文件。
我使用的是Mac, 而且之前并沒(méi)有裝過(guò)什么視頻轉(zhuǎn)碼的應(yīng)用，搜索了一下發(fā)現(xiàn)Mac自帶一個(gè)功能叫“編碼所選視頻文件”，我嘗試著使用了一下。發(fā)現(xiàn)然并卵，生成的文件就像我在瀏覽器中播放的一樣，只有聲音沒(méi)有圖像，大概這個(gè)功能更適合吧其他格式的文件轉(zhuǎn)換成MP4吧。
經(jīng)過(guò)進(jìn)一步搜索，發(fā)現(xiàn)了ffmpeg這個(gè)神器，使用這個(gè)命令行的工具，最終完成了視頻編碼的轉(zhuǎn)換，下面詳細(xì)介紹一下轉(zhuǎn)換的方法

安裝并使用 ffmpeg

我使用的是Mac，并且安裝了homebrew，所以可以直接通過(guò)homebrew安裝ffmpeg（附上一個(gè)homebrew的?官網(wǎng)）

brew install ffmpeg

其實(shí)ffmpeg的指令有很多，想要詳細(xì)了解可以參見(jiàn)ffmpeg參數(shù)中文詳細(xì)解釋，這里我只需要把一個(gè)其他編碼格式的MP4文件轉(zhuǎn)換成H.264編碼的MP4文件，具體指令如下

ffmpeg -i input.mp4 -vcodec h264 output.mp4

自行替換input和output文件名就可以了，其實(shí)這里input文件還可以是其他格式的視頻文件，ffmpeg可以自動(dòng)識(shí)別轉(zhuǎn)換的方式，非常便利！
經(jīng)過(guò)上述轉(zhuǎn)換，使用輸出的文件在Chrome上播放就沒(méi)有問(wèn)題了