SYNCER

SYNCER

<video要素> - ビデオ

公開日:

video要素は、動画を再生するための要素です。

概要

名前
video
カテゴリー
Flow content
Phrasing content
Embedded content
Interactive content
Palpable content
配置できる場所
Embedded contentが期待される場所。
コンテンツモデル
src属性がある場合、0個以上のtrack要素と、それに続くTransparent。
src属性がない場合、0個以上のsource要素と、それに続く0個以上のtrack要素と、それに続くTransparent。
video要素、またはaudio要素の祖先になってはいけない。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLVideoElement
デフォルトのスタイル
video {
	object-fit: contain;
}
仕様書
https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element

属性

src

リソースのアドレス。

preload

ユーザーが動画を再生する前の準備として、あらかじめリソースをどの程度読み込んでおくべきか、のヒントをキーワードで指定する。 ユーザーエージェントがこれに従うとは限らない。

none
リソースを読み込まないでおくべき、というヒント。
metadata
メタデータと最初の数フレームだけを読み込んでおくべき、というヒント。
auto
初期値。リソースを読み込んでおいていい、というヒント。

デモを見る

autoplay

この属性を付けると、ブラウザはページを開いた時点で、可能ならば自動的に再生を開始する。論理属性。

デモを見る

loop

この属性を付けると、ループ再生が有効になる。再生が終了しても停止せず、最初から再生し直す。論理属性。

デモを見る

muted

この属性を付けると、デフォルトでミュートになる。論理属性。

デモを見る

controls

この属性を付けると、コントローラーを表示する。論理属性。

デモを見る

crossorigin

この属性を指定すると、リソースの取得がクロスオリジンモード(CORS)で行なわれる。その上で、クッキーなどの情報(クレデンシャル)を送信するか、しないかをキーワードで指定する。列挙属性で、無効な値を指定した場合は初期値が適用される。

anonymous
送信しない。初期値。
use-credentials
送信する。

poster

画像ファイルのアドレスを指定すると、動画を再生する準備ができていない間は、この画像が表示される。

デモを見る

playsinline

モバイル向けの属性。この属性を付けると、動画を再生する時にフルスクリーンにならない。埋め込み状態のまま再生される。論理属性。

デモを見る

width

横幅。

height

高さ。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

src属性で指定

video要素は2つの方法で動画ファイルのアドレスを指定できます。まずはsrc属性に指定する方法です。mp4形式のファイルを指定しておけば、一般的なブラウザの全てに対応できるでしょう。

HTML

<video src="/video/dog.mp4" controls></video>

デモを開く

source要素で指定

複数のフォーマットを用意している場合は、src属性ではなく、source要素を使って各動画ファイルのアドレスを指定します。ブラウザは先頭から順に調査して、再生できるフォーマットが見つかった時点でその動画ファイルの再生を開始します。そのため、指定する順番は重要です。下記の例では、ブラウザはoggフォーマットが再生できるなら.ogvを、そうではなくwebmフォーマットが再生できるなら.webmを、そうではなくmp4フォーマットが再生できるなら.mp4を再生、という順番に処理します。

HTML

<video controls>
	<source src="/video/dog.ogv" type="video/ogg">
	<source src="/video/dog.webm" type="video/webm">
	<source src="/video/dog.mp4" type="video/mp4">
</video>

デモを開く

表紙の画像

poster属性に画像ファイルのアドレスを指定すると、再生前に表紙画像として表示されます。

HTML

<video src="./movie.mp4" poster="./image.jpg" controls></video>

デモを開く

字幕の追加

字幕の作成

動画に字幕を追加できます。それには字幕ファイルを用意する必要があります。.vttという拡張子のテキストファイルを作成して下さい。

字幕ファイル (subtitles-ja.vtt)

WEBVTT

id1
00:00:00.000 --> 00:00:00.750
愛犬のハナです。

id2
00:00:00.750 --> 00:00:01.500
黒柴です。

