Videojs.com

Video.js Blog

Gary Katsevman2019-01-11

Video.js 7.4

It's time to have an overview of Video.js 7.4, first released early December. The big new feature for this release is a UI that allows you to seek during live streams. We updated focus-visible to work with our Menus, added more translations, added a replay option to the Play/Pause button, and many, many fixes, multiple of which are accessibility related.

We also dropped our usage of Grunt from our build process. We owe a lot to Grunt as it has served us well but it was time to move on.

Video.js 7.4.1 is currently the latest release with 7.4.2 out as a pre-release until next week.

Thanks

Before continuing, I'd like to thank everyone that was involved, we really appreciate your contributions! There were a total of 14 first time contributors, I think this is a historic high for us and I hope this continues!

Live UI

Video.js has supported live streams for a while, either natively, or via videojs-http-streaming (VHS). However, this UI was very minimal, it disabled the progress bar and basically only allowed pausing, though, there was an indicator that this was a live stream.

Video.js, with the new Live UI, playing a live stream
Video.js, with the new Live UI, playing a live stream

The new UI looks pretty similar to the previous live UI and the regular control bar. The "live" indicator moves to the right side of the progress bar and also indicates whether we are playing back live or we are behind live. Clicking this button will seek to the "live point". The time displays and tooltips will show time with respect to the live point; so, current time at the live point will be 0 and if you seek back 30 seconds it'll show -00:30.

This feature is still somewhat experimental, so, it is behind an option that is off by default. We hope that you try it out and give us feedback and that we can enable it by default in a future release.

To enable the feature, pass in liveui: true to the player: In JavaScript:

var player = videojs('my-id', {
  liveui: true
  }
);

Or HTML:

<video-js id="my-id" data-setup='{"liveui": true}'}>
  <source src="https://example.com/live.m3u8" type="application/x-mpegurl">
</video-js>

Languages

We've had a bunch of language additions and updates in the 7.4 release line. In addition, we now copy the JSON files into the dist/lang folder for easier inclusion your projects.

Languages added and updated

  • Occitan (oc)
  • Russian (ru)
  • Welsh/Cymraeg (cy)
  • Ukrainian (uk)
  • Serbian (sr)
  • Swedish (sv)

Accessibility

As always, we aim to make Video.js as accessible and usable as we can. To that end, we've had a bunch of accessibility related fixes in these releases.

  • Time displays accessibility with VoiceOver
  • remove hidden control text in progress bar
  • make the seek-to-live button announce itself to screen readers properly
  • Make the - in the remaining time display be visual only and not readable by screen readers

Other Features Updates

Responsive Captions Settings Dialog

This uses the new responsive setting and breakpoints to make the dialog respond to the size of the player and improves the user experience.

replay option for PlayToggle

The PlayToggle button changes the icon to a replay icon when the video ends, most users don't mind it and it was a highly requested feature previously. This adds an option to turn it off.

focus-visisble menu backgrounds

Like outlines for other buttons, we use a different background color to represent the focus in menus. We should respect focus-visible there like we do for outlines in buttons.

playerreset event

When the player is reset with the reset() method, it'll now trigger a playerreset event to let components and users know.

Other Fixes

  • Fix fullscreen event triggering twice (7.4.2)
  • PlayToggle cursor pointer
  • select default subtitles on loadedmetadata not loadstart
  • don't apply user preference to subtitles if no language is set
  • make sure that vjs-waiting is only removed if we started playback again
  • allow duration to be set to NaN, making Video.js more spec compliant
  • fix locking menus when the menu button is pressed
  • remove child component from old parent when moving the component to a new parent
  • remove vjs-ended when seeking after video has ended
  • don't autohide the control bar when hovering with the mouse

Full CHANGELOG for 7.4.0, 7.4.1, and 7.4.2

## [7.4.2](https://github.com/videojs/video.js/compare/v7.4.1...v7.4.2) (2019-01-08)

Bug Fixes

  • Control-bar autohide when cursor placed over it #5258 (#5692) (6ebc772)
  • css animation shorthand property order (#5687) (0e69ce9)
  • fs: make sure there's only one fullscreenchange event (#5686) (2bc90a1), closes #5685
  • lang: adds sv translation used by liveui component (#5704) (f38726e)
  • package: update @videojs/http-streaming to version 1.6.0 🚀 (#5705) (3d093ed)
  • player: remove vjs-ended class on seeked (#5728) (f1637cd), closes #5654
  • remaining-time-display: make the '-' be visual and not readable by screen readers (#5671) (05513f8), closes #5168
  • seekbar: don't disable if live tracker's seekable is infinity (#5721) (7f507df)
  • remove child from old parent when moving to new parent via addChild (#5702) (8a3e2a7)

Chores

Documentation

  • liveui: Add a guide for the live ui and live api (#5677) (c147581)
## [7.4.1](https://github.com/videojs/video.js/compare/v7.4.0...v7.4.1) (2018-12-11)

Bug Fixes

Chores

  • package: update autoprefixer to version 9.4.2 (#5647) (19f3465)
  • package: update rollup-plugin-node-resolve to version 4.0.0 🚀 (#5666) (d07b6c2)

Documentation

  • remove grunt and update usage of build scripts (#5656) (62f9e78)

Tests

  • verify null-checks with player and control bar children set to false (#5670) (13b42ad)
# [7.4.0](https://github.com/videojs/video.js/compare/v7.3.0...v7.4.0) (2018-12-03)

Features

Bug Fixes

  • add correct cursor pointer for the play toggle (#5463) (aed337a)
  • default subtitles not enabled (#5608) (8329e64)
  • tracks: don't select tracks based on user pref if no langauge is set (#5556) (c1cbce3), closes #5553
  • Don't remove vjs-waiting until time changes (#5533) (0060747)
  • lang: add is loading ru translation (#5630) (0090b75)
  • lang: Occitan: harmonisation plural/singular (#5602) (4842201)
  • package: update @videojs/http-streaming to version 1.4.2 🚀 (#5543) (dbaca33)
  • package: update @videojs/http-streaming to version 1.5.0 🚀 (#5587) (d95ef6f)
  • duration reset and allow duration NaN or 0 for duration display (#5348) (ab0e29a), closes #5347
  • not inline volume slider showing up after mouse hovering on it (#5503) (7d127c8), closes #5502 #5505
  • vjs-lock-showing class gets removed from menu when no longer hovering on menu-button. (#5465) (58f638e), closes #1690

Chores

Documentation