やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > HTML > HTML文書をつくる18　音声、動画（audio, video, source, track）

HTML文書をつくる18　音声、動画（audio, video, source, track）

HTML

　音声や動画を埋め込み再生する。

要素一覧

要素 概要
<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
- メタ文字はエスケープする。
- アンパサンドは&amp;、 小なりは&lt;、大なりは&gt;。

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も同じ

対象環境

$ uname -a
Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux