Webのオーディオとビデオ
HTML5 標準には<video>
、 <audio>
タグや、 それを制御するためのJavaScript やAPIなど、多くの新機能が あり ます。
<ビデオ>要素
<video>
ビデオを簡単に埋め込むことができます。簡単な例は次のとおりです。
<video src="rabbit320.webm" controls>
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
いくつかの属性は次のとおりです。
<img>
同じラベルの使用、src
属性ポイントは、Webページの中で、あなたは、それらの使用とまったく同じ方法、埋め込みビデオリソースにしたいです。
ユーザーは、ビデオおよびオーディオの再生機能を制御できる必要があります。を使用controls
して、ブラウザーによって提供される制御インターフェースを含めることができ ます。また、適切なJavaScript APIを使用して、独自のインターフェースを作成することもでき ます。インターフェイスには、少なくとも音量の開始、停止、調整の機能が含まれている必要があります。
<video>
ラベル内のコンテンツ
これはフォールバックコンテンツと呼ばれます —ブラウザが<video>
タグをサポートしていない場合 、このコンテンツが表示されます。これにより、古いブラウザにフォールバックコンテンツを提供できます。任意のバックアップコンテンツを追加できます。この例では、ユーザーがブラウザのサポートに制限されることなく、少なくともこのファイルにアクセスできるように、このビデオファイルへのリンクを提供しています。
埋め込まれたビデオファイルのWebページスタイルは次のとおりです。
ブラウザでサポートされているメディアファイル
<video controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
次にsrc
、<video>
ラベルから属性 を削除し、 いくつかの個別のラベルに配置し <source>
ます。この例では、ブラウザは<source>
タグをチェックし、 独自のコーデックに一致する最初のメディアを再生します。
各 <source>
タブにはtype
属性が含まれてい ます。この属性はオプションですが、この属性を追加することをお勧めします。この属性にはビデオファイルのMIMEタイプが含まれ 、ブラウザもこの属性をチェックして、サポートされていない形式の属性をすばやくスキップします。type
属性を追加しない場合 、ブラウザは、正しく再生できる形式が見つかるまで各ファイルを読み込もうとします。これには、多くの時間とリソースが消費されます。
注:ここ でMIMEタイプのサポートを確認できます(HTMLメディア形式のサポート) 。
その他の<ビデオ>機能
HTML5<video>
で使用できる機能はたくさんあります 。3番目の例をご覧ください。
<video controls width="400" height="400"
autoplay loop muted
poster="poster.png">
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
このコード文字列は、次のページを表示します。
新機能:
属性を使用してビデオのサイズを制御できます。また、CSS を使用してビデオのサイズを制御することもできます 。どちらの方法でも、ビデオは元の縦横比-も呼ば維持するアスペクト比を。設定したサイズがビデオの元のアスペクト比を維持しない場合、ビデオの境界線が引き伸ばされ、ビデオコンテンツで埋められていない部分にデフォルトの背景色が表示されます。
この属性により、ページの他の部分が完全にロードされていない場合でも、オーディオおよびビデオコンテンツがすぐに再生されます。ユーザーはメディアファイルの自動再生にうんざりするため、この属性をWebサイトに適用しないことをお勧めします。
この属性を使用すると、オーディオファイルまたはビデオファイルをループで再生できます。必要な場合を除いて、同じことはお勧めしません。
この属性により、メディアの再生時にデフォルトでサウンドがオフになります。
この属性は、ビデオが再生される前に表示される画像のURLを指します。通常、大まかなプレビューや広告に使用されます。
この属性は、より大きなファイルをバッファリングするために使用されます.3つの値から選択できます:
"none"
:バッファリングなし"auto"
:ページの読み込み後にメディアファイルをキャッシュする"metadata"
:ファイルのメタデータのみをバッファリングする
ここをクリックして上記の例を表示するか、ここをクリックしてソースコードを表示できます。このバージョンの例ではautoplay属性を使用していないことに注意してください。ページが読み込まれるとすぐに動画の再生が開始されると、poster属性の効果は見られません。
<オーディオ>タグ
<audio>
ラベルと <video>
ラベルの使用法はほぼ同じです。次の異なる境界線など、いくつかの微妙な違いがあります。典型的な例は次のとおりです。
<audio controls>
<source src="viper.mp3" type="audio/mp3">
<source src="viper.ogg" type="audio/ogg">
<p>你的浏览器不支持 HTML5 音频,可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>
メディアの再生
いつでも、Javascriptのload()
メソッドを呼び出して、メディアをリセットできます 。<source>
タグで指定されたメディアソースが複数ある場合 、ブラウザはメディアソースの選択からメディアをリロードします。
const mediaElem = document.getElementById("my-media-element");
mediaElem.load();
オーディオトラックの追加および削除イベント
メディア要素でオーディオトラックを監視できます。オーディオトラックが追加または削除された場合、関連するイベントをリッスンすることでそれを検出できます。具体的に は、 オブジェクト(つまり、オブジェクト)AudioTrackList
のaddtrack
イベントを 監視すること により HTMLMediaElement.audioTracks
、時間の経過に伴うオーディオトラックの増加に対応できます。
const mediaElem = document.querySelector("video");
mediaElem.audioTracks.onaddtrack = function(event) {
audioTrackAdded(event.track);
}
あなたは私たちのTrackEvent
ドキュメントでより有用な情報を見つけることができ ます。
オーディオトラックのテキストを表示する
WebVTTは、テキストファイルの書き込みに使用される形式です。このテキストファイルには多くの文字列が含まれています。これらの文字列にはいくつかのメタデータが含まれます。これらの文字列は、ビデオに表示される時間を説明するために使用できます。これらの文字列のスタイルと位置情報。これらの文字列はキュー と呼ばれ ます。さまざまなニーズに応じてさまざまなスタイルを表示できます。最も一般的なものは次のとおりです。
字幕
翻訳された字幕を追加することで、外国語を理解していない人が音声の内容を理解できるようにします。
キャプション
会話を同時に翻訳するか、重要な情報を含むいくつかの音を説明して、音声を聞くことができない人が音声の内容を理解できるようにします。
時限説明
テキストを音声に変換して、視覚障害のある人にサービスを提供します。
典型的なWebVTTファイルは次のとおりです。
WEBVTT
1
00:00:22.230 --> 00:00:24.606
第一段字幕
2
00:00:30.739 --> 00:00:34.074
第二段
...
HTMLメディアで表示するには、次の手順を実行する必要があります。
- 拡張子が.vttのファイルを保存します。
<track>
タグを使用して .vttファイルをリンクします。<track>
タグは<audio>
または<video> 标签当中
、すべての<source>タグの後に配置する必要があります。kind
属性を使用して 、字幕、キャプション、説明などのタイプを指定します。次に、それsrclang
を使用 して、字幕を書いている言語をブラウザに伝えます。
次のように:
<video controls>
<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>
上記のコードは、次のように字幕付きのビデオを表示します。
詳細を知りたい場合は、HTML5ビデオへのキャプションと字幕の追加をお読みください 。