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>