Blog Research API Download App

Videojs Warn Player.tech--.hls Is Deprecated. Use Player.tech--.vhs Instead -

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

  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.

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

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

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

Switching to VHS isn't just about silencing a warning; it provides several architectural improvements:

player.tech().hls is deprecated. Use player.tech().vhs instead #2

videojs warn player.tech--.hls is deprecated. use player.tech--.vhs instead

Step 3: Test your logic

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.

How to fix it

The fix is straightforward but requires a careful search of your codebase.

1. Search your project

Look for any instance of player.tech_.hls (or just .tech_.hls if player is your variable).

What does the warning mean?

When you see this warning, it means somewhere in your JavaScript code (or an external plugin), you are accessing:

player.tech_.hls.someMethod();

That direct path is now deprecated. You must replace it with:

player.tech_.vhs.someMethod();

Accessing VHS when tech may not be ready

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);
    );
);