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

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

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

問題出在哪

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

解決方法

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

安裝并使用 ffmpeg

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

brew install ffmpeg

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

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

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