Skip to main content

Instead [portable] | Videojs Warn Player.tech--.hls Is Deprecated. Use Player.tech--.vhs

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:

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:

  1. Future Breakage: As Video.js continues to evolve, the hls tech may be removed, causing playback issues or breaking existing integrations.
  2. Limited Support: Deprecation means that bug fixes, new features, and support for the hls tech will be limited or discontinued.

Recommendations

To ensure continued support and compatibility with future versions of Video.js:

  1. Migrate to VHS: Update your code to use player.tech_.vhs instead of player.tech_.hls. This involves:
    • Including the VHS plugin in your project.
    • Initializing the player with the vhs tech.
    • Updating your code to use player.tech_.vhs instead of player.tech_.hls.
  2. Update Your Code: Review your codebase for any references to 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.

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 Deprecation Warning: Using player

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

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

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 This warning indicates that the player

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

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 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 Future Breakage : As Video

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

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

Step 1: Identify all usages of tech_.hls

Search your codebase for:

Use your IDE’s global search or grep:

grep -r "tech_.hls" --include="*.js" --include="*.vue" --include="*.ts"

Title

Migration from videojs-player.tech--.hls to player.tech--.vhs: Motivation, Implementation, and Performance Implications

Step 1 – Identify where you use .hls

Search your codebase for: