Registry / web-framework / videojs-playbackrate-adjuster

videojs-playbackrate-adjuster

library1.0.1jsnpmunverified

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.

web-framework

npm install videojs-playbackrate-adjuster

github ↗package ↗

INSTALL

IMPORT

SIG · VIDEOJS-PLAYBACKRA

videojs-playbackrate-adjuster

web-frameworkjavascriptv1.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

(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)

✓ require('videojs-playbackrate-adjuster');

✗ const adjuster = 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

✓ const PlaybackRateAdjuster = require('videojs-playbackrate-adjuster');

✗ import PlaybackRateAdjuster from '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`.

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

Debug

Known issues

breakingThis 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.

affects: <7.0 || >7.x

gotchaThe 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.

affects: >=1.0.0

gotchaThe 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`.

affects: >=1.0.0

Errors

Common errors & fixes

ReferenceError: videojs is not defined

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.

TypeError: player.playbackRate is not a function

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.

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

video.jsrequiredRequired for the middleware to function, as it attaches itself to the global `videojs` instance.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/videojs/videojs-playbackrate-adjuster ↗

packagehttps://www.npmjs.com/package/videojs-playbackrate-adjuster ↗