動画ファイルの再生位置を表示する

動画ファイルの再生位置を表示する

video要素で動画ファイルを再生したときに、全体の再生時間と現在の再生位置を表示する方法を解説していきます。

video要素で読み込んだ動画ファイルはプロパティからファイル情報を取得することができます。
今回は再生位置をcurrentTimeプロパティから取得して、全体の再生時間はmaxプロパティから取得します。

サンプルページはこちら

以下の例では、p要素の中に再生位置を表示するtime要素「playback_position」、再生位置を視覚的にプログレスバーとして表示するinput要素「slider_progress」、全体の再生時間を表示するtime要素「end_position」の3要素を横に並べます。

プログレスバーはinput要素の「type="range"」を使って表示し、再生位置を自由に動かして設定することができるようになっています。

HTML コード例

<article>
  <h1>JavaScriptレシピ</h1>
  <video type="video/webm" src="./movie/swiss.mov" muted></video>
  <button id="btn_play">再生</button>
  <button id="btn_pause">一時停止</button>
  <p><time id="playback_position">0:00</time><input type="range" id="progress" value="0" min="0" step="1"><time id="end_position">1:24</time></p>
</article>

CSSはvideo要素の配置を整えるために適用します。

CSS コード例

video {
	display: block;
	margin-bottom: 20px;
}

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  const videoElement = document.querySelector("video");

  const btn_play = document.getElementById("btn_play");
  const btn_pause = document.getElementById("btn_pause");
  const playback_position = document.getElementById("playback_position");
  const end_position = document.getElementById("end_position");
  const slider_progress = document.getElementById("progress");

  let playtimer = null;

  // 再生開始したときに実行
  const startTimer = function(){
    playtimer = setInterval(function(){

      playback_position.textContent = convertTime(videoElement.currentTime);
      slider_progress.value = Math.floor( (videoElement.currentTime / videoElement.duration) * videoElement.duration);
    }, 100);
  };

  // 停止したときに実行
  const stopTimer = function(){
    clearInterval(playtimer);
    playback_position.textContent = convertTime(videoElement.currentTime);
  };

  // 再生時間の表記を「mm:ss」に整える
  const convertTime = function(time_position) {
    
    time_position = Math.floor(time_position);
    let res = null;

    if( 60 <= time_position ) {
      res = Math.floor(time_position / 60);
      res += ":" + Math.floor(time_position % 60).toString().padStart( 2, '0');
    } else {
      res = "0:" + Math.floor(time_position % 60).toString().padStart( 2, '0');
    }

    return res;
  };

  // 動画ファイルの再生準備が整ったときに実行
  videoElement.addEventListener('loadeddata', (e)=> {

    slider_progress.max = videoElement.duration;

    playback_position.textContent = convertTime(videoElement.currentTime);
    end_position.textContent = convertTime(videoElement.duration);
  });

  // 動画ファイルが最後まで再生されたときに実行
  videoElement.addEventListener("ended", (e) => {
    stopTimer();
  });

  // 再生ボタンが押されたときに実行
  btn_play.addEventListener("click", (e) => {
    videoElement.play();
    startTimer();
  });

  // 一時停止ボタンが押されたときに実行
  btn_pause.addEventListener("click", (e) => {
    videoElement.pause();
    stopTimer();
    logPropery();
  });

  // プログレスバーが操作されたときに実行（メモリを動かしているとき）
  slider_progress.addEventListener("input", (e) => {
    stopTimer();
    videoElement.currentTime = slider_progress.value;
  });

  // プログレスバーが操作完了したときに実行
  slider_progress.addEventListener("change", (e) => {
    startTimer();
  });
});

JavaScriptコードの前半はHTML要素の取得とメソッドの宣言を行います。
メソッドは再生開始したときに実行するstartTimer、一時停止や再生時間まで再生した時に実行するstopTimer、表示時間を「分:秒」のフォーマットに整えるconvertTimeの3つ用意します。

JavaScript コード例

// 再生開始したときに実行
const startTimer = function(){
  playtimer = setInterval(function(){

    playback_position.textContent = convertTime(videoElement.currentTime);
    slider_progress.value = Math.floor( (videoElement.currentTime / videoElement.duration) * videoElement.duration);
  }, 100);
};

// 停止したときに実行
const stopTimer = function(){
  clearInterval(playtimer);
  playback_position.textContent = convertTime(videoElement.currentTime);
};

