VIDEO LESSON

HTMLのvideoタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04HTMLタグ編の二本目は、ビデオタグです。
0:07これは、動画ファイルをウェブページの中に埋め込み、その場で再生できるようにするタグです。
0:14以前は専用のプラグインが必要でしたが、今はタグを一つ置くだけで、再生や一時停止の仕組みをブラウザーが用意してくれます。
0:23記事では、教材動画を操作できる状態で提供する場面を例にしています。
0:28今回は、主な属性と字幕の付け方、自動再生に頼らない作り方を、初心者向けに順番に解説します。
0:35動画は文字や画像とは違う伝わり方ができるので、操作の手順や雰囲気を伝えたい場面で特に力を発揮します。
0:43基本の書き方です。
0:45ビデオタグは、開始タグと終了タグを向かい合わせに書きます。
0:51その中に、動画ファイルを指定します。
0:55ここで一番大切なのが、コントロールズという属性です。
1:01これは値を持たない真偽属性で、書くだけで、再生ボタンや進み具合を示すバー、
1:08音量調整といった、ブラウザー標準の操作画面が表示されます。
1:15逆にこれを付けないと、見ている人が再生も停止もできない動画になりかねません。
1:23特別な理由がない限り、まずはコントロールズを付ける、と覚えてください。
1:31真偽属性は、書けば有効、書かなければ無効という仕組みで、値を書くものではない点も一緒に覚えておきましょう。
1:42動画ファイルの指定方法は二通りあります。
1:45一つ目は、ビデオタグ自身にエスアールシー属性を書いて、一つのファイルを直接指定する方法で、
1:49シンプルです。
1:53二つ目は、中にソースという子要素を置き、そこにファイルとタイプ属性で形式を指定する方法です。
1:59ソース要素なら複数の候補を並べることもでき、ブラウザーは対応できる形式を選んで再生します。
2:06記事の例では、ソース要素を使う書き方が採用されています。
2:10ファイルのパスが間違っていると再生できないので、保存場所と名前はよく確認しましょう。
2:16どちらの書き方でも結果は同じですが、形式を分けたいときや候補を増やしたいときはソース要素の方が柔軟です。
2:24次に、ポスターとプリロードです。
2:26ポスターは、再生が始まる前に表示しておく画像のことです。
2:30動画の内容が伝わる一枚を設定すると、見ている人が何の動画か判断しやすくなります。
2:36プリロードは、ページを開いたときに、動画をどこまで先読みするかというヒントで、
2:40ノン、メタデータ、オートの三つから選びます。
2:45メタデータなら、長さやサイズなどの情報だけを読みます。
2:49ただし、これはあくまでヒントで、ブラウザーが必ず従うとは限らない点も、記事で触れられています。
2:56動画が重いページでは、先読みしすぎると通信量が増えるので、ページ全体の重さとのバランスも考えて選びます。
3:03自動再生に関わる属性をまとめて確認します。
3:07オートプレイは、ページを開くと同時に再生を始める指定ですが、音が出る動画の自動再生は、
3:11多くのブラウザーで制限されます。
3:16そのため、自動再生させたい場合は、ミューテッドで最初は音を消しておく組み合わせがよく使われます。
3:24プレイズインラインは、スマートフォンで全画面ではなく、ページの中でそのまま再生するための指定です。
3:32ループは、終わったら最初に戻って繰り返します。
3:35記事の注意通り、自動再生だけに頼らず、利用者が自分で再生できる構成を基本にしましょう。
3:42音が突然出る体験は利用者を驚かせます。
3:45自動再生を使う場合でも、止め方や音量の調整ができる状態を保ちましょう。
3:51幅と高さの指定です。
3:53ビデオタグには、ウィドスとハイトという属性があり、数字で寸法を指定します。
3:59記事の例では、幅六百四十、高さ三百六十で、画面比は十六対九になっています。
4:05あらかじめ寸法を伝えておくと、ブラウザーは動画を読み込む前から必要な場所を確保できるので、
4:10ページのレイアウトが途中でがたつくのを防げます。
4:16実際の表示サイズの調整はシーエスエスで行い、属性の寸法とは役割を分けて考えます。
4:22スマートフォンでは、横幅いっぱいに収まる指定と組み合わせるのが基本です。
4:28縦長の動画や正方形の動画では比率が変わるので、実際のファイルの比率に合わせて数値を書き換えてください。
4:36字幕の付け方です。
4:37ビデオタグの中にトラックという子要素を置き、カインド属性にキャプションズを指定します。
4:43字幕そのものは、ダブリューブイティーティー形式、ウェブブイティーティーと呼ばれる別のテキストファイルに、
4:49表示する時刻と文章を書いて用意し、エスアールシーでそのファイルを指定します。
4:55エスアールシーラングには言語を、ラベルには日本語のような表示名を書き、デフォルト属性で最初に使う字幕を示します。
5:03音を聞き取りにくい人や、音を出せない環境の人にとって、字幕はとても大切な情報です。
5:08文字起こしを用意してページ内に置くと、動画を見られない状況でも内容を伝えやすくなり、
5:12検索もしやすくなります。
5:15記事の活用事例を、完成形としてまとめて見てみましょう。
5:20ビデオタグに、コントロールズ、プリロードはメタデータ、幅と高さを指定し、
5:28中にはソース要素でエムピーフォーの動画を、トラック要素で日本語字幕を指定しています。
5:35そして最後に、動画ファイルへのリンクも置いています。
5:40試すときは、エイチティーエムエルファイルを保存して再読み込みし、再生できるか、
5:45字幕が選べるかを確かめます。
5:50動画ファイルと字幕ファイルは自分で用意する必要があり、タグを書くだけで自動で作られるものではない、
5:57という点も覚えておきましょう。
6:03確認では、キーボードのタブキーで操作ボタンへ移動できるか、字幕の言語表示が正しいかも合わせて見てください。
6:13再生できない場合への配慮も大切です。
6:15ビデオタグの中に書いた内容は、動画が再生できない環境での代替として使えます。
6:21記事の例のように、動画ファイルへのリンクを置いておけば、別の方法で開く道が残ります。
6:27また、タグ自体に対応していても、動画の圧縮形式、コーデックによっては再生できないことがあります。
6:34対応状況はタグだけで判断しないようにしましょう。
6:37なお、クロスオリジン属性は、別のオリジンから動画や字幕を取得するときのシーオーアールエス、
6:42コルス設定で、配信するサーバー側の許可と合わせて設定します。
6:48対応していない古い環境や通信が不安定な場面を想像すると、代替の用意が利用者への親切になることが分かります。
6:55ブラウザー互換性を確認します。
6:57記事が参照するエムディーエヌの記録では、要素本体はクロームが三以降、エッジが十二以降、
7:05ファイアフォックスが三点五以降、サファリが三点一以降で対応しており、現在の主要ブラウザーでは広く使えます。
7:13ただし、属性ごとに差があります。
7:15たとえばプレイズインラインは、サファリが十以降、クロームが七十五以降で、
7:20ファイアフォックスは非対応とされています。
7:24ミューテッドやクロスオリジンも、本体より後のバージョンからです。
7:29新しい属性を使うときは、本体とは別に対応状況を確認しましょう。
7:34スマートフォンのサファリやクロームはパソコン版と条件が違うこともあるので、
7:38実機での確認もおすすめします。
7:42最後に練習とまとめです。
7:44ビデオタグは、動画をページの中で再生するためのタグでした。
7:48大切なのは、コントロールズで操作できるようにすること、ポスターやプリロードで読み込み方を整えること、
7:53そしてトラック要素で字幕を用意することでした。
7:59自動再生は制限があるため、あくまで補助として考えます。
8:03練習として、手元のエイチティーエムエルに短い動画を一つ置き、再生、停止、
8:07字幕の表示を自分で確かめてみてください。
8:11お疲れさまでした。
8:12次回もHTMLタグを一つずつ、丁寧に学んでいきましょう。
8:16まずは短い動画で構いません。
8:18小さく試して確かめる流れが、ほかのメディア系タグを学ぶときにも役立ちます。

この動画で学べること

videoタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。動画を再生。controls、字幕、poster を検討し、自動再生だけに依存しない構成にします。

解説記事・サンプルコードを読む：HTMLのvideoタグとは？属性・使い方・ブラウザー互換性と活用例 →