{"id":17996,"library":"videojs-playbackrate-adjuster","title":"Video.js Playback Rate Adjuster","description":"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.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/videojs/videojs-playbackrate-adjuster","tags":["javascript","videojs","videojs-middleware","videojs-plugin"],"install":[{"cmd":"npm install videojs-playbackrate-adjuster","lang":"bash","label":"npm"},{"cmd":"yarn add videojs-playbackrate-adjuster","lang":"bash","label":"yarn"},{"cmd":"pnpm add videojs-playbackrate-adjuster","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for the middleware to function, as it attaches itself to the global `videojs` instance.","package":"video.js","optional":false}],"imports":[{"note":"The script automatically attaches its middleware to the global `videojs` object upon execution. Ensure `video.js` is loaded first.","symbol":"(implicit global effect)","correct":"<script src=\"//path/to/videojs-playbackrate-adjuster.min.js\"></script>"},{"note":"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.","wrong":"const adjuster = require('videojs-playbackrate-adjuster');","symbol":"(side-effect)","correct":"require('videojs-playbackrate-adjuster');"},{"note":"This retrieves the middleware function itself for direct usage or testing. Note: This package does not provide native ESM exports; use CommonJS `require`.","wrong":"import PlaybackRateAdjuster from 'videojs-playbackrate-adjuster';","symbol":"PlaybackRateAdjuster","correct":"const PlaybackRateAdjuster = require('videojs-playbackrate-adjuster');"}],"quickstart":{"code":"// Assume video.js and videojs-playbackrate-adjuster have been loaded via script tags\n// or a module bundler, and a Video.js player is initialized on an element with id 'my-video'.\n//\n// Example HTML setup:\n// <video id=\"my-video\" class=\"video-js\" controls preload=\"auto\" width=\"640\" height=\"264\">\n//   <source src=\"https://vjs.zencdn.net/v/oceans.mp4\" type=\"video/mp4\">\n// </video>\n// <script src=\"https://unpkg.com/video.js/dist/video.min.js\"></script>\n// <script src=\"https://unpkg.com/videojs-playbackrate-adjuster/dist/videojs-playbackrate-adjuster.min.js\"></script>\n\nvar player = videojs('my-video');\n\nplayer.ready(function() {\n  var myPlayer = this;\n  console.log('Video.js player is ready. Initial displayed duration:', myPlayer.duration());\n\n  // Wait a moment, then change playback rate to observe the effect on the control bar\n  setTimeout(() => {\n    myPlayer.playbackRate(2);\n    console.log('Playback rate set to 2x. Observe how the control bar duration and current time display adjust proportionally.');\n\n    // After some time, reset playback rate\n    setTimeout(() => {\n      myPlayer.playbackRate(1);\n      console.log('Playback rate reset to 1x. Control bar display should return to normal.');\n    }, 5000); // Wait 5 seconds at 2x rate\n  }, 1000); // Wait 1 second before first rate change\n});","lang":"javascript","description":"Demonstrates initializing Video.js with the playback rate adjuster and observing the control bar's displayed duration change when the playback rate is altered."},"warnings":[{"fix":"Ensure your project uses a compatible version of `video.js`, preferably 7.x.","message":"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.","severity":"breaking","affected_versions":"<7.0 || >7.x"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always load `video.js` (e.g., via a `<script>` tag or `require`) before `videojs-playbackrate-adjuster`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"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.","cause":"The Video.js library was not loaded or initialized before `videojs-playbackrate-adjuster` was included or required.","error":"ReferenceError: videojs is not defined"},{"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.","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.","error":"TypeError: player.playbackRate is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}