// 再生時間の表記を「mm:ss」に整える
const convertTime = function(time_position) {
  
  time_position = Math.floor(time_position);
  let res = null;

  if( 60 <= time_position ) {
    res = Math.floor(time_position / 60);
    res += ":" + Math.floor(time_position % 60).toString().padStart( 2, '0');
  } else {
    res = "0:" + Math.floor(time_position % 60).toString().padStart( 2, '0');
  }

  return res;
};

startTimerではsetIntervalメソッドを起動して、500ミリ秒ごとに指定した処理を実行する設定にします。
タイマーは変数playtimerに代入して、いつでもsetIntervalメソッドを停止できるようにしておきます。

setIntervalメソッドで実行する処理は2つの再生位置の表示です。

まず1つ目は現在の再生位置をcurrentTimeから取得し、フォーマットを整えてtime要素のplayback_positionにテキストとして挿入します。
これで現在の再生位置を時刻としてページに表示することができます。

もう1つはプログレスバーとして視覚的な再生位置を表示する処理です。
動画ファイルの全体の済生時間をdurationプロパティから取得して、先ほどのcurrentTimeプロパティを再生時間で割ることで全体の何%再生したかを計算します。
その計算結果をinput要素「type="range"」のvalue属性に設定します。

stopTimerではclearIntervalメソッドを実行して、setIntervalメソッドによる定期的な処理を停止します。
さらに、停止した時点の再生位置を表示するためにplayback_positionにテキストを挿入します。

convertTimeは整数の秒数「180」を「3:00」のように「分:秒」の形式に変換します。
if文では値が「60」以上かどうかを判定していますが、もし60未満の場合は1分未満になるので「分」の計算は省略して「0:ss」のような表示に整えます。

秒数の部分では「toString().padStart( 2, '0')」を実行して、桁数を2桁に整えます。
これは例えば秒数が「5」だったときに、頭に0をつけて「05」の表記にします。

続いて、各種ボタンが押された時に発生するイベントをイベントリスナーに登録していきます。

JavaScript コード例

// 動画ファイルの再生準備が整ったときに実行
videoElement.addEventListener('loadeddata', (e)=> {

  slider_progress.max = videoElement.duration;

  playback_position.textContent = convertTime(videoElement.currentTime);
  end_position.textContent = convertTime(videoElement.duration);
});

// 動画ファイルが最後まで再生されたときに実行
videoElement.addEventListener("ended", (e) => {
  stopTimer();
});

// 再生ボタンが押されたときに実行
btn_play.addEventListener("click", (e) => {
  videoElement.play();
  startTimer();
});

// 一時停止ボタンが押されたときに実行
btn_pause.addEventListener("click", (e) => {
  videoElement.pause();
  stopTimer();
  logPropery();
});

// プログレスバーが操作されたときに実行（丸いつまみを動かしているとき）
slider_progress.addEventListener("input", (e) => {
  stopTimer();
  videoElement.currentTime = slider_progress.value;
});

// プログレスバーが操作完了したときに実行
slider_progress.addEventListener("change", (e) => {
  startTimer();
});

最初のloadeddataでは、動画ファイルが再生できる準備が整ったタイミングで呼び出されます。
ここでは再生準備の初期設定として、全体の再生時間をdurationプロパティから取得してプログレスバーの最大値とend_positionのテキストとして挿入します。

続くendedは再生位置が再生時間に到達し、一通りの再生が終わったときに呼び出されます。
再生が終了するのでsetIntervalメソッドによる処理を停止するためにstopTimerを実行します。

再生ボタンと一時停止ボタンは押された時に動画ファイルの再生と一時停止をそれぞれ行います。
再生するときはstartTimerを実行して、一時停止するときはstopTimerを実行します。

最後の2つのイベントリスナーはプログレスバーで操作があったときに発生するイベントです。
イベント「input」は操作中に随時呼び出されて、操作が完了したタイミングでイベント「change」が呼び出されます。

プログレスバーの丸いつまみを移動している間はsetIntervalメソッドの処理を一旦停止するためにstopTimerを実行します。
また、移動している時点での再生位置をvideo要素にも随時反映するためにcurrentTimeプロパティに設定します。

プログレスバーの操作が終わったら再生を再開するため、改めてstartTimerを実行します。

以上が、上記のJavaScriptコードで実行している内容になります。