video.js throws InvalidStateError in Internet Explorer

Question

Using video.js in IE11 the player is failing to load video segments.

If I look in the console I see an "InvalidStateError" error.

The offending line is within the xhr library dependency of the video.js package:

// node_modules/video.js/node_modules/xhr/index.js#L210
|  if ("responseType" in options) {
>     xhr.responseType = options.responseType
|  }

If I remove this line manually on my computer the player will work.

How can I get around this? I am building my application with webpack.

Answer 1

It's hacky, but you can use the webpack-plugin-replace plugin to remove the line by replacing it with an empty string.

// fixes "InvalidStateError" in IE which occurs at:
// node_modules/video.js/node_modules/xhr/index.js#L210
new ReplacePlugin({
  include: [
    "/node_modules/video.js/node_modules/xhr/index.js"
  ],
  patterns: [
    {
      regex: /xhr\.responseType = options\.responseType/,
      value: ''
    }
  ],
  // required due to a bug in `webpack-plugin-replace`
  // see: https://github.com/lukeed/webpack-plugin-replace/issues/6
  values: {
    "": ""
  }
})