Videojs Warn Player.tech--.hls Is Deprecated. Use Player.tech--.vhs Instead Today
Search your entire repository for any instances of .tech_.hls . Replace .tech_.hls with .tech_.vhs .
This warning occurs because videojs-http-streaming (VHS) has replaced the older videojs-contrib-hls
Because the underlying object is the same, most methods will work identically. However, double-check any methods specific to the old contrib-hls . The VHS API is largely compatible but not 100% identical.
Search your codebase for:
Some Video.js plugins might be outdated and still reference player.tech_.hls . Solutions:
This warning indicates that you're using an outdated technical component for handling HLS playback. While your video may still work, relying on deprecated code can lead to future compatibility issues, performance degradation, and missing features. In this comprehensive article, we'll explore exactly what this warning means, why it appears, how to fix it, and best practices for migrating to the modern VHS (Video.js HTTP Streaming) engine.
// Access VHS tech safely (only after 'loadedmetadata' event) player.ready(() => // Proper way to access VHS tech without warning const vhs = player.tech_.vhs; if (vhs) console.log('VHS engine loaded', vhs); Search your entire repository for any instances of
// OLD: manually registering HLS tech videojs.registerTech('Hls', videojs.getTech('Hls'));
Around Video.js version 7 and later, the project migrated to a new, more robust HLS library called (Video.js HLS Streaming). VHS stands for Video.js HTTP Streaming , and it supports both HLS and DASH.
videojs('my-player', html5: hls: overrideNative: true ); Use code with caution. Copied to clipboard javascript However, double-check any methods specific to the old
player.tech_.vhs.on('playlistchanged', function() console.log('The playlist changed via VHS!'); ); Use code with caution. 3. Check and Update Third-Party Plugins
While a console warning does not immediately crash your application, leaving deprecated code in production carries significant risks:
Additionally, test playback on different browsers (Chrome, Firefox, Safari, Edge) to ensure HLS streams still play correctly. Safari may use native HLS (which is fine) while others use MSE through VHS. Solutions: This warning indicates that you're using an
useEffect(() => const player = videojs(ref.current); player.ready(() => const vhs = player.tech_.vhs; // ✅ Fixed ); , []);