Videojs Warn Player.tech--.hls Is Deprecated. Use Player.tech--.vhs Instead Jun 2026
);
While this is a warning, not a breaking error, it signals a necessary evolution in how Video.js handles HTTP Live Streaming (HLS) content. Ignoring it may lead to compatibility issues in future versions.
Many HLS events (like loadedplaylist , mediachange , error ) are still emitted by VHS, but they may now be namespaced differently. Refer to the VHS documentation for the exact event list.
And you import it in your code:
The deprecation warning videojs warn player.tech--.hls is deprecated. use player.tech--.vhs instead is a signal to update your Video.js project to use the more modern and maintainable videojs-tech-*.vhs plugin. By following the steps outlined in this article, you can ensure your video player remains compatible with the latest browsers, devices, and media formats. Don't wait – migrate to videojs-tech-*.vhs today and future-proof your video player!
Performance monitoring tools pulling buffer data or bitrates directly from the tech layer.
let seekable = player.tech_.vhs.seekable(); player.tech_.vhs.on('mediaqualitychange', function() console.log('Quality changed'); ); ); While this is a warning, not a
For a complete list, refer to the VHS Options documentation .
</script> </body> </html>
// OLD (deprecated) const hls = player.tech_.hls; hls.selectQuality(2); Refer to the VHS documentation for the exact event list
VHS comes bundled directly inside Video.js (versions 7 and up), eliminating the need to load external contributor plugins.
<!DOCTYPE html> <html> <head> <!-- Use at least Video.js 7+ which includes VHS --> <link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" /> <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script> </head> <body> <video id="my-video" class="video-js" controls> <source src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" type="application/x-mpegURL"> </video> <script> var player = videojs('my-video'); player.ready(function() // New way: use getTech() and .vhs var tech = player.getTech(); var vhs = tech && tech.vhs; if (vhs) console.log('VHS engine is active'); vhs.on('loadedplaylist', function() console.log('Playlist loaded (VHS event)'); ); else // Fallback for native HLS (Safari) – VHS may not be used console.log('Using native HLS, no VHS instance');
A common issue when updating is finding that player.tech().vhs returns undefined or null . As noted in Stack Overflow discussions, the VHS object is only populated the player has initialized and begun using a streaming technology. By following the steps outlined in this article,