【HTML】video要素

HTML5で導入されたvideo要素

タグ

<video></video>

使い道

Web上で動画を再生できる。youtubeなど動画投稿・視聴サービスや、企業のHPでも背景に動画を使うなど、様々な活用がされている。また、getUserMediaを使ってデバイスからカメラにアクセスしてその映像を録画したり、送信したりすることもできる。
今後もWeb上で動画を扱うケースは増えてくると思う。

属性

autoplay
この属性が指定されている場合、再生可能状態になると自動的に再生される。
controls
この属性が指定されている場合、再生・一時停止・停止・音量などのコントロールが表示される。
height
動画の表示高さを設定する。
loop
この属性が指定されている場合、動画が最後まで再生されると最初に戻って自動で再生される。
muted
この属性が指定されている場合、動画の初期状態が消音で再生される。
poster
動画が再生されない場合にここで指定されている画像が表示される。
preload
動画の事前ダウンロードの範囲を決める。

none
動画を事前にダウンロードしない。
metadata
動画のメタデータをダウンロードする。
auto
動画の再生有無にかかわらず、ダウンロードする。
src
動画のソースのURLを設定する。
width
動画の表示幅を設定する。

サンプル

<video autoplay controls loop muted poster="cat.png" preload="auto" src="shinkansen.mp4" height="240px" width="360px" ></video>

<video controls muted poster="cat.png" preload="metadata" src="shinkansen.mp4" ></video>