5.1 追加の属性
HTML5のマルチメディア要素、たとえば<audio>や<video>は、マルチメディアコンテンツの再生を管理するための多くの属性を提供しているよ。これらの属性を理解することで、よりインタラクティブでユーザーフレンドリーなウェブページを作ることができて、いろんなユーザーのニーズに対応できるんだ。ここでは、<audio>と<video>要素で利用可能な追加の属性について詳しく見ていくよ。
crossorigin属性
crossorigin属性は、ブラウザが他のドメインにあるマルチメディアファイルへのリクエストをどう処理するかを指定するんだ。この属性は2つの値を取ることができるよ：
anonymous: リクエストは資格情報（cookie、認証ヘッダーなど）を含まずに行われるuse-credentials: リクエストは資格情報を含んで行われる
例:
<audio src="https://example.com/audiofile.mp3" controls crossorigin="anonymous"></audio>
<video src="https://example.com/videofile.mp4" controls crossorigin="use-credentials" width="800" height="450"></video>
<source>の属性
<source>タグは<audio>と<video>要素の中に使用されて、複数のマルチメディアコンテンツのソースを指定するのに使うんだ。これでクロスブラウザの互換性を確保できるんだよ、さまざまなブラウザは異なるフォーマットをサポートしているからね。
例:
<video controls width="600">
<source src="videofile.mp4" type="video/mp4">
<source src="videofile.webm" type="video/webm">
<source src="videofile.ogv" type="video/ogg">
ブラウザがvideo要素をサポートしていません。
</video>
字幕とテキストトラックの属性とプロパティ
HTML5は<track>タグを使って、字幕やテキストトラック、説明を追加する機能を提供しているんだ。この要素は、字幕、説明、章などのいくつかのタイプのテキストトラックをサポートしているよ。
例:
<video controls width="600">
<source src="videofile.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
ブラウザがvideo要素をサポートしていません。
</video>
5.2 JavaScriptを使ったマルチメディア要素の管理
<audio>と<video>要素はJavaScriptを使って再生を管理するAPIを提供しているんだ。これにより、カスタムコントロールを作成して、複雑な再生シナリオを実装することができるんだよ。
例:
<video id="myVideo" src="videofile.mp4" controls></video>
<button onclick="playVideo()">再生</button>
<button onclick="pauseVideo()">一時停止</button>
<button onclick="stopVideo()">停止</button>
const video = document.getElementById("myVideo");
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
function stopVideo() {
video.pause();
video.currentTime = 0;
}
この例では、ボタンを使ってJavaScriptでビデオを再生、停止、一時停止できるようにしているんだ。
5.3 マルチメディア要素のイベント
<audio>と<video>要素は再生の状態の変化を追跡し、それに反応するための多くのイベントをサポートしているんだ。
主なイベント:
play: 再生が始まったときに発生するpause: 再生が一時停止されたときに発生するended: 再生が終了したときに発生するtimeupdate: 再生の現在時間が変化したときに定期的に発生する
イベントの使用例:
<video id="myVideo" src="videofile.mp4" controls></video>
const video = document.getElementById("myVideo");
video.addEventListener('play', function() {
console.log('ビデオの再生が始まった');
});
video.addEventListener('pause', function() {
console.log('ビデオが一時停止された');
});
video.addEventListener('ended', function() {
console.log('ビデオが終了した');
});
video.addEventListener('timeupdate', function() {
console.log('現在の時間: ' + video.currentTime);
});
このコードは、マルチメディア要素の主なイベントをどのように追跡できるかを示しているんだ。
GO TO FULL VERSION