Fixing this issue requires auditing your JavaScript files where Video.js is initialized and configured. Step 1: Locate the Deprecated Call
This warning occurs because videojs-http-streaming (VHS) has replaced the older videojs-contrib-hls
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
The deprecation warning is a result of the Video.js maintainers' efforts to encourage developers to adopt the more modern and maintainable videojs-tech-*.vhs plugin. By using the recommended plugin, developers can ensure their video players stay compatible with the latest browsers, devices, and media formats. Fixing this issue requires auditing your JavaScript files
Historically, Video.js relied on a separate plugin called videojs-contrib-hls to play HTTP Live Streaming (HLS) feeds on browsers that did not natively support it (like Google Chrome and Mozilla Firefox). This engine was accessible via the internal property player.tech_.hls .
For a complete list, refer to the VHS Options documentation .
If you are accessing the HLS technology plugin directly in your code, you need to change how you reference it. javascript Accessing Runtime Properties The deprecation warning is a
// Old way // videojs.Html5Hls.xhr.beforeRequest = function(options) ... ; // New recommended way using VHS videojs.Vhs.xhr.beforeRequest = function(options) { options.headers = options.headers || {}; options.headers['Authorization'] = 'Bearer token_here'; return options; }; Use code with caution.
If this happens during or during video playback
Which (like quality selectors or analytics) are active on your player? This engine was accessible via the internal property player
var player = videojs( 'my-video' , html5: hls: overrideNative: true ); Use code with caution. Copied to clipboard javascript
// A more robust way to access the VHS technology in plugins var vhs = player.tech( IWillNotUseThisInPlugins: true ).vhs; Use code with caution. Why Use VHS Over HLS?
If you are maintaining a web video application, you might have recently spotted this warning in your browser console:
Then look for messages prefixed with [vhs] . Adjust your VHS options accordingly (e.g., overrideNative: true to force MSE even on Safari).