VIDEOJS: WARN: The Hls component was added to the videojs object when it should be registered using videojs.registerComponent(name, component)

[hybrisCole]

Using videojs 5.8.5 hls 2.0.1

[tenacex]

How are you adding HLS to VJS?

[hybrisCole]

Well I'm basically doing this

<script src="videojs/videojs.hls.js"></script>
<script src="videojs/video.min.js"></script>

and I have a React Component like this:

const videoView = (props) => {
  const videoSourceRMTP = `rtmp://${VIDEO_URL}/com-apogee/${props.videoId}_${props.quality || QUALITY}`;
  const videoSourceHLS = `//${VIDEO_URL}/com-apogee/hls/${props.videoId}_${props.quality || QUALITY}.m3u8`;
  // const videoSourceDASH = `//${VIDEO_URL}/com-apogee/dash/${props.videoId}_${props.quality || QUALITY}.mpd`;
  // <source src={videoSourceDASH} type="application/dash+xml" />
  const options = {
    techOrder : ['flash', 'html5'],
    controls  : false,
    autoplay  : true,
    width     : props.windowWidth,
    height    : props.quality === 'birdseye' ? props.windowHeight : (props.windowWidth * ASPECT_RATIO),
  };
  return (<video id={props.videoId}
           className="video-js vjs-default-skin"
           autoPlay="autoPlay"
           data-setup={JSON.stringify(options)}
           controls>
    <source src={videoSourceRMTP} type="rtmp/mp4" />
    <source src={videoSourceHLS} type="application/x-mpegURL" />
  </video>);
};

[samward1985]

This is due to a change between VideoJS 4.x and 5.x. Components should be registered with registerComponent.

Deprecated way: videojs.Hls = require('videojs-contrib-hls');

New way: videojs.registerComponent('Hls', require('videojs-contrib-hls'));

Looks like the problematic lines are here: _videoJs2['default'].HlsHandler = HlsHandler; _videoJs2['default'].HlsSourceHandler = HlsSourceHandler; _videoJs2['default'].Hls = Hls; _videoJs2['default'].m3u8 = _m3u82['default'];

I'll open a PR.

[samward1985]

https://github.com/videojs/videojs-contrib-hls/pull/632

[gesinger]

Thanks for reporting the issue, and thank you for the PR @samward1985 . We are keeping Hls on the videojs object, however, we are also now calling registerComponent for Hls.

Please let us know if you are still seeing the warning. Thank you.