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

HTML

2021.11.042021.11.05

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

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

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

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

しかし、そこまでの拘りがない限り、以下のようなシンプルな書き方でも事足りかなと個人的には考えています。

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

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

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

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

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