Video.js Playback Rate Adjuster

1.0.1 verified Thu Apr 23 auth: no javascript

videojs-playbackrate-adjuster is a Video.js 7 middleware designed to dynamically adjust the displayed duration and current time in the Video.js control bar when the playback rate is changed. For instance, if a 20-minute video is played at 2x speed, the control bar will visually represent it as a 10-minute video, with the progress bar updating proportionally to the adjusted perceived duration. The current stable version is 1.0.1. This library primarily functions as a side-effect plugin, automatically attaching itself to the `videojs` global upon inclusion, without requiring explicit instantiation or assignment. It serves as a specific utility for enhancing the user experience in scenarios where playback speed manipulation is common, ensuring the UI accurately reflects the perceived playback progress rather than the absolute media time. The library's release cadence is not formally defined but typically aligns with compatibility needs for Video.js itself.

Common errors

error ReferenceError: videojs is not defined ↓

cause The Video.js library was not loaded or initialized before `videojs-playbackrate-adjuster` was included or required.

fix

Ensure that the video.js script is loaded in your HTML before videojs-playbackrate-adjuster.min.js, or that require('video.js') executes before require('videojs-playbackrate-adjuster') in module environments.

error TypeError: player.playbackRate is not a function ↓

cause Attempting to interact with the Video.js player (e.g., setting `playbackRate`) before the player instance is fully ready or on an invalid player object.

fix

Always wrap player-specific operations within the player.ready(function() { /* ... */ }); callback to ensure the player is fully initialized and its API methods are available.

Warnings

breaking This middleware is specifically designed for Video.js 7.x. Compatibility with older or newer major versions of Video.js is not guaranteed and may lead to unexpected behavior or errors. ↓

fix Ensure your project uses a compatible version of `video.js`, preferably 7.x.

gotcha The middleware adjusts only the *displayed* duration and current time in the control bar, not the actual media's properties or playback behavior. The underlying media's duration remains unchanged. ↓

fix Understand that this is a UI-level adjustment. If you need to manipulate actual media timing, use Video.js's native API methods (e.g., `player.currentTime()`) or other plugins.

gotcha The library relies on the `videojs` global being available. If `video.js` is not loaded or initialized correctly before `videojs-playbackrate-adjuster`, the middleware will fail to attach. ↓

fix Always load `video.js` (e.g., via a `<script>` tag or `require`) before `videojs-playbackrate-adjuster`.

Install

npm install videojs-playbackrate-adjuster

yarn add videojs-playbackrate-adjuster

pnpm add videojs-playbackrate-adjuster

Imports

(implicit global effect)
```
<script src="//path/to/videojs-playbackrate-adjuster.min.js"></script>
```
The script automatically attaches its middleware to the global `videojs` object upon execution. Ensure `video.js` is loaded first.
(side-effect)
wrong
```
const adjuster = require('videojs-playbackrate-adjuster');
```
correct
```
require('videojs-playbackrate-adjuster');
```
Primarily used for its side-effect of attaching to Video.js in CommonJS environments. While the middleware function is exported, assigning it to a variable is often unnecessary for basic setup.
PlaybackRateAdjuster
wrong
```
import PlaybackRateAdjuster from 'videojs-playbackrate-adjuster';
```
correct
```
const PlaybackRateAdjuster = require('videojs-playbackrate-adjuster');
```
This retrieves the middleware function itself for direct usage or testing. Note: This package does not provide native ESM exports; use CommonJS `require`.

Quickstart

Demonstrates initializing Video.js with the playback rate adjuster and observing the control bar's displayed duration change when the playback rate is altered.

// Assume video.js and videojs-playbackrate-adjuster have been loaded via script tags
// or a module bundler, and a Video.js player is initialized on an element with id 'my-video'.
//
// Example HTML setup:
// <video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
//   <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
// </video>
// <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
// <script src="https://unpkg.com/videojs-playbackrate-adjuster/dist/videojs-playbackrate-adjuster.min.js"></script>

var player = videojs('my-video');

player.ready(function() {
  var myPlayer = this;
  console.log('Video.js player is ready. Initial displayed duration:', myPlayer.duration());

  // Wait a moment, then change playback rate to observe the effect on the control bar
  setTimeout(() => {
    myPlayer.playbackRate(2);
    console.log('Playback rate set to 2x. Observe how the control bar duration and current time display adjust proportionally.');

    // After some time, reset playback rate
    setTimeout(() => {
      myPlayer.playbackRate(1);
      console.log('Playback rate reset to 1x. Control bar display should return to normal.');
    }, 5000); // Wait 5 seconds at 2x rate
  }, 1000); // Wait 1 second before first rate change
});