id3
00:00:01.500 --> 00:00:03.000
よろしくお願いします。

デモを開く

字幕ファイルの作成ルールは次の通りです。idはJavaScriptで字幕を操作する時に必要となるものです。操作の予定がないなら適当な値で大丈夫です。期間はマイクロ秒単位で指定します。上記の例だと、最初のキューが0秒から0.75秒の期間だけ表示、次のキューが0.75秒から1.5秒の期間だけ表示、最後のキューが1.5秒から3秒の期間だけ表示という指定になっています。期間は繋げる必要はありません。

  • 最初の行にWEBVTTと記述する。
  • 「任意のid名、字幕を表示する期間、字幕テキスト」の3行が1セットとして1つのキューになる。
  • キューを間に1行空けて、任意の数だけ記述する。
  • 字幕ファイルは、text/vttのMIMEタイプで配信すること。

字幕ファイルのMIMEタイプはtext/vttでなければいけません。サーバーによっては、MIMEタイプの設定がないかもしれません。任意で設定しておきましょう。Apacheの場合は.htaccessに次の記述を追加して下さい。字幕ファイルに直接アクセスして、指定したMIMEタイプで配信されているか確認して下さい。

.htaccess

# 拡張子がvttの時はtext/vttとして配信する
AddType text/vtt .vtt

字幕の指定

動画に字幕ファイルを紐付けるには、子要素にtrack要素を配置して下さい。src属性には字幕ファイルのアドレス、kind属性には字幕を表すsubtitles、srclang属性には言語コード、そしてlabel属性には字幕を選択する時などに表示されるラベルを指定して下さい。字幕は言語別や方言別などにして複数用意することができます。

HTML

<!-- src属性の場合 -->
<video src="/video/dog.mp4" controls>
	<!-- track要素が先頭 -->
	<track kind="subtitles" src="./subtitles-ja.vtt" srclang="ja" label="日本語">
	<track kind="subtitles" src="./subtitles-en.vtt" srclang="en" label="English">
</video>

<!-- source要素の場合 -->
<video controls>
	<!-- source要素が先頭 -->
	<source src="/video/dog.ogv" type="video/ogg">
	<source src="/video/dog.webm" type="video/webm">
	<source src="/video/dog.mp4" type="video/mp4">

	<!-- source要素の直後に配置 -->
	<track kind="subtitles" src="./subtitles-ja.vtt" srclang="ja" label="日本語">
	<track kind="subtitles" src="./subtitles-en.vtt" srclang="en" label="English">
</video>

デモを開く

フォールバック

video要素に非対応で動画プレーヤーを表示できないブラウザ向けに、代わりに表示するコンテンツを用意できます。video要素の一番最後に、画像でもテキストでもどちらでもいいので配置しましょう。これはあくまでもvideo要素に対応していないブラウザ向けであり、動画ファイルのアドレスが間違っていて再生できないなどの場合に表示されるものではありません。

HTML

<!-- src属性の場合 -->
<video src="/video/dog.mp4" controls>
	<!-- 要素の最後にフォールバックコンテンツを配置 -->
	<p>お使いのブラウザでは動画再生に対応していません…。</p>
</video>

<!-- source要素の場合 -->
<video controls>
	<!-- source要素が先頭 -->
	<source src="/video/dog.ogv" type="video/ogg">
	<source src="/video/dog.webm" type="video/webm">
	<source src="/video/dog.mp4" type="video/mp4">

	<!-- 要素の最後にフォールバックコンテンツを配置 -->
	<p>お使いのブラウザでは動画再生に対応していません…。</p>
</video>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】<video要素> - ビデオ</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/video/">
		<style>
			body {
				background-color: #fff ;
			}

			video {
				width: 600px ;
				max-width: 80% ;
			}
		</style>
	</head>
	<body>

<p>video要素は、動画を再生するための要素です。</p>

<video src="/video/dog.mp4" poster="/video/dog.jpg" controls></video>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>