JavaScript

レシピ

動画

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

再生している動画ファイルの再生位置をプログレスバーで表示する方法について解説します。

この記事のポイント

  • 現在の再生位置はcurrentTimeプロパティから取得する
  • 全体の再生時間はmaxプロパティから取得する

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

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

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

表示例

サンプルページはこちら

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

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

Note

ここでは動画ファイルの再生/一時停止の実装については触れません。こちらについては別記事「動画ファイルの再生、一時停止を操作する」を参照してください。

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");

  var 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);
    var 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つ用意します。

// 再生開始したときに実行
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);
  var 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」の表記にします。

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

// 動画ファイルの再生準備が整ったときに実行
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コードで実行している内容になります。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。