HTML - ビデオプレイヤー：ウェブページに動きを加える

こんにちは、ウェブ開発者の卵さんたち！今日は、HTMLビデオプレイヤーの面白い世界に飛び込みます。ウェブサイトがただの静的なテキストと画像だけだった時代を覚えていますか？そう、その時代は長い間終わっています！今、私たちはダイナミックなビデオコンテンツを直接ウェブページに埋め込むことができ、より魅力的でインタラクティブなページを作成できます。この刺激的な旅の始まりです！

HTML - Video Player

HTMLローカルビデオプレイヤー

HTMLビデオプレイヤーとは？

コードに飛び込む前に、HTMLビデオプレイヤーとは何かを理解しましょう。これはHTML5の内蔵機能で、第三方のプラグイン（Flashなど）に依存することなく、ウェブページに直接ビデオコンテンツを埋め込むことができるものです。すごいですね？

基本的なビデオプレイヤー構造

まず、最も基本的なビデオプレイヤー構造を見てみましょう：

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
あなたのブラウザはvideoタグをサポートしていません。
</video>

これを分解すると：

<video>タグは、私たちのビデオプレイヤーの主要なコンテナです。
widthとheight属性はプレイヤーのサイズを設定します。
controls属性は、再生、停止、ボリュームコントロールをプレイヤーに追加します。
<source>タグは再生するビデオファイルを指定します。
<video>タグの中のテキストは、ブラウザがHTML5ビデオをサポートしていない場合に表示されます。

複数のソースを追加する

しかし、MP4をサポートしていないブラウザもあります。心配しないでください！複数のソースを追加できます：

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
あなたのブラウザはvideoタグをサポートしていません。
</video>

このようにして、ブラウザがMP4をサポートしていない場合、OGGファイルを再生しようとします。

自動再生とループ

ビデオを自動的に再生し、繰り返し再生したい場合は、以下のようにします：

<video width="320" height="240" autoplay loop>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
あなたのブラウザはvideoタグをサポートしていません。
</video>

autoplay属性はビデオが準備ができたらすぐに再生を開始し、loop属性はビデオが終了したときに再開します。

ポスター画像

ビデオが再生される前に画像を表示したい場合は、poster属性を使います：

<video width="320" height="240" poster="movie_poster.jpg" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
あなたのブラウザはvideoタグをサポートしていません。
</video>

これにより、「movie_poster.jpg」という画像がユーザーがビデオを再生するまで表示されます。

スクリーンキャプチャ

さあ、さらに高度な機能について話しましょう。スクリーンキャプチャは、ユーザーのスクリーンからライブビデオストリームをキャプチャし表示する機能です。

基本的なスクリーンキャプチャ

以下はスクリーンキャプチャを実装する基本的な例です：

<video id="screenCapture" autoplay></video>
<button id="startCapture">スクリーンキャプチャを開始する</button>

<script>
const video = document.getElementById('screenCapture');
const startButton = document.getElementById('startCapture');

startButton.addEventListener('click', async () => {
try {
const captureStream = await navigator.mediaDevices.getDisplayMedia();
video.srcObject = captureStream;
} catch (err) {
console.error("エラー: " + err);
}
});
</script>

これを分解すると：

<video>要素はキャプチャされたスクリーンを表示します。
ボタンはスクリーンキャプチャプロセスをトリガーします。
ボタンがクリックされると、navigator.mediaDevices.getDisplayMedia()を使ってスクリーンキャプチャの許可をリクエストし、ストリームを取得します。
そのストリームをビデオ要素のソースとして設定します。

エラー処理とストリーム終了

ユーザーがスクリーン共有を停止した場合の処理も行うべきです：

<video id="screenCapture" autoplay></video>
<button id="startCapture">スクリーンキャプチャを開始する</button>

<script>
const video = document.getElementById('screenCapture');
const startButton = document.getElementById('startCapture');

startButton.addEventListener('click', async () => {
try {
const captureStream = await navigator.mediaDevices.getDisplayMedia();
video.srcObject = captureStream;

const track = captureStream.getVideoTracks()[0];
track.onended = () => {
video.srcObject = null;
console.log('スクリーン共有が終了しました');
};
} catch (err) {
console.error("エラー: " + err);
}
});
</script>

この強化版では：

キャプチャストリームからビデオトラックを取得します。
トラックにonendedイベントリスナーを追加します。
スクリーン共有が終了すると、ビデオのsrcObjectをnullに設定し、メッセージをログします。

結論

そして、みなさん！基本のビデオプレイヤーから高度なスクリーンキャプチャ技術までの旅が終わりました。これらの概念をマスターする鍵は練習です。ウェブページにビデオを取り入れて、さまざまな属性を試し、スクリーンキャプチャなどのより複雑な機能に挑戦してみてください。

以下に、私たちがカバーした主要な属性とメソッドをまとめた表を示します：

属性/メソッド	説明
controls	ビデオコントロール（再生、停止、ボリューム）を追加します
autoplay	ビデオを自動的に再生します
loop	ビデオを終了したときに再開します
poster	ビデオが再生される前に表示する画像を指定します
getDisplayMedia()	スクリーンキャプチャの許可をリクエストし、ストリームを取得します

引き続きコードを書き、学び続けると、情報を提供するだけでなく、訪問者を楽しくし、関与させるウェブページを作成できるようになります。次回までに、ハッピーコーディング！

Credits: Image by storyset