LoginSignup
11
11

More than 5 years have passed since last update.

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

Posted at

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>

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

11
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
11