[JS30] - 11) Custom Video Player

機能は実現していますが、注意が必要な部分や見逃した部分だけを簡単にまとめました.

ビデオの再生/一時停止

const player = document.querySelector('.player');
const video = player.querySelector('.viewer');

function togglePlay() {
  const method = video.paused ? 'play' : 'pause';
  video[method]();
}

toggle.addEventListener('click', togglePlay)

私の実装と似ていますが、ここではメソッド自体を3つの演算子に指定し、video[method]を使用して実行します.

ビデオ再生時間

HTMLMediaElement.currentTime

現在の再生時間

HTMLMediaElement.duration

メディア全体の長さ

再生時間の変更時に再生バーを更新

HTMLMediaElement : timeupdate event

video.addEventListener('timeupdate', handleProgress);

再生時間が更新されるたびにイベントが発生する条件.
setInterval()でビデオ再生を作成すると、現在のビデオの再生時間を毎秒返し、再生バーに反映します.
ただし、timeupdateイベントによって再生時間が変更されるたびに再生バーが移動すると、setIntervalの重なりやタイマーが中断した後に再再生する必要があるという問題を解決することができる.
また、プレイバーをクリックして動画の再生時点を変更する場合、このsetIntervalを中断してから一緒に時点を移動するのも複雑であるため、この方法は非常に有効である.
timeupdate eventについてはよく知られていませんが、まず様々な活動条件を見つけ、積極的に利用すべきです.

function handleRangeUpdate() {
  video[this.name] = this.value;
}

Eventですtargetを利用して、ここで簡単に利用しました.

再生バーの変更時にビデオ再生ポイントを移動

この部分は体現していない部分で、もう一度自分で体現しなければならない.

let mousedown = false;
progress.addEventListener('click', scrub);
progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
progress.addEventListener('mousedown', () => mousedown = true);
progress.addEventListener('mouseup', () => mousedown = false);

function scrub(e) {
  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
  video.currentTime = scrubTime;
}

現在時刻は、プレイバーの全長とクリックポイントのx座標比率で求め、currentTimeに代入します.

Reerence

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration