Use Player.tech--.vhs Instead Hot! — Videojs Warn Player.tech--.hls Is Deprecated.
If you’ve recently seen the console warning "VIDEOJS: WARN: player.tech--.hls is deprecated. Use player.tech--.vhs instead," you are encountering a transition that began with the release of Video.js 7. This warning is part of a move to unify streaming technologies under a single engine. Why is player.tech.hls Deprecated?
Historically, videojs-contrib-hls was the dedicated plugin for HLS playback in Video.js. However, as MPEG-DASH grew in popularity, the development team realized that HLS and DASH could share much of the same core logic. The result was VHS (Video.js HTTP Streaming), which:
Acts as the Successor: VHS is a fork of the original HLS project that supports both HLS and DASH.
Is Bundled by Default: Starting with version 7, VHS is included in the standard Video.js build, making external HLS plugins unnecessary for most users.
Provides a Unified API: By renaming the internal property from hls to vhs, the developers avoided confusion when using the same engine to play DASH content. How to Fix the Warning
The warning appears when your code (or a plugin you are using) attempts to access HLS-specific properties via the old player.tech().hls path. To resolve it, you must update your references to use vhs. 1. Update Runtime Access
If you are manually accessing the streaming tech object to check playlists or bandwidth, change your syntax: Old (Deprecated): javascript If you’ve recently seen the console warning "VIDEOJS:
var hls = player.tech().hls; console.log(hls.playlists.master); Use code with caution. New (Recommended): javascript
var vhs = player.tech().vhs; console.log(vhs.playlists.main); // Note: 'master' is often now 'main' Use code with caution. 2. Update Initialization Options
If you are passing options to the player during setup, update the key from hls to vhs. Old Setup: javascript
videojs('my-player', html5: hls: overrideNative: true ); Use code with caution. New Setup: javascript
videojs('my-player', html5: vhs: overrideNative: true ); Use code with caution. Key Benefits of VHS
Switching to VHS isn't just about silencing a warning; it provides several architectural improvements: After (recommended): const currentLevel = player
player.tech().hls is deprecated. Use player.tech().vhs instead #2
This warning appears because Video.js has replaced the old videojs-contrib-hls plugin with Video.js HTTP Streaming (VHS). Starting with Video.js 7, VHS is the default engine for handling HLS and DASH playback.
To resolve this warning and ensure your code is future-proof, you should update how you access the HLS tech properties in your JavaScript: 1. Update Property Access
If you are accessing the HLS object via code, change your reference from hls to vhs. Old (Deprecated): player.tech().hls or player.hls New (Recommended): player.tech().vhs 2. Update Initialization Options
If you are passing options specifically for HLS during player setup, rename the hls key to vhs. Old: javascript
videojs('my-player', html5: hls: overrideNative: true ); Use code with caution. Copied to clipboard New: javascript 8. Security and Maintenance Considerations
videojs('my-player', html5: vhs: overrideNative: true ); Use code with caution. Copied to clipboard Why this changed
player.tech().hls is deprecated. Use player.tech().vhs instead #2
videojs warn player.tech--.hls is deprecated. use player.tech--.vhs instead
3. Check plugins and third-party code
If you’re using community plugins (like HLS quality selector or thumbnail plugins), they might be the culprit. Check if the plugin has an update that replaces .hls with .vhs. If not, you may need to fork and patch it—or open an issue with the author.
Step 4: Update documentation and comments
If your team maintains internal docs, update any references from “HLS tech” to “VHS tech” to avoid future confusion.
Migration for plugins
If you maintain a Video.js plugin that accesses tech_.hls, update it and bump the major version (or at least a minor version with a deprecation warning). Notify users that they should upgrade.
Example 1: Getting current quality level
Before (deprecated):
const currentLevel = player.tech_.hls.currentLevel;
console.log(`Current bitrate level: $currentLevel`);
After (recommended):
const currentLevel = player.tech_.vhs.currentLevel;
console.log(`Current bitrate level: $currentLevel`);
8. Security and Maintenance Considerations
- Keep VHS and Video.js up to date to receive security fixes.
- Validate CORS headers, credentials, and token-based manifest access.
- Avoid embedding secrets in manifests or client code; use short-lived tokens and server-side auth where possible.