Another month, another Video.js release: v7.3.0. This release brings a long wanted feature: Responsive Layout. In addition, Fill Mode has been promoted to a first-class feature and createLogger was added to make debugging and logging easier.

This is currently out as a pre-release and will be promoted to latest in about a week. Please try it out and report any issues you find.

Thanks

I'd like to thank everyone that was involved in making changes that landed in this release. Any and all changes are really appreciated.

• @BrandonOCasey
• @chrisrng
• @syranez
• @misteroneill
• @OwenEdwards

Responsive Mode

Responsive Mode will make the player adjust UI components to the size of the player. It uses the playerresize event that was added in v6.7.0 of Video.js, which allows us to know when the player changes sizes.

Responsive mode will set and change certain breakpoint classes like vjs-layout-small when the player size changed. These can be configured. Depending on which class is currently on the player, the control bar and other UI elements can adapt. For example, with vjs-layout-small, the time controls will not show because the time tooltips on the progress bar are available and the captions button is more important. At a larger size, both can be shown without a problem.

You can find out how to enable Responsive Mode and more in our docs page. There is also an example playground in the sandbox folder in the repo.

Fill Mode

Fill Mode allows the Video.js player to resize dynamically, but stay contained within the bounds of the parent container. This is analogous to Fluid Mode, but sometimes you the container is already being sized properly.

Fill Mode is not a brand new mode, the class vjs-fill has been available in Video.js for quite a while. This finally makes it a first-class feature to go along with Fluid Mode.

createLogger

This is a new method on videojs.log that allows you to create a new logger with a specific name. It then creates a chain of names to make it easier to track which component logged this particular message. In particular, this can help plugin authors to log messages and then filter out only the messages that are associated with their plugin.

createLogger returns a function with the same API as videojs.log. You can see it in action below.

Examples

A new method, player.log was added which uses createLogger behind the scenes. It logs the player ID in addition to VIDEOJS:

var player = videojs('myid');

player.log('foo');
// VIDEOJS: myid: foo

You can also go further and create a sub logger:

var player = videojs('myid');
var mylog = player.log.createLogger('my-plugin');

mylog.log('foo');
// VIDEOJS: myid: my-plugin: foo

If you want to log a warning or error for your custom plugin:

var player = videojs('myid');
var mylog = player.log.createLogger('my-plugin');

mylog.log.warn('foo');
// VIDEOJS: myid: my-plugin: WARN: foo

mylog.log.error('bar');
// VIDEOJS: vid1: my-plugin: ERROR: bar