制作Note

2024.07.27 ｜
制作Note
コメントはまだありません

HTML5のvideoタグを使って、動画再生速度をコントロールしたい！

HTML5のvideoタグを使って、動画再生速度をコントロールしたい！

HTMLMediaElement.playbackRateプロパティを使ってjavascriptで制御できます。

MDN Web Docs
HTMLMediaElement.playbackRate - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/playbackRate
HTMLMediaElement.playbackRate プロパティは、メディアが再生されるレートを設定します。これはユーザーが早送りやスローモーションなどのユーザー制御を実装するために使用されます。通常の再生レートにこの値を掛けて現在のレートが求められるため、 1.0 の値が通常の速度です。

HTMLMediaElement.playbackRate プロパティは、メディアが再生されるレートを設定します。これはユーザーが早送りやスローモーションなどのユーザー制御を実装するために使用されます。通常の再生レートにこの値を掛けて現在のレートが求められるため、 1.0 の値が通常の速度です。

playbackRate が負の数であれば、メディアは逆方向に再生されます。

動機としては、YouTubeを使いたくないケースがあり（訪問者をパスワード制御で制限したいとなった時にYouTubeだとNG）、videoタグで演奏動画をスローダウン再生したかった。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Speed Controller</title>
</head>
<body>
  <video id="videoPlayer" width="640" height="360" controls>
    <source src="AllofMe.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <!-- <p id="playCount">View: 0</p>　-->
  <p id="currentSpeed">Current Speed: 1.0x</p>
  <button id="decreaseSpeed">Down Speed</button>
  <button id="increaseSpeed">Fast Speed</button>

  <script src="script.js"></script>
</body>
</html>

javascript

document.addEventListener('DOMContentLoaded', (event) => {
    const video = document.getElementById('videoPlayer');
    const decreaseSpeedButton = document.getElementById('decreaseSpeed');
    const increaseSpeedButton = document.getElementById('increaseSpeed');
    const currentSpeedDisplay = document.getElementById('currentSpeed');
    const playCountDisplay = document.getElementById('playCount');
  
    let playCount = 0;
  
    // 初期の再生速度を表示
    updateSpeedDisplay(video.playbackRate);
  
    // 再生速度を0.25ずつ下げる
    decreaseSpeedButton.addEventListener('click', () => {
      if (video.playbackRate > 0.25) {
        video.playbackRate = (video.playbackRate - 0.25).toFixed(2);
        updateSpeedDisplay(video.playbackRate);
      }
    });
  
    // 再生速度を0.25ずつ上げる
    increaseSpeedButton.addEventListener('click', () => {
      if (video.playbackRate < 2.0) {  // 例として最大速度を2.0xに設定
        video.playbackRate = (video.playbackRate + 0.25).toFixed(2);
        updateSpeedDisplay(video.playbackRate);
      }
    });
  
    // ページ訪問時に再生数を1回だけ増やす
    if (!localStorage.getItem('hasVisited')) {
      playCount++;
      updatePlayCountDisplay(playCount);
      localStorage.setItem('hasVisited', 'true');
    } else {
      updatePlayCountDisplay(playCount);
    }
  
    // 再生速度表示を更新
    function updateSpeedDisplay(speed) {
      currentSpeedDisplay.textContent = `Current Speed: ${speed}x`;
    }
  
    // 再生数表示を更新
    function updatePlayCountDisplay(count) {
      playCountDisplay.textContent = `Play Count: ${count}`;
    }
  });

※試しに簡単な再生数カウントも入れてますが、実際はサーバーで再生数保持したりする必要があります
※次回はReact,Nextで再生数カウントを実装してみようかな！