2021年02月25日

videoタグを使用しても動画(mp4)を再生できない場合の対応方法

こんにちは!SeekNextの佐藤です。
今回はvideoタグを使用しても正常に動かなかった時に私自身がかなり時間をかけてしまったので、備忘録としても記載していこうと思います。

<video>タグの基本的な使い方

<video>
  <source src="mv.webm" type="video/webm">
  <source src="mv.mp4" type="video/mp4">
  <p>動画を使用できるブラウザで閲覧して下さい。</p>
</video>

<video>タグの中に<source>タグを使用することで、動画を出し分けることが可能になります。
また、動画を使用できないブラウザには「動画を使用できるブラウザで閲覧して下さい。」のようにエラーメッセージを出力することも可能です。

しかし、そこまでの拘りがない限り、以下のようなシンプルな書き方でも事足りかなと個人的には考えています。(エラーメッセージくらいは記載しておいても良いかもです。)

<video src="sample.mp4"></video>

MP4のフォーマットには2種類ある!?

ここから本題ですが、動画をHTMLで採用する際に用いられやすいmp4という形式ですが、2種類あります。

MPEG4、H.264のMP4ファイル

mp4には種類(MPEG4、H.264とか)があるので、MPEG4タイプのmp4ファイルはうまく表示されません。(ここでは詳しい動画ファイルの説明は割愛します。)

mp4動画ファイルを適切な形式に変換して<video>タグで使用しよう

結果的には、MPEG-4タイプのmp4を、H.264/AVC タイプのmp4に変えてあげて解決です。

以下のツールで変換し直すだけで、直ります。
https://convertio.co/ja/download/5c0609dbe4166f64b39a4c34670eee9c7fb47a/

<video>タグを問題なく使用しているにもかかわらず、上手く再生できない場合は動画ファイル自体を確認してみて下さい。