To resolve the warning "videojs warn player.tech--.hls is deprecated. use player.tech--.vhs instead," you need to update your code to use the Video.js HTTP Streaming (VHS)
. This guide explains why this change happened and how to update your implementation. ⚡ Quick Fix Replace any instances of in your player logic and options. Before (Deprecated): javascript
hlsTech = player.tech().hls; videojs(video, { html5: { hls: { overrideNative: Use code with caution. Copied to clipboard After (Recommended): javascript
vhsTech = player.tech().vhs; videojs(video, { html5: { vhs: { overrideNative: Use code with caution. Copied to clipboard 🔍 Why the Change? VHS is the Successor: Video.js HTTP Streaming (VHS) replaced the old videojs-contrib-hls Wider Support: Unlike the old HLS tech, VHS supports both formats using a unified codebase Bundled by Default:
VHS has been built directly into Video.js since version 7, removing the need for external HLS plugins in most cases 🛠️ Implementation Guide 1. Initializing Options
When configuring your player, move any HLS-specific settings into the block of the javascript player = videojs( 'my-video' , { html5: { vhs: { withCredentials: , overrideNative: // Recommended for consistent behavior across browsers Use code with caution. Copied to clipboard 2. Accessing Runtime Properties
If you need to access live streaming properties like playlists or bandwidth, use the property on the tech Bandwidth: player.tech().vhs.bandwidth Current Playlist: player.tech().vhs.playlists.media() Representations: player.tech().vhs.representations() 3. Handling Quality Levels If you are using the Quality Levels plugin to build a quality picker, ensure you are referencing the tech for any manual overrides ⚠️ Important Considerations videojs-http-streaming (VHS) - GitHub 22 Jul 2025 —
The warning "VIDEOJS: WARN: player.tech().hls is deprecated. Use player.tech().vhs instead" marks a major shift in how Video.js handles adaptive streaming. This change reflects the transition from the legacy videojs-contrib-hls plugin to the modern videojs-http-streaming (VHS) engine, which has been the default since Video.js 7. The Evolution: HLS to VHS
Historically, videojs-contrib-hls was a separate plugin required to play HLS content in browsers without native support. With the release of Video.js 7, the core team introduced VHS, a unified engine that supports both HLS and DASH.
The deprecation of the .hls property in favor of .vhs was a strategic renaming to reflect this multi-protocol capability. Key Technical Differences
Protocol Support: While the old tech focused strictly on HLS, VHS handles multiple HTTP streaming protocols, providing a more consistent API across different media types.
Architecture: VHS is built directly into the Video.js core. It relies on Media Source Extensions (MSE) to deliver adaptive bitrate streaming on most modern browsers.
Property Mapping: Most runtime properties previously accessed via player.tech().hls (such as playlists or representations) have been migrated to player.tech().vhs. Actionable Migration Steps
To resolve the warning and ensure your implementation is future-proof, update your code as follows:
Update Property Access: Replace instances where you directly access the HLS tech. Old: var hls = player.tech().hls; New: var vhs = player.tech().vhs;
Update Configuration Options: If you are passing specific options to the HLS engine during player initialization, update the key from hls to vhs. Example (Override Native): javascript
videojs('my-player', html5: vhs: overrideNative: true ); ``` Use code with caution. Copied to clipboard
Quality Level Management: For advanced features like manual quality switching, it is recommended to use the videojs-contrib-quality-levels plugin, which integrates automatically with the VHS engine. Comparison Table: HLS vs. VHS Legacy (hls) Modern (vhs) Primary Library videojs-contrib-hls @videojs/http-streaming Supported Protocols HLS & DASH Integration External Plugin Core (since v7) Native Override hls: overrideNative: true vhs: overrideNative: true
Are you experiencing issues with specific features like ABR logic or encrypted streams after switching to VHS? videojs-http-streaming (VHS) - GitHub
The "player.tech().hls is deprecated" warning in Video.js indicates a transition to the newer Video.js HTTP Streaming (VHS) engine for handling HLS and DASH formats. To resolve this, developers must replace references of player.tech().hls player.tech().vhs
and update initialization configurations. For technical details and migration steps, see the GitHub discussion on player.hls is deprecated warning
player.tech().hls is deprecated. Use player.tech().vhs instead #2 8 Feb 2022 —
This warning occurs because videojs-http-streaming (VHS) has replaced the older videojs-contrib-hls
library as the standard engine for HLS and DASH playback in Video.js 7 and above
While your existing code may still work, it uses a deprecated reference that will eventually be removed. Quick Fix: Update Your Code
To resolve the warning, replace any instance where you access the "tech" via Old Code (Deprecated): javascript hls = player.tech().hls; playlists = player.tech().hls.playlists.media(); Use code with caution. Copied to clipboard New Code (Recommended): javascript vhs = player.tech().vhs; playlists = player.tech().vhs.playlists.media(); Use code with caution. Copied to clipboard Initialization Options
If you are passing specific HLS configurations during player setup, you should also update the key from Example Configuration: javascript player = videojs( 'my-video' , { html5: { vhs: { // Changed from 'hls' overrideNative: , withCredentials: Use code with caution. Copied to clipboard Key Differences Between HLS and VHS Unified Support: VHS is a single engine that handles both streaming. Native Integration:
VHS is built directly into Video.js, meaning you no longer need to include videojs-contrib-hls as a separate plugin. Consistent Experience: vhs: overrideNative: true
, you can ensure a consistent playback experience across different browsers (like Chrome vs. Safari) rather than relying on inconsistent native browser behaviors.
player.tech().hls is deprecated. Use player.tech().vhs instead #2
Here are a few options for the text, depending on where you need to use it (e.g., a developer release note, a console error explanation, or a support ticket). To resolve the warning "videojs warn player
If you did not write this code yourself, the warning is likely coming from a plugin (such as a quality selector, an analytics tracker, or a chromecast plugin).
API Changes: While the property name has changed, the available methods on the VHS object are largely similar, but you should consult the Video.js VHS documentation for specific method changes.
Summary:
Replace .hls with .vhs in your codebase to ensure compatibility with future versions of Video.js.
The warning videojs warn player.tech().hls is deprecated. use player.tech().vhs instead occurs because Video.js transitioned its underlying streaming engine from a dedicated HLS library to the more versatile Video.js HTTP Streaming (VHS) engine. Why the Change?
Protocol Neutrality: While the original engine (videojs-contrib-hls) was built specifically for HLS, developers realized the same core logic could handle multiple formats.
VHS Successor: VHS is the official successor that supports both HLS and DASH content within a single, unified codebase.
Better Integration: VHS has been bundled into Video.js by default since version 7.0, providing a more consistent experience across browsers by overriding native HLS playback where necessary. How to Fix the Warning
To resolve the deprecation warning, update your code to reference the vhs property instead of hls.
Accessing Runtime Properties:If you previously accessed properties like playlists or representations through player.tech().hls, switch to vhs: javascript
// Old (Deprecated) var hls = player.tech().hls; // New (Recommended) var vhs = player.tech().vhs; Use code with caution. Copied to clipboard
Updating Initialization Options:When setting up your player, update your options object to use the vhs key: javascript
// Old (Deprecated) var player = videojs('my-video', hls: overrideNative: true ); // New (Recommended) var player = videojs('my-video', vhs: overrideNative: true ); Use code with caution. Copied to clipboard
Handling "Undefined" Errors:The vhs object is only attached to the tech when an HLS or DASH stream is actively in use. Ensure your media has loaded or use the player's ready callback before attempting to access it. videojs-http-streaming (VHS) - GitHub
The warning "videojs warn player.tech--.hls is deprecated. use player.tech--.vhs instead"
indicates that your code or a plugin is accessing the HLS (HTTP Live Streaming) engine using an outdated property name. This change occurred because Video.js HTTP Streaming (VHS) has replaced the older videojs-contrib-hls Report: Deprecation of player.tech().hls 1. Reason for the Change
Video.js 7 and newer versions integrated a new streaming engine called VHS (Video.js HTTP Streaming)
. Unlike its predecessor, VHS supports both HLS and DASH formats. To reflect this unified engine, the property used to access runtime streaming data was renamed from 2. Comparison of Access Methods Old (Deprecated) New (Recommended) player.tech().hls player.tech().vhs player.hls (even older) player.tech().vhs 3. How to Resolve Direct Access
: If you are manually accessing the HLS instance to check stats or manifest data, update your JavaScript calls: javascript // Change this: hls = player.tech().hls; // To this: vhs = player.tech().vhs; Use code with caution. Copied to clipboard Player Options
: If the warning appears during initialization, update your configuration object: javascript // Change this: player = videojs( 'my-player' , { html5: { hls: { overrideNative: // To this: player = videojs( 'my-player' , { html5: { vhs: { overrideNative: Use code with caution. Copied to clipboard Third-Party Plugins : If you aren't calling
yourself, a plugin like a quality selector or resolution switcher may be outdated. Check for updates for those specific libraries on 4. Critical Considerations Native vs. VHS : In some browsers like Safari, player.tech().vhs
if the browser is using its native HLS engine instead of the Video.js VHS engine. Use overrideNative: true
in your options if you require consistent access to the VHS object across all browsers. Late Initialization
: Ensure the player is fully ready before accessing the tech object, as it may not be attached until the source is loaded. Are you seeing this warning from a specific plugin , or are you manually configuring the player options? videojs-http-streaming (VHS) - GitHub
Deprecation Warning: Using player.tech_.hls is Deprecated, Please Use player.tech_.vhs Instead
Introduction
Video.js is a popular JavaScript library used for video and audio playback on the web. Recently, a deprecation warning has been raised regarding the use of player.tech_.hls in Video.js. This report aims to provide an overview of the issue, its implications, and recommendations for mitigation.
Background
HLS (HTTP Live Streaming) is a widely used protocol for live and on-demand video streaming. In Video.js, HLS playback is facilitated through the hls tech. However, with the introduction of VHS (Video.js HLS Shim), a more efficient and feature-rich solution for HLS playback, the hls tech has been marked as deprecated.
The Deprecation Warning
When using Video.js with the hls tech, a warning is logged to the console: Check if there is an update available for the plugin
WARN: player.tech_.hls is deprecated. Use player.tech_.vhs instead.
This warning indicates that the player.tech_.hls property is no longer recommended and will be removed in future versions of Video.js.
Implications
Using the deprecated player.tech_.hls property may lead to:
hls tech may be removed, causing playback issues or breaking existing integrations.hls tech will be limited or discontinued.Recommendations
To ensure continued support and compatibility with future versions of Video.js:
player.tech_.vhs instead of player.tech_.hls. This involves:
vhs tech.player.tech_.vhs instead of player.tech_.hls.player.tech_.hls and replace them with player.tech_.vhs.Example Code
Here's an example of how to initialize a Video.js player using the VHS tech:
const player = videojs('my-player',
techOrder: ['vhs'],
sources: [
src: 'https://example.com/hls-stream.m3u8',
type: 'application/x-mpegURL',
],
);
Conclusion
The deprecation of player.tech_.hls in Video.js is a necessary step towards maintaining a stable and feature-rich playback solution. By migrating to player.tech_.vhs, you can ensure continued support, compatibility, and access to the latest features and bug fixes. We recommend updating your code to use the VHS tech to avoid potential issues and ensure a seamless playback experience.
If you recently updated Video.js or your browser console is suddenly flooded with the warning player.tech().hls is deprecated. use player.tech().vhs instead, you aren't alone. This is a common transition point for developers moving toward more modern streaming standards. ⚡ The Quick Fix
To silence the warning and ensure compatibility, replace any direct references to .hls with .vhs in your JavaScript code. Old Code: javascript
var player = videojs('my-video'); player.ready(function() // This triggers the warning var hls = player.tech().hls; console.log(hls.playlists.master); ); Use code with caution. Copied to clipboard New Code: javascript
var player = videojs('my-video'); player.ready(function() // Use vhs (VideoJS HTTP Streaming) instead var vhs = player.tech().vhs; if (vhs) console.log(vhs.playlists.master); ); Use code with caution. Copied to clipboard 🤔 Why is this happening?
Historically, Video.js used a dedicated plugin called videojs-contrib-hls to play HLS video.
Integration: Video.js eventually integrated streaming capabilities directly into the core library.
Evolution: The engine was renamed to VHS (Video.js HTTP Streaming).
Support: Unlike the old HLS tech, VHS supports both HLS and DASH streams.
Consistency: The .hls property was kept as an alias for a long time to prevent breaking sites, but it is now being phased out to encourage the use of the standardized VHS API. 🛠️ Common Use Cases for .vhs
Most developers access the tech object to handle manual quality switching or to inspect manifest data. Here is how to do it the "new" way: 1. Accessing the Master Playlist javascript const masterPlaylist = player.tech().vhs.playlists.master; Use code with caution. Copied to clipboard 2. Listening for Quality Changes javascript
player.tech().vhs.playlists.on('change', function() console.log('The resolution has changed!'); ); Use code with caution. Copied to clipboard 3. Checking for VHS Support
Before running logic, it is a best practice to ensure the VHS tech is actually active: javascript
if (player.tech() && player.tech().vhs) // Your logic here Use code with caution. Copied to clipboard 💡 Summary
Don't worry—your video won't stop playing today. However, since .hls is officially deprecated, it may be removed in the next major version of Video.js. Swapping to .vhs now takes thirty seconds and future-proofs your video player. Are you trying to implement manual quality selection?
If you are seeing the warning "VIDEOJS: WARN: player.tech().hls is deprecated. Use player.tech().vhs instead," it is because your code is still using the older videojs-contrib-hls naming convention.
Since Video.js 7, the player uses a unified engine called VHS (Video.js HTTP Streaming) to handle both HLS and DASH streams. This change ensures a more consistent API regardless of the streaming protocol being used. How to Fix the Deprecation Warning
To resolve this, you need to update how you access the streaming technology object and how you configure your player options. 1. Update Programmatic Access
If your JavaScript code manually accesses the HLS object to change quality levels, tracks, or metadata, change hls to vhs. Old (Deprecated): javascript
var player = videojs('my-video'); player.ready(function() // This triggers the warning var hls = player.tech().hls; console.log(hls.playlists.master); ); Use code with caution. New (Correct): javascript
var player = videojs('my-video'); player.ready(function() // Use .vhs instead var vhs = player.tech().vhs; if (vhs) console.log(vhs.playlists.master); ); Use code with caution. 2. Update Configuration Options
If you are passing options to the player during initialization, update the key from hls to vhs within the html5 object. Old (Deprecated): javascript API Changes: While the property name has changed,
var player = videojs('my-video', html5: hls: overrideNative: true ); Use code with caution. New (Correct): javascript
var player = videojs('my-video', html5: vhs: overrideNative: true ); Use code with caution. Why the Change Happened
Unified Engine: Video.js HTTP Streaming (VHS) replaced the separate videojs-contrib-hls and DASH plugins.
Protocol Agnostic: Because VHS handles multiple formats, calling it .hls was technically inaccurate when the player was actually playing a DASH stream.
Better Support: VHS is bundled by default in Video.js 7 and 8, offering improved cross-browser compatibility and features like low-latency HLS. Potential "Undefined" Issues
If you switch to .vhs and it returns undefined, check the following: videojs-http-streaming (VHS) - GitHub
This warning appears in projects using Video.js with the videojs-contrib-hls (or similar HLS playback) library.
Simply replace all occurrences of .hls with .vhs.
Make sure you are using the latest videojs and @videojs/http-streaming packages.
npm install video.js @videojs/http-streaming
Then:
import videojs from 'video.js'; import '@videojs/http-streaming';const player = videojs('my-video', sources: [ src: 'stream.m3u8', type: 'application/x-mpegURL' ] );
player.ready(() => const vhs = player.tech_.vhs; // ✅ No warning console.log(vhs.master.uri); );
The warning player.tech_.hls is deprecated. use player.tech_.vhs instead is not an emergency, but it is a signal to modernize. By switching from tech_.hls to tech_.vhs, you align your code with the current architecture of Video.js’s HLS playback engine.
The migration is straightforward: rename the property, test your quality-switching and event-handling logic, and update any internal documentation. Your reward is a cleaner, more maintainable codebase free of deprecation warnings.
Final checklist:
tech_.hlstech_.vhsBy acting now, you ensure that when Video.js eventually removes the alias, your player will continue working seamlessly. Keep streaming, stay updated, and always respect the console – it’s trying to help you build a better video experience.
Have questions about more complex VHS migrations? Check out the official @videojs/http-streaming documentation on GitHub or open an issue on the Video.js discussion board.
This warning indicates that your Video.js implementation is using legacy syntax for handling HLS (HTTP Live Streaming) content. As of Video.js 7, the player moved from the standalone videojs-contrib-hls plugin to an integrated engine called Video.js HTTP Streaming (VHS). Why the warning appeared
The warning player.tech().hls is deprecated. Use player.tech().vhs instead appears because the property name used to access the streaming engine has changed.
Legacy (.hls): Referenced the older videojs-contrib-hls plugin.
Modern (.vhs): References the new, unified engine that supports both HLS and DASH. How to Fix the Deprecation
To resolve the warning and ensure future compatibility, you should update your code to reference vhs instead of hls. 1. Update Direct Property Access
If you are programmatically interacting with the streaming tech (e.g., checking playlists or quality levels), change your accessors: Old Syntax: javascript
var hls = player.tech().hls; // or var playlists = player.hls.playlists; Use code with caution. Copied to clipboard New Syntax: javascript var vhs = player.tech().vhs; Use code with caution. Copied to clipboard 2. Update Initialization Options
If you are passing specific HLS configurations in your player setup, move them under the vhs key: Old Configuration: javascript
var player = videojs('my-video', html5: hls: overrideNative: true ); Use code with caution. Copied to clipboard New Configuration: javascript
var player = videojs('my-video', html5: vhs: overrideNative: true ); Use code with caution. Copied to clipboard Key Considerations
player.tech().hls is deprecated. Use player.tech().vhs instead #2
Do not access player.tech_.vhs immediately after player initialization. The tech may still be loading. Use the loadeddata or techready event:
player.ready(() =>
// Ensure the underlying tech is ready
if (player.tech_ && player.tech_.vhs)
setupVHSEvents(player.tech_.vhs);
else
player.on('techready', () =>
setupVHSEvents(player.tech_.vhs);
);
);