HTMLのvideoタグを使った動画が再生されない場合の原因と対処法

HTMLのvideoタグを使うことでブラウザ上で簡単に動画が再生できますが、割と再生されない現象が起きる問題も発生するので、その対処法です。

 

動画のファイルサイズに注意する

使用する動画のファイルサイズには気をつけましょう。

容量が大きいと表示が遅くなって離脱率を高めてしまう原因になります。しかし、圧縮しすぎると今度は画質が悪くなって見栄えが悪くなったりします。

目安となるファイルサイズは大きくても3MB程度、できれば500KB〜1MBあたりに抑えられればいい感じです。

 

また、動画形式は以下のようなものを用意すれば十分対応できるでしょう。

  • .mp4
  • .ogv
  • .webm

 

videoタグを使う

動画を用意できたらvideoタグを使ってブラウザ上で表示させます。

<video autoplay loop muted controls poster="***.jpg">
  <source src="***.mp4" type="video/mp4" />
  <source src="***.ogv" type="video/ogg" />
  <source src="***.webm" type="video/webm" />
  <img src="***.jpg" />
</video>

 

videoタグについている属性は以下の通りです。

  • autoplay:読み込みと同時に自動で再生する
  • loop:動画をループ再生する
  • muted:ミュート(無音)で再生する
  • controls:コントロールオプションを表示(YouTubeみたいに音量制御や一時停止などのオプションが追加されます)
  • poster=”***.jpg”:動画が読み込まれない場合、代わりに表示する画像を指定

他にもwidth属性なども指定することができます。

 

sourceタグには動画のパスを記述します。上から順に再生できる動画形式をブラウザが自動で探してくれます。

また、最後のimgタグにはvideoタグがで動画が再生されなかった場合に表示される画像になっています。poster属性で表示される画像ですね。

 

動画が再生されない場合

videoタグを使った動画がうまく再生されない場合はサーバー側の設定が必要になります。

.htaccessに以下のコードを追加しましょう。

AddType video/mp4 .mp4
AddType video/ogg .ogv
AddType video/webm .webm

 

ただし、サーバーによってはAddTypeを禁止しているところもたまにあるので注意しましょう。

 

まとめ

HTMLだけでもvideoタグを使って動画を再生することは可能ですが、何かと面倒なことが結構ありますね…

JavaScriptを使って動画を再生させる方法もあるので、気になった人は調べてみてください。