以前は、Webページで音声や動画を再生するのにFlashのような別のソフトが必要でした。今は、HTMLの audio タグと video タグだけで再生できます。この記事では、それぞれの書き方とよく使う属性、形式の指定、字幕、WordPressでの埋め込み方をまとめます。
audio：音声を再生する
<audio src="music.mp3" controls>
お使いのブラウザは音声要素をサポートしていません。
</audio>
src：再生する音声ファイルの場所controls：再生ボタンや音量などの操作パネルを表示する。audioは、これがないと画面に何も表示されない
タグの中の文章は、audio に対応していないとても古いブラウザでだけ表示されます。
video：動画を再生する
<video src="movie.mp4" controls width="640">
お使いのブラウザは動画要素をサポートしていません。
</video>
video は controls がなくても映像の枠は表示されますが、再生や一時停止のボタンが出ないので、読者が操作できません。
スマホではみ出さないようにする
width="640" のように幅を決めると、画面の狭いスマホでははみ出します。CSSで、画面幅に合わせて縮むようにしておきます。
video {
max-width: 100%; /* 画面より広くならない */
height: auto; /* 縦は横に合わせて縮む */
}よく使う属性
| 属性 | 意味 |
|---|---|
controls | 操作パネルを表示する |
autoplay | ページを開いたら自動で再生する |
muted | 音を消した状態で始める |
loop | 最後まで再生したら最初から繰り返す |
poster | 再生する前に表示する画像（video のみ） |
playsinline | iPhoneで、全画面にしないでページの中で再生する（video のみ） |
preload | ページを開いたときにどこまで読み込むか。none（読み込まない）、metadata（長さなどだけ）、auto |
自動再生には muted が必要
今の主なブラウザは、音の出る自動再生を止めます。ページを開いたとたんに音が鳴ると読者が驚くからです。自動で再生したいときは、muted を一緒に付けて、音を消した状態で始めます。iPhoneでページの中で再生させるには playsinline も付けます。
<!-- 背景のように、音なしで自動再生して繰り返す動画 -->
<video src="movie.mp4" autoplay muted loop playsinline></video>source：形式を指定する
src 属性の代わりに source タグを並べると、形式の違うファイルをいくつか用意できます。ブラウザは上から順に見て、再生できる最初のファイルを使います。
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<p>動画を再生できません。</p>
</video>
今は、MP4（H.264）の動画やMP3の音声なら、主なブラウザで再生できます。そのため source は、「再生できないときの保険」というより、WebM のように同じ画質でも小さくなりやすい形式を先に書いて、対応しているブラウザではそちらを使ってもらう、という使い方が中心です。その場合は WebM を上、MP4 を下に書きます。
再生できないときはダウンロードを案内する
タグの中の文章には、「再生できません」だけでなく、ファイルへのリンクを入れておくと親切です。
<video controls>
<source src="movie.mp4" type="video/mp4">
<p>動画を再生できない場合は、<a href="movie.mp4">動画ファイル（MP4）</a>をダウンロードしてご覧ください。</p>
</video>track：字幕を付ける
動画には、track タグで字幕を付けられます。字幕は WebVTT（.vtt）というテキストの形式で用意します。音を出せない場所で見ている人や、耳の聞こえにくい人にも内容が伝わります。
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles-ja.vtt" kind="subtitles" srclang="ja" label="日本語" default>
</video>WEBVTT
00:00:00.000 --> 00:00:03.000
こんにちは。この動画では……
00:00:03.000 --> 00:00:06.000
HTMLの video タグを紹介します。上が subtitles-ja.vtt の中身の例です。始まり --> 終わり の時間と、その間に表示する文字を並べます。
WordPressでは
WordPressでは、「動画」ブロックが video、「音声」ブロックが audio になります。ブロックを選んだときの右側の設定で、自動再生、ループ、ミュート、インライン再生（playsinline）、読み込み（preload）、ポスター画像を選べます。動画ブロックには字幕ファイルを追加する設定もあります。
自宅サーバーで動画を配信するとき
このブログのように自宅サーバーで動いている場合、WordPressに上げた動画は、再生されるたびに自宅のサーバーと回線を使って配信されます。動画は画像よりずっと大きいので、短い動画は圧縮して小さくし、preload="none" か metadata にしておきます。長い動画は、YouTubeなどに上げて埋め込むほうが、サーバーの負担が少なくて済みます（「iframe埋め込み：外部コンテンツ表示のポイント」）。
HTML全体の基本は「HTMLの基本｜タグの書き方とよく使う5つのタグ」で紹介しています。
まとめ
- 音声は
audio、動画はvideo。controlsを付けないと読者が操作できない - 自動再生するなら
mutedを一緒に。iPhoneでページの中で再生するならplaysinline - 動画は CSS の
max-width: 100%でスマホでもはみ出さないようにする sourceで形式の違うファイルを並べられる。字幕はtrackと.vttファイル- 自宅サーバーでは動画は小さく、長い動画は YouTube などに上げて埋め込む
コメント