videojs with webpack and es6 is throwing -> VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)

[xJoshx]

I'm having an error while loading videojs + contrib-hls with Webpack, React and ES6

I import the modules as:

import videojs from 'video.js'
import vjs from 'videojs-contrib-hls'
window.videojs = videojs
window.vjs = vjs

Then I load the video player like this:

componentDidMount () {
  var player = videojs('videoPlayer')
  player.src(this.props.src)
}

My video element is:

<video id='videoPlayer' ref='videoPlayer' width='100%' className='video-js vjs-default-skin' controls>
  <source
     src={src}
     type='application/x-mpegURL' />
</video>

And the result is:

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.

I know that player.src(this.props.src) and src={src} is redundant, but If I don't do that I get undefined as src.

The versions I'm using are:

• video.js: 5.10.2
• videojs-contrib-hsl: 3.0.3

EDIT: I've trying to load this sample video http://s3.amazonaws.com/_bc_dml/example-content/tears-of-steel/playlist.m3u8 . With the ES5 configuration it's working.

[david-fenton]

Instead of calling player.src immediately have you tried to use player.ready and then set the source in a provided callback in componentDidMount? I know this isn't answering your question but just trying to remove the redundancy.

[xJoshx]

Nope, but it's a good idea

[gkatsev]

I think it's because contrib-hls doesn't really work with webpack: videojs/videojs-contrib-hls#600. You can shim it to load the distributed file as written in a comment.
Closing the issue because I think that discussion should continue in videojs/videojs-contrib-hls#600, if necessary.
If it turns out to be a separate problem, we can re-open this.