DVRとは？

DVR（デジタルビデオレコーダー）は、テレビ番組やライブストリーミングの映像をデジタル形式で録画して、後で見られるようにする装置や機能のことを指します。

これを使えば、「あ、これ見たかった！」という番組やイベントをリアルタイムで見逃しても、後からゆっくりと視聴することができます。

ストリーミングサイトでのDVRの利点

ストリーミングサイトでは、DVR機能を使ってライブの映像を一時停止したり、巻き戻して見たりすることができます。
これにより、視聴者は自分のタイミングでコンテンツを楽しむことが可能です。

JavaScriptでDVRを使う方法

JavaScriptを使ってウェブページ上でDVR機能を実装することもできます。例えば、ライブストリーミングのビデオを制御する小さなプログラムを作ることができます。

簡単な例

<video id="video" controls></video>
<button onclick="rewind()">10秒巻き戻し</button>
<button onclick="forward()">10秒早送り</button>
<script src="https://cdn.jsdelivr.net/npm/hls.js@1.0.11"></script>
<script src="script.js"></script>

上のコードは、ウェブページ上にビデオプレイヤーと「10秒巻き戻し」、「10秒早送り」のボタンを作ります。そして、HLS.jsというライブラリを使ってビデオをコントロールします。

const video = document.getElementById('video');
const hls = new Hls();
hls.loadSource('your-live-stream-url.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
  video.play();
});

function rewind() {
  video.currentTime = Math.max(video.currentTime - 10, 0);
}

function forward() {
  video.currentTime = Math.min(video.currentTime + 10, video.duration);
}

上のJavaScriptコードは、ビデオを制御するためのプログラムです。ビデオを10秒巻き戻したり、10秒早送りしたりする関数を提供しています。

このようにして、JavaScriptとHLS.jsを使うことで、ウェブページ上で簡単にDVR機能を実装することができます。