Video.js 5.0 Sneak Peek Release Candidate – No More IE 8! – Fresh new look

No More IE 8!

Just kidding.

But baby steps

A shim is required, so a conscious decision is required.

Die IE8. Die.

Fresh new look

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

Base theme by default [5.1]

• The base theme will be prepended to the document head. Just the VJS JS include now gets you a functioning player!
• Not interested? Simply set window.VIDEOJS_NO_BASE_THEME = true

Tiny customization stylesheets

.vjs-skin-hotdog-stand { color: #FF0000; }
.vjs-skin-hotdog-stand .vjs-control-bar { background: #FFFF00; }
.vjs-skin-hotdog-stand .vjs-play-progress { background: #FF0000; }

Moar accessibility

Tab order isn't an issue anymore! Woo!

And more...

• Spacer Element
• border-box by default
• Volume Menu Button by default

Example Skins

• Twitchy
• Colors

Internal house cleaning

I know none of you have experienced technical debt...

Load all the things

Only really an issue in development

var Component = require('../component.js');
var LiveDisplay = Component.extend({ /* */ });

var Button = require('../button.js');
var FullscreenToggle = Button.extend({ /* */ });

But wait! There's more!

ES6 ES2015

import Component from '../component.js';
class LiveDisplay extends Component { /* */ };

let foo = 'bar';
const thing = 'will not change';
let { foo, bar, bat } = someObject;
let templateStr = `calling all ${peopleType}`;
let square = a => a * a;

Via the Babelify Browserify transform

Improved captions support

Captions are harder than you think. Native and / or Flash...

(╯°□°）╯︵ ┻━┻

Back when WebVTT was but a child

~50 lines of code to parse a cue

Enter: FCC

Accessibility is always important, but thanks to requirements, everyone's taking notice.

VTT.js to the rescue

We're working on bundling VTT.js for robust WebVTT support.

Improved processes

Mmmm...nothing says "sexy" like "streamlined deployment processes"

No more property mangling

Removed aggressive object property mangling (Closure Compiler)

You mean videojs.b and videojs.A don't exist anymore?!

Standard Naming Conventions

• video.js ==> video.min.js
• video.dev.js ==> video.js

Extensions, extensions, extensions

Actual guidelines for writing and publishing skins / plugins

Everything on NPM

Because package managers installed with a package manager are dumb.

Yeah. I said it.