HTML文書をつくる18 音声、動画（audio, video, source, track）
音声や動画を埋め込み再生する。
要素一覧
| 要素 | 概要 |
|---|---|
<video> |
動画 |
<audio> |
音声 |
<source> |
ファイルを指定する |
<track> |
動画や音声のテキストトラックを指定する |
<video>
以下のように使う。src属性値には動画ファイルパス、controls属性は再生・停止・音量などのコントローラを表示する。
<video controls src="video.mp4"></video>
タグ内の要素は、ブラウザが<video>タグに対応していないときの表示内容を書く。
<video><strong>このブラウザはvideoタグに対応していません！</strong></video>
ブラウザが特定のコーデックに対応していない場合もありうる。そこで複数のコーデックを用意しておく。以下のように<source>を使って。
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> </video>
先に書いてあるものほど優先度が高い。
<video>の属性は省略する。
<track>
<video controls src="video.mp4"> <track src="video-text.vtt"> </video>
<track>要素はビデオに表示するテキストを定義した.vttファイルを指定する。
| 属性 | 概要 |
|---|---|
src |
.vttファイルパスを指定する |
default |
デフォルトであることを示す |
kind |
種別を示す |
label |
.vttを一覧するときのタイトル |
srclang |
テキストの言語 BCP 47 |
kind属性値 |
概要 |
|---|---|
subtitles |
理解に必要な翻訳や追加情報。（デフォルト） |
captions |
音声の翻訳やミュートしても理解できるためのテキスト。 |
descriptions |
説明。目が不自由なユーザーや動画を視聴できない場合に。 |
chapters |
ユーザーがメディアリソースの操作を行う際に使用する |
metadata |
スクリプトが使用するトラック情報。 |
.vtt
.vttファイルはビデオに表示するテキストを定義したファイルである。
cue.vtt
WEBVTT 1 00:01.000 --> 00:04.000 - 開始1〜4秒間だけこのテキストを表示します。 2 00:05.000 --> 00:09.000 - 複数行でも - 表示できる 3 00:05.000 --> 00:09.000 - メタ文字はエスケープする。 - アンパサンドは&、 小なりは<、大なりは>。
comment.vtt
WEBVTT - これはコメントです。 NOTE これは一行コメントです。 NOTE これもコメントです。 複数行書けます。
CSSも書ける。
WEBVTT
STYLE
video::cue {
color: black;
}
STYLE
video::cue(b) {
color: red;
}
STYLE
video::cue(foo) {
color: green;
}
00:00:00.000 --> 00:00:10.000
- Hello <b>world</b>.
foo
00:00:00.000 --> 00:00:10.000
- foobar
ほかにもテキストの位置、サイズ、寄せ、書字方向、を指定したり、HTML要素であるb,i,u,ruby,rtや独自タグc,vを使える。
<audio>
<audio controls src="audio.mp3"></audio>
<audio><strong>このブラウザはaudioタグに対応していません！</strong></audio>
<audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> <track src="歌詞.vtt"> </audio>
<video>タグと同じように使う。.vttも同じ
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
$ uname -a Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux
