video
<video> は HTML 文書内に動画を埋め込むことができます。
- 分類
- フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ。controls 属性を持つ場合は対話型コンテンツ、知覚可能コンテンツ
- 内包できるもの
- src 属性を持つ場合：<track> 要素とそれに続くメディア要素を含まない透過的コンテンツ
それ以外：<source> 要素、<track> 要素、メディアを含まない透過的コンテンツ
属性
- autoplay
- 自動再生
- autoPictureInPicture
- ピクチャインピクチャモード
- buffered
- バッファリング時間読み取り
- controls
- コントロールの表示
- controlslist=””
- いくつかのコントロールを無効化
- crossorigin=””
- 別ドメイン上のリソースの扱い方法
- currentTime
- 現在の再生位置を秒単位で表示
- disablePictureInPicture
- ピクチャインピクチャメニューを非表示
- disableRemotePlayback
- リモート再生を無効化
- duration
- メディアの再生時間を秒単位で表示
- loop
- ループ再生
- muted
- 消音
- poster=””
- 動画の読み込み時に表示する画像
- preload=””
- ファイルの先読み
- src=””
- ファイルの URL を指定
- width=””
- メディアの幅（ピクセル指定）
- height=””
- メディアの高さ（ピクセル指定）
自動再生
autoplay 属性はメディアの自動再生を指定します。ページ読み込み完了時自動的に再生されます。
<video src="video.mp4" autoplay></video>ピクチャインピクチャモード
この属性が指定されると、ユーザーが動画の再生中に他のページやアプリに切り替えた際に自動的にピクチャインピクチャモード（小画面）に切り替わります。
<video src="video.mp4" autoPictureInPicture></video>コントロールの表示
controls 属性は再生・停止・ボリューム等、操作ボタンを表示します。
<video src="video.mp4" controls></video>いくつかのコントロールを無効化
controlslist 属性はいくつかの操作ボタンを選択的し無効化することが可能です。例えば動画のダウンロードボタンを消したい場合に使用します。
<video src="video.mp4" controlslist="nodownload"></video>指定できる値は次の通りです。
- nodownload
- nofullscreen
- noremoteplayback
別ドメイン上のリソースの扱い方法
crossorigin 属性は別のドメインのリソースを利用する際のルールを指定します。オリジン間リソース共有または CORS （Cross-Origin Resource Sharing / クロスドメイン通信）と呼ばれる、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。
- anonymous
- 認証を使用しない
<video src="video.mp4" crossorigin="anonymous"></video> - user-credentials
- 認証を利用する
<video src="video.mp4" crossorigin="user-credentials"></video>
ループ再生
loop 属性は音声のループ再生を指定します。音声の再生完了後自動的に再生が繰り返されます。
<video src="video.mp4" loop></video>消音
loop 属性は音声のループ再生を指定します。音声の再生完了後自動的に再生が繰り返されます。
<video src="video.mp4" muted></video>動画の読み込み時に表示する画像
動画の読み込み時（ダウンロード中）に表示させる画像の URL を指定します。この属性を指定しなかった場合、動画が読み込まれるまでは何も表示されず、読み込みが完了すると最初のフレームが表示されます。
ファイルの先読み
preload 属性は先読みする情報を指定します。
- none
- 先読みしない
<video src="video.mp4" preload="none"></video> - metadata
- 音声のメタデータ（再生時間、容量等）を先読みする
<video src="video.mp4" preload="metadata"></video> - auto
- 全ての情報を先読みする
<video src="video.mp4" preload="auto"></video>
ファイルの URL を指定
src 属性を指定すると任意のメディアファイルを読み込むことが出来ます。この属性は省略可能です。別の方法で指定するには <video> 内で <source> を使用します。
<video src="video.mp4"></video>