<video>要素の使い方・サンプルコード
Sara
目次
<video>
<video>要素は、文書中に動画ファイルを読み込みます。
デモ：video要素
属性
autoplay
音声ファイルのダウンロードが完了していなくても、再生可能になった時点で自動的に再生します。論理属性です。
一部のブラウザ（Chrome, Opera）では autoplay を有効にするには muted 属性が必要になります。
<video controls autoplay muted src="sample.mp4"></video>controls
動画ファイルのコントロール機能（再生・一時停止・音量・再生位置）を表示します。論理属性です。
<video controls src="sample.mp4"></video>crossorigin
オリジンをまたいでリクエストを送信する CORS (Cross-Origin Resource Sharing) で動画を取得する場合に、ユーザ認証を必要とするかどうかを指定します。
| 値 | |
|---|---|
| anonymous（初期値） | ユーザ認証は不要 |
| use-credentials | Cookie, 証明書などの送信が必要 |
height
動画ファイルの高さをピクセル値で指定します。
<video controls src="sample.mp4" height="240"></video>loop
動画ファイルをループ再生します。論理属性です。
<video controls loop src="sample.mp4"></video>muted
動画ファイルを再生したときに音量をミュート（消音）にします。論理属性です。
<video controls muted src="sample.mp4"></video>preload
動画ファイルやメタデータを事前に読み込んでおくかを指定します。ブラウザによって動きが異なります。
| 値 | |
|---|---|
| auto | 動画ファイル全体を読み込んでおきます。 |
| metadata | 動画ファイルのメタデータ（長さ・サイズなど）を読み込んでおきます。 |
| none | 事前に何も読み込みません。 |
playsinline
動画ファイルをインライン（要素の再生エリア内）で再生するかを指定します。（フルスクリーンでの再生を指示するものではありません。）論理属性です。
<video controls playsinline src="sample.mp4" width="480"></video>playsinline なし
playsinline あり
poster
動画ファイルのダウンロード中に表示される画像の URL を指定します。
この属性を指定しない場合、最初のフレームが利用可能になるまで何も表示されません。
<video controls src="sample.mp4" poster="cover.jpg"></video>src
動画ファイルの URL を指定します。
<video controls src="sample.mp4"></video>width
動画ファイルの幅をピクセル値で指定します。
<video controls src="sample.mp4" width="480"></video>グローバル属性
全ての HTML 要素に共通して使用できるグローバル属性はこちら
使用例
HTML
<video controls src="sample.mp4" width="480">このブラウザではビデオを再生できません。
<a href="#">こちらからダウンロード</a>してお楽しみください。</video>実行結果
対応ブラウザ
関連するタグ
Subscribe
0 Comments
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
>> 詳しいプロフィールはこちら
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
>> 詳しいプロフィールはこちら
