More than 5 years have passed since last update.

iPadではvideoタグの利用にcontrolが必須？

Posted at 2015-05-03

HTML5では、mp4などのビデオファイルを再生するとき、次のvideoタグが利用できます。

再生用HTML

<video id="movie">
  <source src="動画ファイル">
  このブラウザでは動画を再生できません。
</video>

このままの表記で、Javascriptなどから、$("#movie")[0].play();とすると、どうがを再生できます(iOSで動画を自動再生させる場合は、ひと工夫必要です。今のiOSでもこのままの記載で大丈夫なのかどうかは不明(効いてるような気もするし、効いてないような気もする挙動))。

ただし、iOSではどうもこのコントロールが画面に表示されない模様。なぜだろうと思うと、controlの指定が必須（？）みたい。

再生用HTML

<video id="movie" controls="controls">
  <source src="動画ファイル">
  このブラウザでは動画を再生できません。
</video>

ついでに、iOSでvideoタグが表示されてから、実際に再生するまでの間に表示させる画像は、videoタグのposter属性で指定可能です。

再生用HTML

<video id="movie" controls="controls" poster="画像ファイル">
  <source src="動画ファイル">
  このブラウザでは動画を再生できません。
</video>

面倒なので、↓のような真っ黒画像をあらかじめ作っておくと、色々なところに使い回せて便利です。