Video.js Guides

These guides cover a range of topics for users of Video.js

Webpack and Video.js

Table of Contents

Video.js and official libraries and plugins work in a Webpack-based build environment, however some configuration may be needed to ensure code that is executed in workers is not broken by transpilation.

The solutions documented by the Mapbox project apply:

  1. Either set the production browserslist to
"not dead",
"not op_mini all",
"not safari < 10",
"not chrome < 51",
"not android < 5",
"not ie < 12"
  1. Or import using the ! syntax
// eslint-disable-next-line import/no-webpack-loader-syntax
import videojs from "!video.js";

Video.js CSS:

You may need to add style-loader to your Webpack configuration.

Then add the CSS that the player requires, add the following to the file where the player is also included or initialized: