6.0.1

videojs.browser.IE_VERSION is null in IE11 because IE11 uses a different user agent string than other IE versions

Fixes #4278

.gitignore

@@ -10,7 +10,7 @@ test/*.map
 .s3config.json
 
 node_modules
-npm-debug.log
+npm-debug.log*
 
 sandbox/*
 !sandbox/*.example

.npmignore

@@ -3,3 +3,4 @@
 !dist/**
 !es5/**
 !src/css/**
+!docs/api/**

.travis.yml

@@ -13,6 +13,8 @@ notifications:
     on_success: never
   webhooks:
     - http://pam.videojs.com/savage/travis
+  slack:
+    secure: LrF8K6mCYWlUt6SvdbGHazyQZSk/opKoiB/wgoGYaGc9+3wYXkVexY0WkO1m6wBKhUqXRAMVMFszr1wqKgdcxtItmFMMj8HqTLI1MVqgKqYX4Ux3CnEHJQiwxIk0aVL7lHLsZTXV/2Y0QIOYmAnCrgy46klETrk0ZuXf5okpu2Q=
 env:
   global:
     - secure: K6JpKwMkfNaJix3Bb0tLjVMzHMJgtBXdd/dvfw1BMb9DCBpd81PqXbDs7yXCddUxnUPTBPxZCrQgWsw71Wn+qEoIG5MU3uOT5A2rBbx/yZonVAGv5ed/9w0xk0OzO383CmPMFqwqtp9YmdmqGjQBkYXVXJjTvNTOAExFSdhO+3U=

CHANGELOG.md

@@ -1,3 +1,290 @@
+<a name="6.0.1"></a>
+## [6.0.1](https://github.com/videojs/video.js/compare/v6.0.0...v6.0.1) (2017-04-13)
+
+### Bug Fixes
+
+* set IE_VERSION correctly for IE11 ([#4281](https://github.com/videojs/video.js/issues/4281)) ([1ea0041](https://github.com/videojs/video.js/commit/1ea0041)), closes [#4278](https://github.com/videojs/video.js/issues/4278)
+* techOrder names can be camelCased. ([#4277](https://github.com/videojs/video.js/issues/4277)) ([92e5d9f](https://github.com/videojs/video.js/commit/92e5d9f))
+
+### Chores
+
+* **changelog:** Update CHANGELOG with v5 changes ([#4257](https://github.com/videojs/video.js/issues/4257)) ([c20ca5c](https://github.com/videojs/video.js/commit/c20ca5c))
+* add slack travis notifications ([#4282](https://github.com/videojs/video.js/issues/4282)) ([7490a49](https://github.com/videojs/video.js/commit/7490a49))
+* gitignore all npm-debug.log.* ([#4252](https://github.com/videojs/video.js/issues/4252)) ([083f643](https://github.com/videojs/video.js/commit/083f643))
+
+### Documentation
+
+* **component:** Replace VolumeMenuButton with VolumePanel in component tree ([#4267](https://github.com/videojs/video.js/issues/4267)) ([02721c7](https://github.com/videojs/video.js/commit/02721c7)), closes [#4266](https://github.com/videojs/video.js/issues/4266)
+* add a Webpack usage guide ([#4261](https://github.com/videojs/video.js/issues/4261)) ([230743e](https://github.com/videojs/video.js/commit/230743e))
+* remove mentions of bower support ([#4274](https://github.com/videojs/video.js/issues/4274)) ([39fd73f](https://github.com/videojs/video.js/commit/39fd73f))
+
+<a name="6.0.0"></a>
+# [6.0.0](https://github.com/videojs/video.js/compare/v5.16.0...v6.0.0) (2017-04-03)
+
+### Features
+
+* `videojs.getTech` works with `TitleCase` or `camelCase` names ([#4010](https://github.com/videojs/video.js/issues/4010)) ([a8f2e43](https://github.com/videojs/video.js/commit/a8f2e43)), closes [#3986](https://github.com/videojs/video.js/issues/3986)
+* add a controlText function to MenuButton ([#4125](https://github.com/videojs/video.js/issues/4125)) ([4388bea](https://github.com/videojs/video.js/commit/4388bea))
+* Advanced Class-based Plugins for 6.0 ([#3690](https://github.com/videojs/video.js/issues/3690)) ([8d1653a](https://github.com/videojs/video.js/commit/8d1653a))
+* allow seeking in full height of progress control ([#4004](https://github.com/videojs/video.js/issues/4004)) ([29c6141](https://github.com/videojs/video.js/commit/29c6141))
+* allow tokens in localize, localize progress bar time ([#4060](https://github.com/videojs/video.js/issues/4060)) ([db01120](https://github.com/videojs/video.js/commit/db01120)), closes [#4024](https://github.com/videojs/video.js/issues/4024)
+* Combine captions and subtitles tracks control ([#4028](https://github.com/videojs/video.js/issues/4028)) ([74eb5d4](https://github.com/videojs/video.js/commit/74eb5d4))
+* don't throw when re-registering a plugin unless it's a player method ([#4140](https://github.com/videojs/video.js/issues/4140)) ([326398d](https://github.com/videojs/video.js/commit/326398d))
+* Expose Tech#resize event as Player#resize ([#3979](https://github.com/videojs/video.js/issues/3979)) ([e176b56](https://github.com/videojs/video.js/commit/e176b56))
+* **lang:** Update tr.json ([#3989](https://github.com/videojs/video.js/issues/3989)) ([37a6811](https://github.com/videojs/video.js/commit/37a6811))
+* fix accessibility of the captions setting dialog ([#4050](https://github.com/videojs/video.js/issues/4050)) ([0d0dea4](https://github.com/videojs/video.js/commit/0d0dea4)), closes [#2746](https://github.com/videojs/video.js/issues/2746) [#2746](https://github.com/videojs/video.js/issues/2746)
+* localize all strings in captions settings ([#3974](https://github.com/videojs/video.js/issues/3974)) ([8e7d8cc](https://github.com/videojs/video.js/commit/8e7d8cc))
+* Log Levels ([#3853](https://github.com/videojs/video.js/issues/3853)) ([844e4f0](https://github.com/videojs/video.js/commit/844e4f0))
+* make `registerTech` add that tech to the default `techOrder` ([#3985](https://github.com/videojs/video.js/issues/3985)) ([c2545dd](https://github.com/videojs/video.js/commit/c2545dd))
+* Make pause on open optional for ModalDialog via options ([#4186](https://github.com/videojs/video.js/issues/4186)) ([90030d5](https://github.com/videojs/video.js/commit/90030d5))
+* **lang:** update Vietnamese lang file ([#3964](https://github.com/videojs/video.js/issues/3964)) ([1463e50](https://github.com/videojs/video.js/commit/1463e50))
+* Make text tracks settings more responsive ([#4236](https://github.com/videojs/video.js/issues/4236)) ([9274457](https://github.com/videojs/video.js/commit/9274457))
+* middleware ([#3788](https://github.com/videojs/video.js/issues/3788)) ([34aab3f](https://github.com/videojs/video.js/commit/34aab3f))
+* modal dialog accessibility updates ([#4025](https://github.com/videojs/video.js/issues/4025)) ([eddc1d7](https://github.com/videojs/video.js/commit/eddc1d7))
+* remove flash tech ([#3956](https://github.com/videojs/video.js/issues/3956)) ([b387437](https://github.com/videojs/video.js/commit/b387437))
+* Replay at ended ([#3868](https://github.com/videojs/video.js/issues/3868)) ([ce6acc8](https://github.com/videojs/video.js/commit/ce6acc8))
+* Restore all outlines for greater accessibility ([#3829](https://github.com/videojs/video.js/issues/3829)) ([29ffbfb](https://github.com/videojs/video.js/commit/29ffbfb))
+* Return the native Promise from play() ([#3907](https://github.com/videojs/video.js/issues/3907)) ([091bdf9](https://github.com/videojs/video.js/commit/091bdf9))
+* Stateful Components ([#3960](https://github.com/videojs/video.js/issues/3960)) ([d7d7cfe](https://github.com/videojs/video.js/commit/d7d7cfe))
+* Time Tooltips ([#3836](https://github.com/videojs/video.js/issues/3836)) ([1ba1f5a](https://github.com/videojs/video.js/commit/1ba1f5a))
+* time tooltips will not be added to a player on mobile devices ([#4185](https://github.com/videojs/video.js/issues/4185)) ([d79b8a7](https://github.com/videojs/video.js/commit/d79b8a7))
+* toggle playback with space when focused on seekbar ([#4005](https://github.com/videojs/video.js/issues/4005)) ([516c9f9](https://github.com/videojs/video.js/commit/516c9f9))
+* unmute goes back to previously selected volume ([#3942](https://github.com/videojs/video.js/issues/3942)) ([cb42fcf](https://github.com/videojs/video.js/commit/cb42fcf)), closes [#3909](https://github.com/videojs/video.js/issues/3909)
+* Update MW to require a factory, add *-mw ([#3969](https://github.com/videojs/video.js/issues/3969)) ([0352916](https://github.com/videojs/video.js/commit/0352916))
+* update videojs-vtt.js and wrap native cues in TextTrack ([#4115](https://github.com/videojs/video.js/issues/4115)) ([96a387f](https://github.com/videojs/video.js/commit/96a387f)), closes [#4093](https://github.com/videojs/video.js/issues/4093)
+* wrap menu item text in a span ([#4026](https://github.com/videojs/video.js/issues/4026)) ([5748c36](https://github.com/videojs/video.js/commit/5748c36)), closes [#4017](https://github.com/videojs/video.js/issues/4017)
+* **lang:** add European Portuguese translation ([#3955](https://github.com/videojs/video.js/issues/3955)) ([8888e2b](https://github.com/videojs/video.js/commit/8888e2b))
+* **lang:** DE and FR translations of replay ([#3963](https://github.com/videojs/video.js/issues/3963)) ([a0ba8e2](https://github.com/videojs/video.js/commit/a0ba8e2))
+* **lang:** French translation update ([#4118](https://github.com/videojs/video.js/issues/4118)) ([8c1302e](https://github.com/videojs/video.js/commit/8c1302e))
+* **lang:** update es.json ([#3984](https://github.com/videojs/video.js/issues/3984)) ([70d2eb1](https://github.com/videojs/video.js/commit/70d2eb1))
+* **player:** add played(), defaultMuted(), defaultPlaybackRate() ([#3845](https://github.com/videojs/video.js/issues/3845)) ([2037e18](https://github.com/videojs/video.js/commit/2037e18)), closes [#523](https://github.com/videojs/video.js/issues/523)
+* **volume panel:** accessibly volume control ([#3957](https://github.com/videojs/video.js/issues/3957)) ([524f868](https://github.com/videojs/video.js/commit/524f868))
+
+### Bug Fixes
+
+* accessibility bugs with the VolumeBar ([#4023](https://github.com/videojs/video.js/issues/4023)) ([da2a1e0](https://github.com/videojs/video.js/commit/da2a1e0)), closes [#4021](https://github.com/videojs/video.js/issues/4021) [#4022](https://github.com/videojs/video.js/issues/4022)
+* add buildWrapperCSSClass methods to all menu buttons ([#4147](https://github.com/videojs/video.js/issues/4147)) ([61d427c](https://github.com/videojs/video.js/commit/61d427c))
+* Add lang attribute to player el, so that css :lang() is correct ([#4046](https://github.com/videojs/video.js/issues/4046)) ([17143fd](https://github.com/videojs/video.js/commit/17143fd))
+* addChild instance names should be toTitleCased ([#4116](https://github.com/videojs/video.js/issues/4116)) ([576ac19](https://github.com/videojs/video.js/commit/576ac19))
+* allow changing volume in full height of volume control ([#3987](https://github.com/videojs/video.js/issues/3987)) ([f87ada1](https://github.com/videojs/video.js/commit/f87ada1))
+* copy basic plugin properties onto the wrapper ([#4100](https://github.com/videojs/video.js/issues/4100)) ([127cd78](https://github.com/videojs/video.js/commit/127cd78))
+* cues at startTime 0 do not fire ([#4152](https://github.com/videojs/video.js/issues/4152)) ([a2b1a33](https://github.com/videojs/video.js/commit/a2b1a33))
+* Disable all time tooltips in IE8, as they are broken ([#4029](https://github.com/videojs/video.js/issues/4029)) ([60bcc99](https://github.com/videojs/video.js/commit/60bcc99))
+* disable title attribute on menu items ([#4019](https://github.com/videojs/video.js/issues/4019)) ([04f23c1](https://github.com/videojs/video.js/commit/04f23c1)), closes [#3699](https://github.com/videojs/video.js/issues/3699)
+* Do not create element for MediaLoader ([#4097](https://github.com/videojs/video.js/issues/4097)) ([1cb0a97](https://github.com/videojs/video.js/commit/1cb0a97))
+* early play should wait for player ready, even if source is available ([#4134](https://github.com/videojs/video.js/issues/4134)) ([3bbf019](https://github.com/videojs/video.js/commit/3bbf019)), closes [#4057](https://github.com/videojs/video.js/issues/4057)
+* EventTarget is also evented ([#3990](https://github.com/videojs/video.js/issues/3990)) ([e34335b](https://github.com/videojs/video.js/commit/e34335b))
+* fix the structure of elements in menus to comply with ARIA requirements ([#4034](https://github.com/videojs/video.js/issues/4034)) ([1b1ba04](https://github.com/videojs/video.js/commit/1b1ba04))
+* focus play toggle from Big Play Btn on play ([#4018](https://github.com/videojs/video.js/issues/4018)) ([4f79e1e](https://github.com/videojs/video.js/commit/4f79e1e)), closes [#2729](https://github.com/videojs/video.js/issues/2729)
+* hide font-icons from assitive technology ([#4006](https://github.com/videojs/video.js/issues/4006)) ([24d2e7b](https://github.com/videojs/video.js/commit/24d2e7b)), closes [#3982](https://github.com/videojs/video.js/issues/3982)
+* improve French translation ([#4062](https://github.com/videojs/video.js/issues/4062)) ([dc4c1eb](https://github.com/videojs/video.js/commit/dc4c1eb))
+* keep minimum volume after unmuting above 0.1 ([#4227](https://github.com/videojs/video.js/issues/4227)) ([16c1e0a](https://github.com/videojs/video.js/commit/16c1e0a)), closes [#4054](https://github.com/videojs/video.js/issues/4054)
+* localize aria-labels ([#4027](https://github.com/videojs/video.js/issues/4027)) ([0ac1269](https://github.com/videojs/video.js/commit/0ac1269)), closes [#2728](https://github.com/videojs/video.js/issues/2728)
+* Make `Player#techCall_()` synchronous again ([#3988](https://github.com/videojs/video.js/issues/3988)) ([3585af0](https://github.com/videojs/video.js/commit/3585af0))
+* make load progress buffered regions height 100% ([#4190](https://github.com/videojs/video.js/issues/4190)) ([424fa51](https://github.com/videojs/video.js/commit/424fa51))
+* make mergeOptions behave the same across browsers ([#4088](https://github.com/videojs/video.js/issues/4088)) ([0da9324](https://github.com/videojs/video.js/commit/0da9324))
+* make sure audio track hides with one item ([#4202](https://github.com/videojs/video.js/issues/4202)) ([0fd7aad](https://github.com/videojs/video.js/commit/0fd7aad))
+* Muting with `MuteToggle` sets ARIA value of `VolumeBar` to 0 ([#4099](https://github.com/videojs/video.js/issues/4099)) ([181a19f](https://github.com/videojs/video.js/commit/181a19f)), closes [#4064](https://github.com/videojs/video.js/issues/4064)
+* not showing default text tracks over video ([#4216](https://github.com/videojs/video.js/issues/4216)) ([dbfba28](https://github.com/videojs/video.js/commit/dbfba28))
+* Patch a memory leak caused by un-removed track listener(s). ([#3976](https://github.com/videojs/video.js/issues/3976)) ([4979ea7](https://github.com/videojs/video.js/commit/4979ea7))
+* Progress holder gaps cause tooltips misalignment and time tooltip outlines ([#4031](https://github.com/videojs/video.js/issues/4031)) ([be27f2a](https://github.com/videojs/video.js/commit/be27f2a)), closes [#3645](https://github.com/videojs/video.js/issues/3645)
+* remaining time display width on IE8 and IE9 ([#3983](https://github.com/videojs/video.js/issues/3983)) ([866a3f3](https://github.com/videojs/video.js/commit/866a3f3))
+* **MenuButton:** Unify behavior of showing/hiding ([#4157](https://github.com/videojs/video.js/issues/4157)) ([c611f9f](https://github.com/videojs/video.js/commit/c611f9f))
+* remove focus ring from player itself ([#4237](https://github.com/videojs/video.js/issues/4237)) ([e98c65d](https://github.com/videojs/video.js/commit/e98c65d))
+* **audio-tracks-button:** add wrapper CSS builder to audio tracks menu button ([#4163](https://github.com/videojs/video.js/issues/4163)) ([d9ec7bc](https://github.com/videojs/video.js/commit/d9ec7bc))
+* **cues:** only copy cue props that don't exist ([#4145](https://github.com/videojs/video.js/issues/4145)) ([0f57341](https://github.com/videojs/video.js/commit/0f57341))
+* **dom:** getBoundingClientRect check that el is defined ([#4139](https://github.com/videojs/video.js/issues/4139)) ([fb88ae2](https://github.com/videojs/video.js/commit/fb88ae2))
+* **icon-placeholder:** align icons on ie8 properly ([#4174](https://github.com/videojs/video.js/issues/4174)) ([1770f00](https://github.com/videojs/video.js/commit/1770f00))
+* **ie8:** various minor ie8 fixes ([#4175](https://github.com/videojs/video.js/issues/4175)) ([cb890a9](https://github.com/videojs/video.js/commit/cb890a9))
+* **package:** update xhr to version 2.4.0 ([#4101](https://github.com/videojs/video.js/issues/4101)) ([5265624](https://github.com/videojs/video.js/commit/5265624))
+* **playback rate menu:** playback rate menu items should be selectable ([#4149](https://github.com/videojs/video.js/issues/4149)) ([a9f8fcb](https://github.com/videojs/video.js/commit/a9f8fcb))
+* **sass:** import path has cwd once again ([#4061](https://github.com/videojs/video.js/issues/4061)) ([caff93f](https://github.com/videojs/video.js/commit/caff93f))
+* **sass:** import path no longer has cwd ([#4001](https://github.com/videojs/video.js/issues/4001)) ([19b429b](https://github.com/videojs/video.js/commit/19b429b)), closes [#3998](https://github.com/videojs/video.js/issues/3998)
+* **subs-caps-button:** add hide threshold to subs-caps button ([#4171](https://github.com/videojs/video.js/issues/4171)) ([88ee6af](https://github.com/videojs/video.js/commit/88ee6af))
+* remove redundant Html5#play() ([405b29b](https://github.com/videojs/video.js/commit/405b29b))
+* removeCue should work with native passed in cue ([#4208](https://github.com/videojs/video.js/issues/4208)) ([f2b5a05](https://github.com/videojs/video.js/commit/f2b5a05))
+* Set MuteButton controlText correctly ([#4056](https://github.com/videojs/video.js/issues/4056)) ([3c1108c](https://github.com/videojs/video.js/commit/3c1108c))
+* silence play promise error ([#4247](https://github.com/videojs/video.js/issues/4247)) ([0908d91](https://github.com/videojs/video.js/commit/0908d91))
+* Solve a typo in translation files ([#4063](https://github.com/videojs/video.js/issues/4063)) ([5540868](https://github.com/videojs/video.js/commit/5540868))
+* support empty src in `Player#src` ([#4030](https://github.com/videojs/video.js/issues/4030)) ([6541467](https://github.com/videojs/video.js/commit/6541467))
+* synchronously shim vtt.js when possible ([#4083](https://github.com/videojs/video.js/issues/4083)) ([e1b4804](https://github.com/videojs/video.js/commit/e1b4804))
+* trap tab focus in modal when hitting s-tab ([#4075](https://github.com/videojs/video.js/issues/4075)) ([1f7a842](https://github.com/videojs/video.js/commit/1f7a842)), closes [#4049](https://github.com/videojs/video.js/issues/4049)
+* updating time tooltips when player not in DOM ([#3991](https://github.com/videojs/video.js/issues/3991)) ([22aade1](https://github.com/videojs/video.js/commit/22aade1))
+* **subs-caps-button:** add wrapper CSS builder to subs caps button ([#4156](https://github.com/videojs/video.js/issues/4156)) ([e5af0a5](https://github.com/videojs/video.js/commit/e5af0a5))
+* **subs-caps-button:** captions items should hide icon from SR ([#4158](https://github.com/videojs/video.js/issues/4158)) ([2ee133f](https://github.com/videojs/video.js/commit/2ee133f))
+* **text track settings:** focus subs-caps button if exists over CC button ([#4155](https://github.com/videojs/video.js/issues/4155)) ([db901c5](https://github.com/videojs/video.js/commit/db901c5))
+* **tracks:** allow forcing native text tracks on or off ([#4172](https://github.com/videojs/video.js/issues/4172)) ([67634cf](https://github.com/videojs/video.js/commit/67634cf))
+* **vttjs:** wait till tech el in DOM before loading vttjs ([#4177](https://github.com/videojs/video.js/issues/4177)) ([ddde644](https://github.com/videojs/video.js/commit/ddde644))
+
+### Chores
+
+* 6.x build updates ([#4228](https://github.com/videojs/video.js/issues/4228)) ([6d876ee](https://github.com/videojs/video.js/commit/6d876ee))
+* Add flash as a dev dependency for testing ([#4016](https://github.com/videojs/video.js/issues/4016)) ([4949619](https://github.com/videojs/video.js/commit/4949619))
+* change accessibility test in grunt.js to remove unnecessary warning message. ([#4143](https://github.com/videojs/video.js/issues/4143)) ([dacf0ca](https://github.com/videojs/video.js/commit/dacf0ca))
+* **package:** update remark-validate-links to version 6.0.0 ([#4128](https://github.com/videojs/video.js/issues/4128)) ([1395677](https://github.com/videojs/video.js/commit/1395677))
+* ignore qunit and sinon from greenkeeper ([#4242](https://github.com/videojs/video.js/issues/4242)) ([29d733d](https://github.com/videojs/video.js/commit/29d733d))
+* increase browserstack/karma timeouts, dispose player in tests ([#4135](https://github.com/videojs/video.js/issues/4135)) ([6874fa2](https://github.com/videojs/video.js/commit/6874fa2))
+* only report errors during linting in the build process, not warnings ([#4041](https://github.com/videojs/video.js/issues/4041)) ([6208e4b](https://github.com/videojs/video.js/commit/6208e4b))
+* remove bower.json ([#4238](https://github.com/videojs/video.js/issues/4238)) ([0d19a05](https://github.com/videojs/video.js/commit/0d19a05)), closes [#4012](https://github.com/videojs/video.js/issues/4012)
+* **package:** update webpack to version 2.3.0 ([#4219](https://github.com/videojs/video.js/issues/4219)) ([0223057](https://github.com/videojs/video.js/commit/0223057))
+* Remove component.json and remove references to it ([#3866](https://github.com/videojs/video.js/issues/3866)) ([0bba319](https://github.com/videojs/video.js/commit/0bba319))
+* **docs:** Use Elephants Dream video files from CDN for docs/examples/elephantsdream/ ([#4181](https://github.com/videojs/video.js/issues/4181)) ([af1c6e3](https://github.com/videojs/video.js/commit/af1c6e3))
+* **package:** pin karma to 1.3.0 ([#4002](https://github.com/videojs/video.js/issues/4002)) ([5b8b41e](https://github.com/videojs/video.js/commit/5b8b41e))
+* **package:** update remark-cli to version 3.0.0 ([#4126](https://github.com/videojs/video.js/issues/4126)) ([dc9ed1c](https://github.com/videojs/video.js/commit/dc9ed1c))
+* **package:** update remark-lint to version 6.0.0 ([#4129](https://github.com/videojs/video.js/issues/4129)) ([9ef2d07](https://github.com/videojs/video.js/commit/9ef2d07))
+* **package:** update remark-toc to version 4.0.0 ([#4127](https://github.com/videojs/video.js/issues/4127)) ([d5a619d](https://github.com/videojs/video.js/commit/d5a619d))
+* **package:** update uglify-js to version 2.8.8 ([#4170](https://github.com/videojs/video.js/issues/4170)) ([bf787bd](https://github.com/videojs/video.js/commit/bf787bd)), closes [#4138](https://github.com/videojs/video.js/issues/4138)
+* **package:** update videojs-vtt.js to version 0.12.3 ([#4221](https://github.com/videojs/video.js/issues/4221)) ([7d12c9e](https://github.com/videojs/video.js/commit/7d12c9e))
+* **package:** update xhr to version 2.3.3 ([#3914](https://github.com/videojs/video.js/issues/3914)) ([924fb27](https://github.com/videojs/video.js/commit/924fb27))
+* switch from ghooks to husky ([#4074](https://github.com/videojs/video.js/issues/4074)) ([c3b1d68](https://github.com/videojs/video.js/commit/c3b1d68))
+* **sandbox:** Fix poster image to match the video in the 'combined-tracks.html' example in sandbox ([#4164](https://github.com/videojs/video.js/issues/4164)) ([5ffe1cd](https://github.com/videojs/video.js/commit/5ffe1cd))
+* **sandbox:** Use Elephants Dream video files from CDN for the sandbox/descriptions.html.example. ([#4137](https://github.com/videojs/video.js/issues/4137)) ([715f584](https://github.com/videojs/video.js/commit/715f584))
+* **test:** silence plugin warning from test ([#4173](https://github.com/videojs/video.js/issues/4173)) ([05e6494](https://github.com/videojs/video.js/commit/05e6494))
+* **tests:** make tests not print out errors ([#4141](https://github.com/videojs/video.js/issues/4141)) ([f95815b](https://github.com/videojs/video.js/commit/f95815b))
+
+### Code Refactoring
+
+* Buttons will always use a button element ([#3828](https://github.com/videojs/video.js/issues/3828)) ([c340dbc](https://github.com/videojs/video.js/commit/c340dbc))
+* do not allow adding children with options passed in as a boolean ([#3872](https://github.com/videojs/video.js/issues/3872)) ([b07143d](https://github.com/videojs/video.js/commit/b07143d))
+* Evented Components ([#3959](https://github.com/videojs/video.js/issues/3959)) ([4c3b60c](https://github.com/videojs/video.js/commit/4c3b60c))
+* expose tech but warn without safety var ([#3916](https://github.com/videojs/video.js/issues/3916)) ([8622b26](https://github.com/videojs/video.js/commit/8622b26))
+* Make registerComponent only work with Components ([#3802](https://github.com/videojs/video.js/issues/3802)) ([57af15c](https://github.com/videojs/video.js/commit/57af15c))
+* move most volume panel functionality into css state ([#3981](https://github.com/videojs/video.js/issues/3981)) ([2e2ac6f](https://github.com/videojs/video.js/commit/2e2ac6f))
+* MuteToggle#update ([#4058](https://github.com/videojs/video.js/issues/4058)) ([a04f387](https://github.com/videojs/video.js/commit/a04f387))
+* Remove custom UMD ([#3826](https://github.com/videojs/video.js/issues/3826)) ([2014120](https://github.com/videojs/video.js/commit/2014120))
+* Remove deprecated features of extend/Component#extend ([#3825](https://github.com/videojs/video.js/issues/3825)) ([f8aed4d](https://github.com/videojs/video.js/commit/f8aed4d))
+* Remove method Chaining from videojs ([#3860](https://github.com/videojs/video.js/issues/3860)) ([8f07f5d](https://github.com/videojs/video.js/commit/8f07f5d))
+* remove special loadstart handling ([#3906](https://github.com/videojs/video.js/issues/3906)) ([73b6316](https://github.com/videojs/video.js/commit/73b6316))
+* Remove TimeRanges without an index deprecation warning ([#3827](https://github.com/videojs/video.js/issues/3827)) ([e12bedb](https://github.com/videojs/video.js/commit/e12bedb))
+* Remove unused defaultVolume option default ([#3915](https://github.com/videojs/video.js/issues/3915)) ([5377ffc](https://github.com/videojs/video.js/commit/5377ffc))
+* unify all Track and TrackList APIs ([#3783](https://github.com/videojs/video.js/issues/3783)) ([49bed07](https://github.com/videojs/video.js/commit/49bed07))
+
+### Documentation
+
+* Add MediaLoader to components list ([#4070](https://github.com/videojs/video.js/issues/4070)) ([65dc81a](https://github.com/videojs/video.js/commit/65dc81a))
+* Expand testing info in `CONTRIBUTING.md` ([#4020](https://github.com/videojs/video.js/issues/4020)) ([2da4e76](https://github.com/videojs/video.js/commit/2da4e76))
+* fix broken links to guides in the faq ([#3973](https://github.com/videojs/video.js/issues/3973)) ([58f2349](https://github.com/videojs/video.js/commit/58f2349))
+* fix links in generated docs ([#4200](https://github.com/videojs/video.js/issues/4200)) ([61e2078](https://github.com/videojs/video.js/commit/61e2078))
+* fixup global jsdoc members ([#4015](https://github.com/videojs/video.js/issues/4015)) ([6ad1e5c](https://github.com/videojs/video.js/commit/6ad1e5c))
+* minor fix to currentTime() comment: "setting" not "getting" ([#3944](https://github.com/videojs/video.js/issues/3944)) ([6578ed9](https://github.com/videojs/video.js/commit/6578ed9))
+* **coc:** introduce CODE_OF_CONDUCT.md ([#4160](https://github.com/videojs/video.js/issues/4160)) ([312b10c](https://github.com/videojs/video.js/commit/312b10c))
+* ran `npm run docs:fix` to update TOC on guides ([#3971](https://github.com/videojs/video.js/issues/3971)) ([de3945d](https://github.com/videojs/video.js/commit/de3945d))
+* **guide:** Add a `ModalDialog` guide ([#3961](https://github.com/videojs/video.js/issues/3961)) ([7b0d738](https://github.com/videojs/video.js/commit/7b0d738))
+* **guides:** Add a basic ReactJS guide and update the FAQ ([#3972](https://github.com/videojs/video.js/issues/3972)) ([05b39fe](https://github.com/videojs/video.js/commit/05b39fe))
+* replace 'autoPlay' by 'autoplay' ([#4080](https://github.com/videojs/video.js/issues/4080)) ([7ab52d1](https://github.com/videojs/video.js/commit/7ab52d1)), closes [#3995](https://github.com/videojs/video.js/issues/3995)
+* tech order will only have html5 by default ([#4188](https://github.com/videojs/video.js/issues/4188)) ([41be5dc](https://github.com/videojs/video.js/commit/41be5dc))
+* **guides:** fix typos in faq guide ([#4067](https://github.com/videojs/video.js/issues/4067)) ([2433915](https://github.com/videojs/video.js/commit/2433915))
+* **guides:** fix typos in functions guide ([#4035](https://github.com/videojs/video.js/issues/4035)) ([0fc2c1c](https://github.com/videojs/video.js/commit/0fc2c1c))
+* **jsdoc:** introduce a jsdoc template and build on publish ([#3910](https://github.com/videojs/video.js/issues/3910)) ([e642295](https://github.com/videojs/video.js/commit/e642295))
+
+### Tests
+
+* **ie8:** only run mute toggle tests in html5 env ([#4003](https://github.com/videojs/video.js/issues/4003)) ([5bde16a](https://github.com/videojs/video.js/commit/5bde16a))
+* add tests for obj.assign util ([#4014](https://github.com/videojs/video.js/issues/4014)) ([fcb5aa8](https://github.com/videojs/video.js/commit/fcb5aa8))
+* fix IE9 rounding issue with lastvolume test ([#4230](https://github.com/videojs/video.js/issues/4230)) ([46dd0aa](https://github.com/videojs/video.js/commit/46dd0aa))
+* fix tests ([#3953](https://github.com/videojs/video.js/issues/3953)) ([7bafcc2](https://github.com/videojs/video.js/commit/7bafcc2))
+
+
+### BREAKING CHANGES
+
+* setting the source is now asynchronous. `sourceOrder` option removed and made the default.
+* remove deprecated features.
+* **volume panel:** remove VolumeMenuButton, introduce a new default volume control: VolumePanel.
+* removal of `keepTooltipsInside` option.
+* some externally accessibly functions for tracks are now private.
+* player methods no longer return a player instance when called. Fixes #3704.
+* removal of component.json
+* remove flash tech from core.
+* restoring the outlines changes the skin slightly and potentially break users. Fixes #3200.
+* registerComponent now throws if no name or not a component is passed in.
+* remove the double loadstart handlers that dispose the tech/source handlers if a secondary loadstart event is heard.
+* remove ability to add children with options as a boolean.
+* removing ability to use TimeRange methods without an index.
+* button component will always use a button element.
+* `play()` no longer returns the player object but instead the native Promise or nothing.
+
+<a name="5.19.1"></a>
+## [5.19.1](https://github.com/videojs/video.js/compare/v5.19.0...v5.19.1) (2017-03-27)
+
+### Bug Fixes
+
+* not showing default text tracks over video ([#4217](https://github.com/videojs/video.js/issues/4217)) ([4653922](https://github.com/videojs/video.js/commit/4653922))
+* removeCue should work with native passed in cue ([#4209](https://github.com/videojs/video.js/issues/4209)) ([3974944](https://github.com/videojs/video.js/commit/3974944))
+
+### Chores
+
+* **package:** update videojs-vtt.js to 0.12.3 ([#4223](https://github.com/videojs/video.js/issues/4223)) ([ad770fb](https://github.com/videojs/video.js/commit/ad770fb))
+
+<a name="5.19.0"></a>
+# [5.19.0](https://github.com/videojs/video.js/compare/v5.18.4...v5.19.0) (2017-03-15)
+
+### Features
+
+* Make pause on open optional for ModalDialog via options ([#4187](https://github.com/videojs/video.js/issues/4187)) ([4ec3b56](https://github.com/videojs/video.js/commit/4ec3b56))
+
+### Bug Fixes
+
+* make load progress buffered regions height 100% ([#4191](https://github.com/videojs/video.js/issues/4191)) ([398c6e9](https://github.com/videojs/video.js/commit/398c6e9))
+* make sure audio track hides with one item ([#4203](https://github.com/videojs/video.js/issues/4203)) ([c069655](https://github.com/videojs/video.js/commit/c069655))
+
+<a name="5.18.4"></a>
+## [5.18.4](https://github.com/videojs/video.js/compare/v5.18.3...v5.18.4) (2017-03-08)
+
+### Bug Fixes
+
+* **vttjs:** wait till tech el in DOM before loading vttjs ([#4176](https://github.com/videojs/video.js/issues/4176)) ([ad86eec](https://github.com/videojs/video.js/commit/ad86eec))
+
+<a name="5.18.3"></a>
+## [5.18.3](https://github.com/videojs/video.js/compare/v5.18.2...v5.18.3) (2017-03-06)
+
+<a name="5.18.1"></a>
+## [5.18.1](https://github.com/videojs/video.js/compare/v5.18.0...v5.18.1) (2017-03-03)
+
+### Bug Fixes
+
+* **cues:** only copy cue props that don't exist ([#4146](https://github.com/videojs/video.js/issues/4146)) ([de08669](https://github.com/videojs/video.js/commit/de08669))
+* cue-points with a startTime of 0 ([#4148](https://github.com/videojs/video.js/issues/4148)) ([e7d4b47](https://github.com/videojs/video.js/commit/e7d4b47))
+* make sure that cues copy over their id ([#4154](https://github.com/videojs/video.js/issues/4154)) ([072c277](https://github.com/videojs/video.js/commit/072c277))
+* **MenuButton:** Unify behavior of showing/hiding ([#3993](https://github.com/videojs/video.js/issues/3993)) ([4367c69](https://github.com/videojs/video.js/commit/4367c69))
+* **playback rate menu:** playback rate menu items should be selectable ([#4150](https://github.com/videojs/video.js/issues/4150)) ([288edd1](https://github.com/videojs/video.js/commit/288edd1))
+
+### Chores
+
+* **build:** lint errors only and silence webpack ([#4153](https://github.com/videojs/video.js/issues/4153)) ([b1ca344](https://github.com/videojs/video.js/commit/b1ca344))
+* **package:** update video-js-swf to 5.3.0 ([#4161](https://github.com/videojs/video.js/issues/4161)) ([2bcfe21](https://github.com/videojs/video.js/commit/2bcfe21))
+
+<a name="5.18.0"></a>
+# [5.18.0](https://github.com/videojs/video.js/compare/v5.17.0...v5.18.0) (2017-02-27)
+
+### Features
+
+* focus play toggle from Big Play Btn on play ([#4132](https://github.com/videojs/video.js/issues/4132)) ([dcc615a](https://github.com/videojs/video.js/commit/dcc615a)), closes [#2729](https://github.com/videojs/video.js/issues/2729)
+* update videojs-vtt.js and wrap native cues in TextTrack ([#4131](https://github.com/videojs/video.js/issues/4131)) ([3d4aebc](https://github.com/videojs/video.js/commit/3d4aebc)), closes [#4093](https://github.com/videojs/video.js/issues/4093)
+
+### Bug Fixes
+
+* **sass:** import path has cwd once again ([#4076](https://github.com/videojs/video.js/issues/4076)) ([c02c6c6](https://github.com/videojs/video.js/commit/c02c6c6))
+* addChild instance names should be toTitleCased ([#4117](https://github.com/videojs/video.js/issues/4117)) ([fa97309](https://github.com/videojs/video.js/commit/fa97309))
+* make mergeOptions behave the same across browsers  ([#4090](https://github.com/videojs/video.js/issues/4090)) ([ce19ed5](https://github.com/videojs/video.js/commit/ce19ed5))
+* synchronously shim vtt.js when possible ([#4082](https://github.com/videojs/video.js/issues/4082)) ([b5727a6](https://github.com/videojs/video.js/commit/b5727a6))
+
+<a name="5.17.0"></a>
+# [5.17.0](https://github.com/videojs/video.js/compare/v5.16.0...v5.17.0) (2017-02-07)
+
+### Bug Fixes
+
+* Patch a memory leak caused by un-removed track listener(s). ([#3975](https://github.com/videojs/video.js/issues/3975)) ([bca44c0](https://github.com/videojs/video.js/commit/bca44c0))
+* remove title attribute on menu items, fixes [#3699](https://github.com/videojs/video.js/issues/3699) ([#4009](https://github.com/videojs/video.js/issues/4009)) ([91874a3](https://github.com/videojs/video.js/commit/91874a3))
+
+### Chores
+
+* change accessibility test in grunt.js to remove unnecessary warning message. ([#4008](https://github.com/videojs/video.js/issues/4008)) ([daad492](https://github.com/videojs/video.js/commit/daad492))
+* **package:** update swf to 5.2.0 ([#4040](https://github.com/videojs/video.js/issues/4040)) ([dab893b](https://github.com/videojs/video.js/commit/dab893b))
+
+### Documentation
+
+* minor fix to currentTime() comment: "setting" not "getting" ([#3944](https://github.com/videojs/video.js/issues/3944)) ([6578ed9](https://github.com/videojs/video.js/commit/6578ed9))
+
 <a name="5.16.0"></a>
 # [5.16.0](https://github.com/videojs/video.js/compare/v5.15.1...v5.16.0) (2017-01-12)
 

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
+
+## Table of Contents
+
+* [Our Pledge](#our-pledge)
+* [Our Standards](#our-standards)
+* [Our Responsibilities](#our-responsibilities)
+* [Scope](#scope)
+  * [Other Community Standards](#other-community-standards)
+* [Enforcement](#enforcement)
+  * [Further Enforcement](#further-enforcement)
+  * [Who Watches the Watchers?](#who-watches-the-watchers)
+* [Attribution](#attribution)
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+### Other Community Standards
+
+As a project on GitHub, this project is additionally covered by the [GitHub Community Guidelines](https://help.github.com/articles/github-community-guidelines/).
+
+Additionally, as a project hosted on npm, is is covered by [npm, Inc's Code of Conduct](https://www.npmjs.com/policies/conduct).
+
+Enforcement of those guidelines after violations overlapping with the above are the responsibility of the entities, and enforcement may happen in any or all of the services/communities.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at gary@videojs.com or @gkatsev on [slack][]. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+### Further Enforcement
+
+If you've already followed the [initial enforcement steps](#enforcement), these are the steps maintainers will take for further enforcement, as needed:
+
+1. Repeat the request to stop.
+1. If the person doubles down, they will have offending messages removed or edited by a maintainers given an official warning. The PR or Issue may be locked.
+1. If the behavior continues or is repeated later, the person will be blocked from participating for 24 hours.
+1. If the behavior continues or is repeated after the temporary block, a long-term (6-12mo) ban will be used.
+
+On top of this, maintainers may remove any offending messages, images, contributions, etc, as they deem necessary.
+
+Maintainers reserve full rights to skip any of these steps, at their discretion, if the violation is considered to be a serious and/or immediate threat to the health and well-being of members of the community. These include any threats, serious physical or verbal attacks, and other such behavior that would be completely unacceptable in any social setting that puts our members at risk.
+
+Members expelled from events or venues with any sort of paid attendance will not be refunded.
+
+### Who Watches the Watchers?
+
+Maintainers and other leaders who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. These may include anything from removal from the maintainer team to a permanent ban from the community.
+
+Additionally, as a project hosted on both GitHub and npm, [their own Codes of Conducts may be applied against maintainers of this project](#other-community-standards), externally of this project's procedures.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+The [Other Community Standards](#other-community-standards), [Further Enforcement](#further-enforcement),
+and [Who Watches the Watchers?](#who-watches-the-watchers) sections are based on [weallbehave][weallbehave],
+which is based on the [WeAllJS Code of Conduct][wealljs].
+
+[homepage]: http://contributor-covenant.org
+
+[version]: http://contributor-covenant.org/version/1/4/
+
+[wealljs]: https://wealljs.org/code-of-conduct
+
+[weallbehave]: https://npm.im/weallbehave
+
+[slack]: http://slack.videojs.com

COLLABORATOR_GUIDE.md

@@ -261,7 +261,8 @@ git reset --hard upstream/master
 
 Releasing video.js is partially automated through [`conrib.json`](/contrib.json) scripts. To do a release, you need a couple of things: npm access, GitHub personal access token.
 
-Releases in video.js are done on npm and bower and GitHub and eventually posted on the CDN. This is the instruction for the npm/bower/GitHub releases.
+Releases in video.js are done on npm and GitHub and eventually posted on the CDN. These
+are the instructions for the npm/GitHub releases.
 
 When we do a release, we release it as a `next` tag on npm first and then at least a week later, we promote this release to `latest` on npm.
 

CONTRIBUTING.md

@@ -140,13 +140,17 @@ npm install
 
 #### Running tests
 
-To run the tests all you need to do is run
+Tests can be run either from the shell or from the browser.
+
+To run the tests from the shell, just run
 
 ```sh
 npm test
 ```
 
-This will build video.js locally and run the tests using [Karma](https://karma-runner.github.io/1.0/index.html) which runs our tests in actual browsers.
+This will build video.js locally and run the test suite using [Karma](https://karma-runner.github.io/1.0/index.html), which runs our tests in actual browsers.
+
+To run tests from the browser, first start a local server with `npm start` (this also watches for changes and rebuilds video.js and the test files as necessary). Then navigate to `http://localhost:9999/test`, and you'll see a page that displays the results of all the tests. To rerun the tests after making changes, just refresh the page. To run an individual test, click the "Rerun" link next to the test's title.
 
 #### Building videojs
 
@@ -275,6 +279,8 @@ Tests attached to bug fixes should fail before the change and succeed with it.
 npm test
 ```
 
+See [Running tests](#running-tests) for more information.
+
 #### Step 6: Push
 
 ```sh

README.md

@@ -10,6 +10,13 @@
 
 > Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through [plugins][plugins]). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over ~~50,000~~ ~~100,000~~ ~~200,000~~ [400,000 websites][builtwith].
 
+## Table of Contents
+
+* [Quick Start](#quick-start)
+* [Contributing](#contributing)
+* [Code of Conduct](#code-of-conduct)
+* [License](#license)
+
 ## Quick Start
 
 Thanks to the awesome folks over at [Fastly][fastly], there's a free, CDN hosted version of Video.js that anyone can use. Add these tags to your document's `<head>`:
@@ -79,6 +86,10 @@ Video.js is a free and open source library, and we appreciate any help you're wi
 
 _Video.js uses [BrowserStack][browserstack] for compatibility testing._
 
+## [Code of Conduct][coc]
+
+Please note that this project is released with a [Contributor Code of Conduct][coc]. By participating in this project you agree to abide by its terms.
+
 ## [License][license]
 
 Video.js is [licensed][license] under the Apache License, Version 2.0.
@@ -120,3 +131,5 @@ Video.js is [licensed][license] under the Apache License, Version 2.0.
 [travis-link]: https://travis-ci.org/videojs/video.js
 
 [vjs]: http://videojs.com
+
+[coc]: CODE_OF_CONDUCT.md

bower.json

@@ -1,24 +0,0 @@
-{
-  "name": "video.js",
-  "description": "An HTML5 and Flash video player with a common API and skin for both.",
-  "main": [
-    "dist/video.js",
-    "dist/video-js.css"
-  ],
-  "moduleType": "es6",
-  "keywords": [
-    "videojs",
-    "html5",
-    "flash",
-    "video",
-    "player"
-  ],
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests",
-    "build"
-  ]
-}

build/fix-api-docs.js

@@ -0,0 +1,20 @@
+var replace = require("replace");
+var path = require('path')
+var apiPath = path.join(__dirname, '..', 'docs', 'api');
+
+var replacements = [
+  {find: /\/docs\/guides\/(.+)\.md/g, replace: 'tutorial-$1.html'},
+  {find: /tutorial-tech.html/g, replace: 'tutorial-tech_.html'},
+  {find: /\/docs\/guides\//g, replace: '#'}
+];
+
+
+replacements.forEach(function(obj) {
+  replace({
+    regex: obj.find,
+    replacement: obj.replace,
+    paths: [apiPath],
+    recursive: true,
+    silent: true
+  });
+});

build/grunt.js

@@ -145,6 +145,10 @@ module.exports = function(grunt) {
         files: ['src/css/**/*'],
         tasks: ['skin']
       },
+      lang: {
+        files: ['lang/**/*.json'],
+        tasks: ['vjslanguages']
+      }
     },
     connect: {
       dev: {
@@ -408,6 +412,7 @@ module.exports = function(grunt) {
         'browserify:watchnovtt',
         'browserify:tests',
         'watch:skin',
+        'watch:lang',
         'watch:dist'
       ],
       // Run multiple watch tasks in parallel
@@ -450,7 +455,7 @@ module.exports = function(grunt) {
         }
       },
       lint: {
-        command: 'npm run lint',
+        command: 'npm run lint -- --errors',
         options: {
           preferLocal: true
         }
@@ -468,7 +473,7 @@ module.exports = function(grunt) {
         }
       },
       webpack: {
-        command: 'webpack test/require/webpack.js build/temp/webpack.js',
+        command: 'webpack --hide-modules test/require/webpack.js build/temp/webpack.js',
         options: {
           preferLocal: true
         }
@@ -483,8 +488,8 @@ module.exports = function(grunt) {
           error: true
         },
         ignore: [
-          // Ignore the warning about needing <optgroup> elements
-          'WCAG2AA.Principle1.Guideline1_3.1_3_1.H85.2'
+          // Ignore warning about contrast of the "vjs-no-js" fallback link
+          'WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage'
         ]
 
       },

build/version.js

@@ -0,0 +1,20 @@
+var safeParse = require("safe-json-parse/tuple");
+var tuple = safeParse(process.env.npm_config_argv);
+var npm_config_argv = tuple[1]
+
+if (tuple[0]) {
+  process.exit(1);
+}
+
+var sh = require('shelljs');
+var version = process.env.npm_package_version;
+var prereleaseType = npm_config_argv['remain'][0];
+var approvedTypes = {
+  'major': 1,
+  'minor': 1,
+  'patch': 1
+}
+
+if (prereleaseType in approvedTypes) {
+  sh.exec('npm run changelog');
+}

docs/examples/elephantsdream/index.html

@@ -27,8 +27,8 @@
              useful way! -->
   <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="360"
       data-setup='{ "html5" : { "nativeTextTracks" : false } }'>
-    <source src="https://archive.org/download/ElephantsDream/ed_hd.mp4" type="video/mp4">
-    <source src="https://archive.org/download/ElephantsDream/ed_hd.ogv" type="video/ogv">
+    <source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4" type="video/mp4">
+    <source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.ogg" type="video/ogg">
 
     <track kind="captions" src="captions.en.vtt" srclang="en" label="English" default></track><!-- Tracks need an ending tag thanks to IE9 -->
     <track kind="captions" src="captions.sv.vtt" srclang="sv" label="Swedish"></track>

docs/guides/audio-tracks.md

@@ -25,7 +25,7 @@ cross-browser implementation of audio tracks.
   They must be added programmatically.
 * Video.js only stores track representations. Switching audio tracks for playback is
   _not handled by Video.js_ and must be handled elsewhere - for example,
-  [videojs-contrib-hls](http://github.com/videojs/videojs-contrib-hls) handles switching
+  [videojs-contrib-hls][hls] handles switching
   audio tracks to support track selection through the UI.
 
 ## Working with Audio Tracks
@@ -91,7 +91,7 @@ player.audioTracks().removeTrack(track);
 ## API
 
 For more complete information, refer to the
-[Video.js API docs](http://docs.videojs.com/docs/api/index.html), specifically:
+[Video.js API docs](http://docs.videojs.com/), specifically:
 
 * `Player#audioTracks`
 * `AudioTrackList`
@@ -140,7 +140,7 @@ The valid [BCP 47](https://tools.ietf.org/html/bcp47) code for the language of t
 track, e.g. `"en"` for English or `"es"` for Spanish.
 
 For supported language translations, please see the [languages folder (/lang)](https://github.com/videojs/video.js/tree/master/lang)
-located in the Video.js root and refer to the [languages guide](languages.md) for more
+located in the Video.js root and refer to the [languages guide][languages-guide] for more
 information on languages in Video.js.
 
 #### `enabled`
@@ -154,4 +154,8 @@ than one, the last one to be enabled will end up being the only one. While the s
 allows for more than one track to be enabled, Safari and most implementations only allow
 one audio track to be enabled at a time.
 
+[languages-guide]: /docs/guides/languages.md
+
 [spec-audiotrack]: https://html.spec.whatwg.org/multipage/embedded-content.html#audiotrack
+
+[hls]: http://github.com/videojs/videojs-contrib-hls

docs/guides/components.md

@@ -23,13 +23,13 @@ The architecture of the Video.js player is centered around components. The `Play
 
 A component is a JavaScript object that has the following features:
 
-* An associated DOM element.
+* An associated DOM element, in almost all cases.
 * An association to a `Player` object.
 * The ability to manage any number of child components.
 * The ability to listen for and trigger events.
 * A lifecycle of initialization and disposal.
 
-For more specifics on the programmatic interface of a component, see [the component API docs](http://docs.videojs.com/docs/api/component.html).
+For more specifics on the programmatic interface of a component, see [the component API docs][api].
 
 ## Creating a Component
 
@@ -75,7 +75,7 @@ console.log(button.el());
 
 ## Component Children
 
-Again, refer to [the component API docs](http://docs.videojs.com/docs/api/component.html) for complete details on methods available for managing component structures.
+Again, refer to [the component API docs][api] for complete details on methods available for managing component structures.
 
 ### Basic Example
 
@@ -285,13 +285,14 @@ The default component structure of the Video.js player looks something like this
 
 ```tree
 Player
+├── MediaLoader (has no DOM element)
 ├── PosterImage
 ├── TextTrackDisplay
 ├── LoadingSpinner
 ├── BigPlayButton
 ├─┬ ControlBar
 │ ├── PlayToggle
-│ ├── VolumeMenuButton
+│ ├── VolumePanel
 │ ├── CurrentTimeDisplay (hidden by default)
 │ ├── TimeDivider (hidden by default)
 │ ├── DurationDisplay (hidden by default)
@@ -335,3 +336,5 @@ let player = videojs('myplayer', {
 ### Text Track Settings
 
 The text track settings component is only available when using emulated text tracks.
+
+[api]: http://docs.videojs.com/Component.html

docs/guides/debugging.md

@@ -107,6 +107,6 @@ Finally, the history (if enabled) can be cleared at any time via:
 videojs.log.history.clear();
 ```
 
-[api]: http://docs.videojs.com/docs/api/index.html
+[api]: http://docs.videojs.com/
 
 [console]: https://developer.mozilla.org/en-US/docs/Web/API/Console

docs/guides/faq.md

@@ -45,7 +45,7 @@
 video.js is an extendable framework/library around the native video element. It does the following:
 
 * Offers a plugin API so that different types of video can be handed to the native
-  video element (e.g. HLS, Flash, HTML5 video, etc).
+  video element (e.g. [HLS][hls], [Flash][flash], HTML5 video, etc).
 * Unifies the native video api across browsers (polyfilling support for features
   if necessary)
 * Offers an extendable and themable UI
@@ -59,13 +59,15 @@ video.js is an extendable framework/library around the native video element. It
 
 ## Q: How do I install video.js?
 
-Currently video.js can be installed using bower, npm, serving a release file from
+Currently video.js can be installed using npm, serving a release file from
 a github tag, or even using a CDN hosted version. For information on doing any of those
 see the [install guide][install-guide].
 
 ## Q: Is video.js on bower?
 
-Yes! See the [install guide][install-guide] for more information.
+Versions prior to video.js 6 do support bower, however, as of video.js 6, bower is no
+longer officially supported. Please see https://github.com/videojs/video.js/issues/4012
+for more information.
 
 ## Q: What do video.js version numbers mean?
 
@@ -112,14 +114,12 @@ with your issue.
 A reduced test case is an example of the problem that you are facing in isolation.
 Think of it as example page that reproduces the issue in the least amount of possible code.
 We have a [starter example][starter-example] for reduced test cases. To learn more
-about reduced test cases visit [css-tricks](https://css-tricks.com/reduced-test-cases/)
+about reduced test cases visit [css-tricks][reduced-test-case]
 
 ## Q: What media formats does video.js support?
 
 This depends on the formats supported by the browser's HTML5 video element, and the playback
-techs made available to video.js. For example, video.js 5 includes the Flash tech by default which
-enables the playback of FLV video where the Flash plugin is available. For more information
-on media formats see the [troubleshooting guide][troubleshooting].
+techs/plugins made available to video.js. For more information on media formats see the [troubleshooting guide][troubleshooting].
 
 ## Q: How to I autoplay the video?
 
@@ -156,8 +156,7 @@ Will make an inline, muted, autoplaying video on an iPhone with iOS10.
 
 ## Q: How can I play RTMP video in video.js?
 
-Make sure that the Flash tech is available -- RTMP is not playable on browsers without Flash including mobile. Then, just set the rtmp source with
-an appropriate type -- `rtmp/mp4` or `rtmp/flv`.
+Make sure that the Flash tech is available -- RTMP is not playable on browsers without Flash including mobile. Flash will only be available on video.js 6 with the [videojs-flash package][flash], in previous versions it was builtin to video.js. Then, just set the rtmp source with an appropriate type -- `rtmp/mp4` or `rtmp/flv`.
 The main thing to be aware of is that video.js splits the connection url and stream name with the `&` character.
 So, you'd want to update the url to follow that format. For example: `rtmp://example.com/live&foo` or `rtmp://example.com/fms&mp4:path/to/file.mp4`.
 
@@ -214,7 +213,7 @@ See the [video.js github wiki][skins-list].
 
 Yes! It can be used to play audio only files in a `<video>` or `<audio>` tag. The
 difference being that the `<audio>` tag will not have a blank display area and the `<video>`
-tag will. Note that audio only will not work with the Flash playback tech.
+tag will. Note that audio only will not work with the Flash playback tech. The Flash playback tech will only be included in versions of video.js before 6. In Video.js 6 you will need to use the [videojs-flash package][flash].
 
 ## Q: Does video.js support audio tracks?
 
@@ -237,13 +236,12 @@ project which adds support.
 
 ## Q: Does video.js support MPEG Dash video?
 
-video.js itself does not support MPEG DASH, however an offical project called [videojs-contrib-dash][dash]
+video.js itself does not support MPEG DASH, however an official project called [videojs-contrib-dash][dash]
 adds support for MPEG DASH video.
 
 ## Q: Does video.js support live video?
 
-Yes! Video.js adds support for live videos via the Flash tech which supports RTMP streams.
-The official HLS tech, [videojs-contrib-hls][hls], will add support for live HLS video
+Yes! Video.js adds support for live videos via the Flash tech tech which supports RTMP streams. In Video.js 6 you will have to use [videojs-flash][flash] to get this. In previous versions the Flash tech was builtin. The official HLS tech, [videojs-contrib-hls][hls], will add support for live HLS video
 if you add it to your page with video.js.
 
 ## Q: Can video.js wrap around YouTube videos?
@@ -270,60 +268,68 @@ Yes! Please [submit an issue or open a pull request][pr-issue-question] if this
 
 Yes! Please [submit an issue or open a pull request][pr-issue-question] if this does not work.
 
-Be sure to use `require('!style-loader!css-loader!video.js/dist/video-js.css')` to inject video.js CSS.
+We have a short guide that deals with small configurations that you will need to do. [Webpack and Videojs Configuration][webpack-guide].
 
 ## Q: Does video.js work with react?
 
-Yes! See [ReactJS integration example](./guides/react.md).
-
-[plugin-guide]: plugins.md
-
-[install-guide]: http://videojs.com/getting-started/
-
-[troubleshooting]: troubleshooting.md
-
-[video-tracks]: video-tracks.md
-
-[audio-tracks]: audio-tracks.md
-
-[text-tracks]: text-tracks.md
-
-[pr-issue-question]: #q-i-think-i-found-a-bug-with-videojs-or-i-want-to-add-a-feature-what-should-i-do
-
-[hls]: http://github.com/videojs/videojs-contrib-hls
-
-[dash]: http://github.com/videojs/videojs-contrib-dash
-
-[eme]: https://github.com/videojs/videojs-contrib-eme
-
-[generator]: https://github.com/videojs/generator-videojs-plugin
-
-[youtube]: https://github.com/videojs/videojs-youtube
-
-[vimeo]: https://github.com/videojs/videojs-vimeo
+Yes! See [ReactJS integration example][react-guide].
 
 [ads]: https://github.com/videojs/videojs-contrib-ads
 
-[pr-template]: http://github.com/videojs/video.js/blob/master/.github/PULL_REQUEST_TEMPLATE.md
-
-[issue-template]: http://github.com/videojs/video.js/blob/master/.github/ISSUE_TEMPLATE.md
-
-[plugin-list]: http://videojs.com/plugins
-
-[skins-list]: https://github.com/videojs/video.js/wiki/Skins
+[audio-tracks]: /docs/guides/audio-tracks.md
 
 [contributing-issues]: http://github.com/videojs/video.js/blob/master/CONTRIBUTING.md#filing-issues
 
 [contributing-prs]: http://github.com/videojs/video.js/blob/master/CONTRIBUTING.md#contributing-code
 
+[dash]: http://github.com/videojs/videojs-contrib-dash
+
+[debug-guide]: /docs/guides/debugging.md
+
+[eme]: https://github.com/videojs/videojs-contrib-eme
+
+[flash]: https://github.com/videojs/videojs-flash
+
+[generator]: https://github.com/videojs/generator-videojs-plugin
+
+[hls]: http://github.com/videojs/videojs-contrib-hls
+
+[install-guide]: http://videojs.com/getting-started/
+
+[issue-template]: http://github.com/videojs/video.js/blob/master/.github/ISSUE_TEMPLATE.md
+
+[npm-keywords]: https://docs.npmjs.com/files/package.json#keywords
+
+[plugin-guide]: /docs/guides/plugins.md
+
+[plugin-list]: http://videojs.com/plugins
+
+[pr-issue-question]: #q-i-think-i-found-a-bug-with-videojs-or-i-want-to-add-a-feature-what-should-i-do
+
+[pr-template]: http://github.com/videojs/video.js/blob/master/.github/PULL_REQUEST_TEMPLATE.md
+
+[react-guide]: /docs/guides/react.md
+
+[reduced-test-case]: https://css-tricks.com/reduced-test-cases/
+
+[semver]: http://semver.org/
+
+[skins-list]: https://github.com/videojs/video.js/wiki/Skins
+
+[starter-example]: http://jsbin.com/axedog/edit?html,output
+
+[text-tracks]: /docs/guides/text-tracks.md
+
+[troubleshooting]: /docs/guides/troubleshooting.md
+
+[video-tracks]: /docs/guides/video-tracks.md
+
+[vimeo]: https://github.com/videojs/videojs-vimeo
+
 [vjs-issues]: https://github.com/videojs/video.js/issues
 
 [vjs-prs]: https://github.com/videojs/video.js/pulls
 
-[npm-keywords]: https://docs.npmjs.com/files/package.json#keywords
+[webpack-guide]: /docs/guides/webpack.md
 
-[semver]: http://semver.org/
-
-[starter-example]: http://jsbin.com/axedog/edit?html,output
-
-[debug-guide]: ./guides/debug.md
+[youtube]: https://github.com/videojs/videojs-youtube

docs/guides/languages.md

@@ -58,12 +58,12 @@ Finally, each file's extension is always `.json`.
 
 ### Updating an Existing Translation
 
-If there is a [missing translation](../translations-needed.md), mistake, or room for improvement in an existing translation, don't hesitate to open a pull request!
+If there is a [missing translation](/docs/translations-needed.md), mistake, or room for improvement in an existing translation, don't hesitate to open a pull request!
 
 1. Edit the relevant JSON file and make the necessary changes.
 1. Verify the language compiles by running `grunt dist`.
 1. Verify the translation appears properly in the player UI.
-1. Run `grunt check-translations` to update the [missing translation document](../translations-needed.md).
+1. Run `grunt check-translations` to update the [missing translation document](/docs/translations-needed.md).
 1. Commit and open a pull request on GitHub.
 
 ### Writing a New Translation
@@ -103,7 +103,7 @@ videojs.addLanguage('es', {
 
 ### Per-Player Languages
 
-In addition to providing languages to Video.js itself, individual `Player` instances can be provided custom language support via [the `languages` option](options.md#languages):
+In addition to providing languages to Video.js itself, individual `Player` instances can be provided custom language support via [the `languages` option](/docs/guides/options.md#languages):
 
 ```js
 // Provide a custom definition of Spanish to this player.
@@ -116,7 +116,7 @@ videojs('my-player', {
 
 ### Setting Default Player Language
 
-Player instances can also have a default language via [the `language` option](options.md#language):
+Player instances can also have a default language via [the `language` option](/docs/guides/options.md#language):
 
 ```js
 // Set the default language to Spanish for this player.
@@ -143,14 +143,14 @@ The player language is set to one of the following in descending priority:
 
 ## References
 
-For information on translation/localization in plugins, see [the plugins guide](plugins.md).
+For information on translation/localization in plugins, see [the plugins guide](/docs/guides/plugins.md).
 
 Standard languages codes [are defined by the IANA][lang-codes].
 
 For all existing/supported languages, please see the [languages lolder (`lang/`)][lang-supported] folder located in the project root.
 
-[lang-en]: https://github.com/videojs/video.js/tree/master/lang/en.json
+[lang-en]: /lang/en.json
 
-[lang-supported]: https://github.com/videojs/video.js/tree/master/lang
+[lang-supported]: /lang
 
 [lang-codes]: http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry

docs/guides/modal-dialog.md

@@ -4,7 +4,7 @@ The `ModalDialog` component is part of Video.js core and provides a baked-in UI
 
 ## Table of Contents
 
-* [Creating the ModalDialog](#creating-the-modaldialog)
+* [Creating a ModalDialog](#creating-a-modaldialog)
   * [Example Using createModal()](#example-using-createmodal)
   * [Example Using the ModalDialog Constructor](#example-using-the-modaldialog-constructor)
 * [Styling Modals Independently](#styling-modals-independently)
@@ -73,6 +73,6 @@ A common need for modals is to style them independently from one another. The re
 modal.addClass('vjs-my-fancy-modal');
 ```
 
-[api-doc]: http://docs.videojs.com/docs/api/modal-dialog.html
+[api-doc]: http://docs.videojs.com/ModalDialog.html
 
-[creating-component]: ./components.md#creating-a-component
+[creating-component]: /docs/guides/components.md#creating-a-component

docs/guides/options.md

@@ -1,6 +1,6 @@
 # Video.js Options Reference
 
-> **Note:** This document is only a reference for available options. To learn about passing options to Video.js, see [the setup guide](setup.md#options).
+> **Note:** This document is only a reference for available options. To learn about passing options to Video.js, see [the setup guide](/docs/guides/setup.md#options).
 
 ## Table of Contents
 
@@ -41,7 +41,7 @@
 
 ## Standard `<video>` Element Options
 
-Each of these options is also available as a [standard `<video>` element attribute][video-attrs]; so, they can be defined in all three manners [outlined in the setup guide](setup.md#options). Typically, defaults are not listed as this is left to browser vendors.
+Each of these options is also available as a [standard `<video>` element attribute][video-attrs]; so, they can be defined in all three manners [outlined in the setup guide](/docs/guides/setup.md#options). Typically, defaults are not listed as this is left to browser vendors.
 
 ### `autoplay`
 
@@ -151,7 +151,7 @@ The `inactivityTimeout` determines how many milliseconds of inactivity is requir
 
 A [language code][lang-codes] matching one of the available languages in the player. This sets the initial language for a player, but it can always be changed.
 
-Learn more about [languages in Video.js](languages.md).
+Learn more about [languages in Video.js][languages].
 
 ### `languages`
 
@@ -159,7 +159,7 @@ Learn more about [languages in Video.js](languages.md).
 
 Customize which languages are available in a player. The keys of this object will be [language codes][lang-codes] and the values will be objects with English keys and translated values.
 
-Learn more about [languages in Video.js](languages.md).
+Learn more about [languages in Video.js][languages]
 
 > **Note**: Generally, this option is not needed and it would be better to pass your custom languages to `videojs.addLanguage()`, so they are available in all players!
 
@@ -201,13 +201,13 @@ player.boo({baz: false});
 
 Although, since the `plugins` option is an object, the order of initialization is not guaranteed!
 
-See [the plugins guide](plugins.md) for more information on Video.js plugins.
+See [the plugins guide][plugins] for more information on Video.js plugins.
 
 ### `sourceOrder`
 
 > Type: `boolean`, Default: `false`
 >
-> **Note:** In video.js 6.0, this option will default to `true`.
+> **Note:** In video.js 6.0, this option will default to `true`. and that [videojs-flash](https://github.com/videojs/videojs-flash) will be required to use the flash tech.
 
 Tells Video.js to prefer the order of [`sources`](#sources) over [`techOrder`](#techorder) in selecting a source and playback tech.
 
@@ -275,9 +275,9 @@ Using `<source>` elements will have the same effect:
 
 ### `techOrder`
 
-> Type: `Array`, Default: `['html5', 'flash']`
+> Type: `Array`, Default: `['html5']`
 
-Defines the order in which Video.js techs are preferred. By default, this means that the `Html5` tech is preferred, but Video.js will fall back to `Flash` if no `Html5`-compatible source can be found.
+Defines the order in which Video.js techs are preferred. By default, this means that the `Html5` tech is preferred. Other regisetered techs will be added after this tech in the order in which they are registered.
 
 ### `vtt.js`
 
@@ -291,7 +291,7 @@ This option will be used in the "novtt" build of video.js (i.e. `video.novtt.js`
 
 The Video.js player is a component. Like all components, you can define what children it includes, what order they appear in, and what options are passed to them.
 
-This is meant to be a quick reference; so, for more detailed information on components in Video.js, check out the [components guide](components.md).
+This is meant to be a quick reference; so, for more detailed information on components in Video.js, check out the [components guide](/docs/guides/components.md).
 
 ### `children`
 
@@ -374,6 +374,10 @@ Only supported by the `Html5` tech, this option can be set to `true` to force na
 
 Can be set to `false` to force emulation of text tracks instead of native support. The `nativeCaptions` option also exists, but is simply an alias to `nativeTextTracks`.
 
+[plugins]: /docs/guides/plugins.md
+
+[languages]: /docs/guides/languages.md
+
 [ios-10-updates]: https://webkit.org/blog/6784/new-video-policies-for-ios/
 
 [lang-codes]: http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry

docs/guides/player-workflows.md

@@ -1,6 +1,6 @@
 # Player Workflows
 
-This document outlines many considerations for using Video.js for advanced player workflows. Be sure to read [the setup guide](setup.md) first!
+This document outlines many considerations for using Video.js for advanced player workflows. Be sure to read [the setup guide](/docs/guides/setup.md) first!
 
 ## Table of Contents
 
@@ -31,9 +31,9 @@ After an instance has been created it can be accessed globally in two ways:
 
 No matter the term used for it, web applications are becoming common. Not everything is a static, load-once-and-done web page anymore! This means that developers need to be able to manage the full lifecycle of a video player - from creation to destruction. Video.js supports player removal through the `dispose()` method.
 
-### [`dispose()`](http://docs.videojs.com/docs/api/player.html#Methodsdispose)
+### [`dispose()`](http://docs.videojs.com/Player.html#dispose)
 
-This method is available on all Video.js players and [components](http://docs.videojs.com/docs/api/component.html#Methodsdispose). It is _the only_ supported method of removing a Video.js player from both the DOM and memory. For example, the following code sets up a player and then disposes it when media playback is complete:
+This method is available on all Video.js players and [components](http://docs.videojs.com/Component.html#dispose). It is _the only_ supported method of removing a Video.js player from both the DOM and memory. For example, the following code sets up a player and then disposes it when media playback is complete:
 
 ```js
 var player = videojs('my-player');
@@ -367,7 +367,7 @@ Coming soon...
 
 ### React
 
-See [ReactJS integration example](./react.md)
+See [ReactJS integration example](/docs/guides/react.md)
 
 ### Ember
 

docs/guides/plugins.md

@@ -1,6 +1,6 @@
 # Video.js Plugins
 
-One of the great strengths of Video.js is its ecosystem of plugins that allow authors from all over the world to share their video player customizations. This includes everything from the simplest UI tweaks to new [playback technologies and source handlers](tech.md)!
+One of the great strengths of Video.js is its ecosystem of plugins that allow authors from all over the world to share their video player customizations. This includes everything from the simplest UI tweaks to new [playback technologies and source handlers][tech]!
 
 Because we view plugins as such an important part of Video.js, the organization is committed to maintaining a robust set of tools for plugin authorship:
 
@@ -63,7 +63,7 @@ While reading the following sections, you may want to refer to the [Plugin API d
 
 ### Write a JavaScript Class/Constructor
 
-If you're familiar with creating [components](components.md), this process is similar. An advanced plugin starts with a JavaScript class (a.k.a. a constructor function).
+If you're familiar with creating [components][components], this process is similar. An advanced plugin starts with a JavaScript class (a.k.a. a constructor function).
 
 If you're using ES6 already, you can use that syntax with your transpiler/language of choice (Babel, TypeScript, etc):
 
@@ -314,9 +314,13 @@ These two methods are functionally identical - use whichever you prefer!
 * [Plugin Generator][generator]
 * [Plugin Conventions][standards]
 
-[api-player]: http://docs.videojs.com/docs/api/player.html
+[components]: /docs/guides/components.md
 
-[api-plugin]: http://docs.videojs.com/docs/api/plugin.html
+[tech]: /docs/guides/tech.md
+
+[api-player]: http://docs.videojs.com/Player.html
+
+[api-plugin]: http://docs.videojs.com/Plugin.html
 
 [generator]: https://github.com/videojs/generator-videojs-plugin
 

docs/guides/react.md

@@ -36,12 +36,11 @@ export default class VideoPlayer extends React.Component {
 }
 ```
 
-You can then use it like this:
+You can then use it like this: (see [options guide][options] for option information)
 
 ```jsx
-// see https://github.com/videojs/video.js/blob/master/docs/guides/options.md
 const videoJsOptions = {
-  autoPlay: true,
+  autoplay: true,
   controls: true,
   sources: [{
     src: '/path/to/video.mp4',
@@ -53,3 +52,5 @@ return <VideoPlayer { ...videoJsOptions } />
 ```
 
 Dont forget to include the video.js CSS, located at `video.js/dist/video-js.css`.
+
+[options]: /docs/guides/options.md

docs/guides/setup.md

@@ -14,7 +14,7 @@
 
 ## Getting Video.js
 
-Video.js is officially available via CDN, npm, and Bower.
+Video.js is officially available via CDN and npm.
 
 Video.js works out of the box with not only HTML `<script>` and `<link>` tags, but also all major bundlers/packagers/builders, such as Browserify, Node, WebPack, etc.
 
@@ -82,7 +82,7 @@ videojs(document.querySelector('.video-js'));
 
 ## Options
 
-> **Note:** This guide only covers how to pass options during player setup. For a complete reference on _all_ available options, see the [options guide](options.md).
+> **Note:** This guide only covers how to pass options during player setup. For a complete reference on _all_ available options, see the [options guide](/docs/guides/options.md).
 
 There are three ways to pass options to Video.js. Because Video.js decorates an HTML5 `<video>` element, many of the options available are also available as [standard `<video>` tag attributes][video-attrs]:
 
@@ -175,7 +175,9 @@ In each case, the callback is called asynchronously - _even if the player is alr
 
 ## Advanced Player Workflows
 
-For a discussion of more advanced player workflows, see the [player workflows guide](player-workflows.md).
+For a discussion of more advanced player workflows, see the [player workflows guide][player-workflows].
+
+[player-workflows]: /docs/guides/player-workflows.md
 
 [boolean-attrs]: https://www.w3.org/TR/2011/WD-html5-20110525/common-microsyntaxes.html#boolean-attributes
 
@@ -185,7 +187,7 @@ For a discussion of more advanced player workflows, see the [player workflows gu
 
 [video-attrs]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes
 
-[videojs]: http://docs.videojs.com/docs/api/video.html
+[videojs]: http://docs.videojs.com/module-videojs.html
 
 [w3c-media-events]: https://www.w3.org/2010/05/video/mediaevents.html
 

docs/guides/text-tracks.md

@@ -91,7 +91,7 @@ The boolean `default` attribute can be used to indicate that a track's mode shou
 
 The valid [BCP 47](https://tools.ietf.org/html/bcp47) code for the language of the text track, e.g. `"en"` for English or `"es"` for Spanish.
 
-For supported language translations, please see the [languages folder (/lang)](https://github.com/videojs/video.js/tree/master/lang) folder located in the Video.js root and refer to the [languages guide](./languages.md) for more information on languages in Video.js.
+For supported language translations, please see the [languages folder (/lang)](https://github.com/videojs/video.js/tree/master/lang) folder located in the Video.js root and refer to the [languages guide](/docs/guides/languages.md) for more information on languages in Video.js.
 
 ### Text Tracks from Another Domain
 
@@ -214,7 +214,7 @@ In general, `"descriptions"` tracks are of lower precedence than `"captions"` an
 
 ## API
 
-For more complete information, refer to the [Video.js API docs](http://docs.videojs.com/docs/api/index.html).
+For more complete information, refer to the [Video.js API docs](http://docs.videojs.com/).
 
 ### Remote Text Tracks
 

docs/guides/tracks.md

@@ -8,14 +8,14 @@ There are currently three types of tracks:
 * [Video Tracks](#video-tracks)
 * [Text Tracks](#text-tracks)
 
-## [Audio Tracks](./audio-tracks.md)
+## [Audio Tracks](/docs/guides/audio-tracks.md)
 
 Audio tracks allow the selection of alternate audio for a video.
 
-## [Video Tracks](./video-tracks.md)
+## [Video Tracks](/docs/guides/video-tracks.md)
 
 Video tracks allow the selection of alternate video content.
 
-## [Text Tracks](./text-tracks.md)
+## [Text Tracks](/docs/guides/text-tracks.md)
 
 Text tracks are used to display subtitles and captions and add a menu for navigating between chapters in a video.

docs/guides/troubleshooting.md

@@ -91,7 +91,7 @@ To fix this issue please make sure that all event listeners are cleaned up on di
 
 [hosting-media]: #problems-when-hosting-media
 
-[text-tracks]: text-tracks.md
+[text-tracks]: /docs/guides/text-tracks.md
 
 [hls]: https://github.com/videojs/videojs-contrib-hls
 

docs/guides/video-tracks.md

@@ -83,7 +83,7 @@ player.videoTracks().removeTrack(track);
 
 ## API
 
-For more complete information, refer to the [Video.js API docs](http://docs.videojs.com/docs/api/index.html), specifically:
+For more complete information, refer to the [Video.js API docs](http://docs.videojs.com/), specifically:
 
 * `Player#videoTracks`
 * `VideoTrackList`
@@ -127,7 +127,7 @@ The label for the track that will be shown to the user. For example, in a menu t
 
 The valid [BCP 47](https://tools.ietf.org/html/bcp47) code for the language of the video track, e.g. `"en"` for English or `"es"` for Spanish.
 
-For supported language translations, please see the [languages folder (/lang)](https://github.com/videojs/video.js/tree/master/lang) folder located in the Video.js root and refer to the [languages guide](./languages.md) for more information on languages in Video.js.
+For supported language translations, please see the [languages folder (/lang)](https://github.com/videojs/video.js/tree/master/lang) folder located in the Video.js root and refer to the [languages guide](/docs/guides/languages.md) for more information on languages in Video.js.
 
 #### `selected`
 

docs/guides/videojs.md

@@ -43,9 +43,9 @@ var VjsButton = videojs.getComponent('Button');
 // Subclass the component (see 'extend' doc for more info)
 var MySpecialButton = videojs.extend(VjsButton, {});
 // Register the new component
-VjsButton.registerComponent('MySepcialButton', MySepcialButton);
+videojs.registerComponent('MySpecialButton', MySpecialButton);
 // (optionally) add the new component as a default player child
-myPlayer.addChild('MySepcialButton');
+myPlayer.addChild('MySpecialButton');
 ```
 
 ## `getTech()`
@@ -63,7 +63,7 @@ var html5 = new Html5(options);
 var Html5 = videojs.getTech('Html5');
 var MyTech = videojs.extend(Html5, {});
 // Register the new Tech
-VjsButton.registerTech('Tech', MyTech);
+videojs.registerTech('MyTech', MyTech);
 var player = videojs('myplayer', {
   techOrder: ['myTech', 'html5']
 });
@@ -128,7 +128,7 @@ videojs.bind(someObj, function() {
 
 ## `plugin()`
 
-**See the [plugin guide](plugins.md) in the docs for a more detailed example**
+**See the [plugin guide](/docs/guides/plugins.md) in the docs for a more detailed example**
 
 ```js
 // Make a plugin that alerts when the player plays

docs/guides/webpack.md

@@ -0,0 +1,37 @@
+# Using Webpack with Video.js
+
+video.js, and the playback technologies such as videojs-contrib-hls all work in a Webpack based build environment. Here are several configuration changes specific to Webpack that will get you up and running.
+
+## Video.js CSS:
+To add the CSS that the player requires, simply add
+`require('!style-loader!css-loader!video.js/dist/video-js.css')` to the file where the player is also included or initialized.
+
+## Handling .eot files in Webpack
+In addition to this, you may run into a problem where Webpack does not know how to load .eot files required for IE8 support by default. This can be solved by installing the file-loader and url-loader packages. Install them by running:
+`npm install --save-dev file-loader url-loader`
+
+With both packages installed, simply add the following to you webpack.config file in the 'loaders' section:
+```
+{
+  loader: 'url-loader?limit=100000',
+  test: /\.(png|woff|woff2|eot|ttf|svg)$/
+}
+```
+
+## Using Webpack with videojs-contrib-hls
+Import the HLS library with a line such as:
+`import * as HLS from 'videojs-contrib-hls';`
+
+In order to use the tech, we must also introduce webworkers with the package 'webworkify-webpack-dropin', run:
+`npm install --save-dev webworkify-webpack-dropin`
+
+To utilize this in your page, simply create an alias in your webpack.config.js file with:
+```
+resolve: {
+  alias: {
+    webworkify: 'webworkify-webpack-dropin'
+  }
+}
+```
+
+Source maps that use the 'eval' tag are not compatible with webworkify, so this may need to be changed also. Source maps such as 'cheap-eval-module-source-map' should be changed to 'cheap-source-map' or anything else that fits your build without using 'eval' source maps.

docs/index.md

@@ -1,6 +1,6 @@
 # [Video.js][vjs-website] Documentation
 
-There are two categories of docs: [Guides](guides) and [API docs][api].
+There are two categories of docs: [Guides](/docs/guides/) and [API docs][api].
 
 Guides explain general topics and use cases (e.g. setup). API docs are automatically generated from the codebase and give specific details about functions, properties, and events.
 
@@ -26,57 +26,57 @@ Guides explain general topics and use cases (e.g. setup). API docs are automatic
 
 ## Resolving Issues
 
-### [FAQ](guides/faq.md)
+### [FAQ](/docs/guides/faq.md)
 
 The frequently asked questions for video.js.
 
-### [Troubleshooting](guides/troubleshooting.md)
+### [Troubleshooting](/docs/guides/troubleshooting.md)
 
 Troubleshooting help for video.js.
 
-## [Guides](guides)
+## [Guides](/docs/guides/)
 
 ### Getting Started
 
-#### [Setup](guides/setup.md)
+#### [Setup](/docs/guides/setup.md)
 
 The setup guide covers all methods of setting up Video.js players.
 
-#### [Player Workflows](guides/player-workflows.md)
+#### [Player Workflows](/docs/guides/player-workflows.md)
 
 After mastering the basics of setup move over to this guide for some more advanced player workflows.
 
-#### [Options](guides/options.md)
+#### [Options](/docs/guides/options.md)
 
 There are a number of options that can be used to change how the player behaves, starting with the HTML5 media options like autoplay and preload, and expanding to Video.js specific options.
 
-#### [Tracks](guides/tracks.md)
+#### [Tracks](/docs/guides/tracks.md)
 
 Tracks are used for displaying text information over a video, selecting different audio tracks for a video, or selecting different video tracks.
 
 ### Customizing
 
-#### [Skins](guides/skins.md)
+#### [Skins](/docs/guides/skins.md)
 
 You can change the look of the player across playback technologies just by editing a CSS file. The skins documentation gives you a intro to how the HTML and CSS of the default skin is put together. For a list of skins you can check the [video.js wiki][skins-list].
 
-#### [Plugins](guides/plugins.md)
+#### [Plugins](/docs/guides/plugins.md)
 
 You can package up interesting Video.js customizations and reuse them elsewhere. Find out how to build your own plugin or [use one created by someone else][plugins-list].
 
-#### [Components](guides/components.md)
+#### [Components](/docs/guides/components.md)
 
 Video.js is built around a collection of components. These are the building blocks of the player UI.
 
-#### [Tech](guides/tech.md)
+#### [Tech](/docs/guides/tech.md)
 
 A "tech" is the shorthand we're using to describe any video playback technology - be it HTML5 video, Flash, . Basically anything that has a unique API to audio or video. Additional playback technologies can be added relatively easily.
 
-#### [Languages](guides/languages.md)
+#### [Languages](/docs/guides/languages.md)
 
 Video.js has multi-language support! Follow this guide to see how you can contribute to and use languages.
 
-#### [Hooks](guides/hooks.md)
+#### [Hooks](/docs/guides/hooks.md)
 
 A "hook" is functionality that wants to do when videojs creates a player. Right now only `beforesetup` and `setup` are supported. See the guide for more information on that.
 
@@ -88,8 +88,8 @@ You can refer to the [full list of API docs][api], but the most relevant API doc
 
 [skins-list]: https://github.com/videojs/video.js/wiki/Skins
 
-[api]: http://docs.videojs.com/docs/api/index.html
+[api]: http://docs.videojs.com/
 
-[api-player]: http://docs.videojs.com/docs/api/player.html
+[api-player]: http://docs.videojs.com/Player.html
 
 [vjs-website]: http://videojs.com

lang/de.json

@@ -33,7 +33,7 @@
   ", opens subtitles settings dialog": ", öffnet Einstellungen für Untertitel",
   ", selected": ", ausgewählt",
   "captions settings": "Untertiteleinstellungen",
-  "subititles settings": "Untertiteleinstellungen",
+  "subtitles settings": "Untertiteleinstellungen",
   "descriptions settings": "Einstellungen für Beschreibungen",
   "Close Modal Dialog": "Modales Fenster schließen",
   "Descriptions": "Beschreibungen",
@@ -70,7 +70,6 @@
   "Casual": "Zwanglos",
   "Script": "Schreibeschrift",
   "Small Caps": "Small-Caps",
-  "Defaults": "Standardeinstellungen",
   "Done": "Fertig",
   "Caption Settings Dialog": "Einstellungsdialog für Untertitel",
   "Beginning of dialog window. Escape will cancel and close the window.": "Anfang des Dialogfensters. Esc bricht ab und schließt das Fenster."

lang/en.json

@@ -1,4 +1,6 @@
 {
+  "Audio Player": "Audio Player",
+  "Video Player": "Video Player",
   "Play": "Play",
   "Pause": "Pause",
   "Replay": "Replay",
@@ -9,6 +11,8 @@
   "LIVE": "LIVE",
   "Loaded": "Loaded",
   "Progress": "Progress",
+  "Progress Bar": "Progress Bar",
+  "progress bar timing: currentTime={1} duration={2}": "{1} of {2}",
   "Fullscreen": "Fullscreen",
   "Non-Fullscreen": "Non-Fullscreen",
   "Mute": "Mute",
@@ -19,10 +23,10 @@
   "Captions": "Captions",
   "captions off": "captions off",
   "Chapters": "Chapters",
-  "Close Modal Dialog": "Close Modal Dialog",
   "Descriptions": "Descriptions",
   "descriptions off": "descriptions off",
   "Audio Track": "Audio Track",
+  "Volume Level": "Volume Level",
   "You aborted the media playback": "You aborted the media playback",
   "A network error caused the media download to fail part-way.": "A network error caused the media download to fail part-way.",
   "The media could not be loaded, either because the server or network failed or because the format is not supported.": "The media could not be loaded, either because the server or network failed or because the format is not supported.",
@@ -31,6 +35,7 @@
   "The media is encrypted and we do not have the keys to decrypt it.": "The media is encrypted and we do not have the keys to decrypt it.",
   "Play Video": "Play Video",
   "Close": "Close",
+  "Close Modal Dialog": "Close Modal Dialog",
   "Modal Window": "Modal Window",
   "This is a modal window": "This is a modal window",
   "This modal can be closed by pressing the Escape key or activating the close button.": "This modal can be closed by pressing the Escape key or activating the close button.",
@@ -39,7 +44,7 @@
   ", opens descriptions settings dialog": ", opens descriptions settings dialog",
   ", selected": ", selected",
   "captions settings": "captions settings",
-  "subititles settings": "subititles settings",
+  "subtitles settings": "subititles settings",
   "descriptions settings": "descriptions settings",
   "Text": "Text",
   "White": "White",
@@ -70,8 +75,10 @@
   "Casual": "Casual",
   "Script": "Script",
   "Small Caps": "Small Caps",
-  "Defaults": "Defaults",
+  "Reset": "Reset",
+  "all settings to the default values": "all settings to the default values",
   "Done": "Done",
   "Caption Settings Dialog": "Caption Settings Dialog",
-  "Beginning of dialog window. Escape will cancel and close the window.": "Beginning of dialog window. Escape will cancel and close the window."
+  "Beginning of dialog window. Escape will cancel and close the window.": "Beginning of dialog window. Escape will cancel and close the window.",
+  "End of dialog window.": "End of dialog window."
 }

lang/es.json

@@ -1,5 +1,6 @@
 {
   "Play": "Reproducción",
+  "Play Video": "Reproducción Vídeo",
   "Pause": "Pausa",
   "Current Time": "Tiempo reproducido",
   "Duration Time": "Duración total",

lang/fr.json

@@ -1,4 +1,6 @@
 {
+  "Audio Player": "Lecteur audio",
+  "Video Player": "Lecteur vidéo",
   "Play": "Lecture",
   "Pause": "Pause",
   "Replay": "Revoir",
@@ -9,6 +11,8 @@
   "LIVE": "EN DIRECT",
   "Loaded": "Chargé",
   "Progress": "Progression",
+  "Progress Bar": "Barre de progression",
+  "progress bar timing: currentTime={1} duration={2}": "{1} de {2}",
   "Fullscreen": "Plein écran",
   "Non-Fullscreen": "Fenêtré",
   "Mute": "Sourdine",
@@ -19,10 +23,10 @@
   "Captions": "Sous-titres transcrits",
   "captions off": "Sous-titres transcrits désactivés",
   "Chapters": "Chapitres",
-  "Close Modal Dialog": "Fermer la boîte de dialogue modale",
   "Descriptions": "Descriptions",
   "descriptions off": "descriptions désactivées",
   "Audio Track": "Piste audio",
+  "Volume Level": "Niveau de volume",
   "You aborted the media playback": "Vous avez interrompu la lecture de la vidéo.",
   "A network error caused the media download to fail part-way.": "Une erreur de réseau a interrompu le téléchargement de la vidéo.",
   "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Cette vidéo n'a pas pu être chargée, soit parce que le serveur ou le réseau a échoué ou parce que le format n'est pas reconnu.",
@@ -31,11 +35,50 @@
   "The media is encrypted and we do not have the keys to decrypt it.": "Le média est chiffré et nous n'avons pas les clés pour le déchiffrer.",
   "Play Video": "Lire la vidéo",
   "Close": "Fermer",
+  "Close Modal Dialog": "Fermer la boîte de dialogue modale",
   "Modal Window": "Fenêtre modale",
   "This is a modal window": "Ceci est une fenêtre modale",
   "This modal can be closed by pressing the Escape key or activating the close button.": "Ce modal peut être fermé en appuyant sur la touche Échap ou activer le bouton de fermeture.",
   ", opens captions settings dialog": ", ouvrir les paramètres des sous-titres transcrits",
   ", opens subtitles settings dialog": ", ouvrir les paramètres des sous-titres",
   ", opens descriptions settings dialog": ", ouvrir les paramètres des descriptions",
-  ", selected": ", sélectionné"
+  ", selected": ", sélectionné",
+  "captions settings": "Paramètres des sous-titres transcrits",
+  "subtitles settings": "Paramètres des sous-titres",
+  "descriptions settings": "Paramètres des descriptions",
+  "Text": "Texte",
+  "White": "Blanc",
+  "Black": "Noir",
+  "Red": "Rouge",
+  "Green": "Vert",
+  "Blue": "Bleu",
+  "Yellow": "Jaune",
+  "Magenta": "Magenta",
+  "Cyan": "Cyan",
+  "Background": "Arrière-plan",
+  "Window": "Fenêtre",
+  "Transparent": "Transparent",
+  "Semi-Transparent": "Semi-transparent",
+  "Opaque": "Opaque",
+  "Font Size": "Taille des caractères",
+  "Text Edge Style": "Style des contours du texte",
+  "None": "Aucun",
+  "Raised": "Élevé",
+  "Depressed": "Enfoncé",
+  "Uniform": "Uniforme",
+  "Dropshadow": "Ombre portée",
+  "Font Family": "Famille de polices",
+  "Proportional Sans-Serif": "Polices à chasse variable sans empattement (Proportional Sans-Serif)",
+  "Monospace Sans-Serif": "Polices à chasse fixe sans empattement (Monospace Sans-Serif)",
+  "Proportional Serif": "Polices à chasse variable avec empattement (Proportional Serif)",
+  "Monospace Serif": "Polices à chasse fixe avec empattement (Monospace Serif)",
+  "Casual": "Manuscrite",
+  "Script": "Scripte",
+  "Small Caps": "Petites capitales",
+  "Reset": "Réinitialiser",
+  "all settings to the default values": "tous les paramètres aux valeurs par défaut",
+  "Done": "Terminé",
+  "Caption Settings Dialog": "Boîte de dialogue des paramètres des sous-titres transcrits",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Début de la fenêtre de dialogue. La touche d'échappement annulera et fermera la fenêtre.",
+  "End of dialog window.": "Fin de la fenêtre de dialogue."
 }

lang/tr.json

@@ -39,7 +39,7 @@
   ", opens descriptions settings dialog": ", açıklama ayarları menüsünü açar",
   ", selected": ", seçildi",
   "captions settings": "altyazı ayarları",
-  "subititles settings": "altyazı ayarları",
+  "subtitles settings": "altyazı ayarları",
   "descriptions settings": "açıklama ayarları",
   "Text": "Yazı",
   "White": "Beyaz",
@@ -70,7 +70,6 @@
   "Casual": "Gündelik",
   "Script": "El Yazısı",
   "Small Caps": "Küçük Boyutlu Büyük Harfli",
-  "Defaults": "Varsayılan Ayarlar",
   "Done": "Tamam",
   "Caption Settings Dialog": "Altyazı Ayarları Menüsü",
   "Beginning of dialog window. Escape will cancel and close the window.": "Diyalog penceresinin başlangıcı. ESC tuşu işlemi iptal edip pencereyi kapatacaktır."

package.json

@@ -1,7 +1,7 @@
 {
   "name": "video.js",
   "description": "An HTML5 and Flash video player with a common API and skin for both.",
-  "version": "6.0.0-RC.1",
+  "version": "6.0.1",
   "main": "./es5/video.js",
   "style": "./dist/video-js.css",
   "copyright": "Copyright Brightcove, Inc. <https://www.brightcove.com/>",
@@ -26,11 +26,15 @@
     "test": "grunt test",
     "docs": "npm run docs:lint && npm run docs:api",
     "jsdoc": "jsdoc",
+    "predocs:api": "node -e \"var s=require('shelljs'),d=['docs/api'];s.rm('-rf',d);\"",
     "docs:api": "jsdoc -c .jsdoc.json",
+    "postdocs:api": "node ./build/fix-api-docs.js",
     "docs:lint": "remark -- './**/*.md'",
     "docs:fix": "remark --output -- './**/*.md'",
     "babel": "babel src/js -d es5",
-    "prepublish": "not-in-install && npm run docs:api || in-install"
+    "prepublish": "not-in-install && run-p docs:api build || in-install",
+    "prepush": "npm run lint -- --errors",
+    "version": "node build/version.js && git add CHANGELOG.md"
   },
   "repository": {
     "type": "git",
@@ -43,8 +47,8 @@
     "tsml": "1.0.1",
     "videojs-font": "2.0.0",
     "videojs-ie8": "1.1.2",
-    "videojs-vtt.js": "0.12.1",
-    "xhr": "2.3.3"
+    "videojs-vtt.js": "0.12.3",
+    "xhr": "2.4.0"
   },
   "devDependencies": {
     "aliasify": "^2.1.0",
@@ -65,7 +69,6 @@
     "conventional-changelog-videojs": "^3.0.0",
     "es5-shim": "^4.1.3",
     "es6-shim": "^0.35.1",
-    "ghooks": "^1.3.2",
     "grunt": "^0.4.5",
     "grunt-accessibility": "^5.0.0",
     "grunt-babel": "^6.0.0",
@@ -89,10 +92,11 @@
     "grunt-version": "~1.1.1",
     "grunt-videojs-languages": "0.0.4",
     "grunt-zip": "0.17.1",
+    "husky": "^0.13.1",
     "in-publish": "^2.0.0",
     "istanbul": "^0.4.5",
     "jsdoc": "^3.4.2",
-    "karma": "^1.2.0",
+    "karma": "1.3.0",
     "karma-browserify": "^5.1.0",
     "karma-browserstack-launcher": "^1.0.1",
     "karma-chrome-launcher": "^2.0.0",
@@ -108,20 +112,23 @@
     "lodash": "^4.16.6",
     "markdown-table": "^1.0.0",
     "npm-run": "^4.1.0",
+    "npm-run-all": "^4.0.2",
     "proxyquireify": "^3.0.0",
     "qunitjs": "1.23.1",
-    "remark-cli": "^2.1.0",
-    "remark-lint": "^5.2.0",
-    "remark-toc": "^3.1.0",
-    "remark-validate-links": "^5.0.0",
+    "remark-cli": "^3.0.0",
+    "remark-lint": "^6.0.0",
+    "remark-toc": "^4.0.0",
+    "remark-validate-links": "^6.0.0",
+    "replace": "^0.3.0",
     "shelljs": "^0.7.5",
     "sinon": "^1.16.1",
     "time-grunt": "^1.1.1",
     "tui-jsdoc-template": "^1.1.0",
-    "uglify-js": "~2.7.3",
+    "uglify-js": "~2.8.8",
     "videojs-doc-generator": "0.0.1",
+    "videojs-flash": "^1.0.0-RC.0",
     "videojs-standard": "^6.0.1",
-    "webpack": "^1.13.2"
+    "webpack": "^2.3.0"
   },
   "vjsstandard": {
     "ignore": [
@@ -137,9 +144,10 @@
       "**/test/karma.conf.js"
     ]
   },
-  "config": {
-    "ghooks": {
-      "pre-push": "npm run lint -- --errors"
-    }
+  "greenkeeper": {
+    "ignore": [
+      "qunitjs",
+      "sinon"
+    ]
   }
 }

sandbox/combined-tracks.html.example

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8" />
+  <title>Video.js Sandbox</title>
+
+  <!-- Add ES5 shim and sham for IE8 -->
+  <script src="../build/temp/ie8/videojs-ie8.js"></script>
+
+  <!-- Load the source files -->
+  <link href="../build/temp/video-js.css" rel="stylesheet" type="text/css">
+  <script src="../build/temp/video.js"></script>
+  <script src="../node_modules/videojs-flash/dist/videojs-flash.js"></script>
+
+  <!-- Set the location of the flash SWF -->
+  <script>
+    videojs.options.flash.swf = '../build/temp/video-js.swf';
+  </script>
+</head>
+<body>
+  <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">
+    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.</p>
+    <pre>cp sandbox/index.html.example sandbox/index.html</pre>
+    <pre>npm run start</pre>
+    <pre>open http://localhost:9999/sandbox/index.html</pre>
+  </div>
+
+  <video id="vid1" class="video-js vjs-default-skin" lang="en" controls preload="auto" width="640" height="360" poster="//d2zihajmogu5jn.cloudfront.net/elephantsdream/poster.png">
+    <source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4" type="video/mp4">
+    <source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.ogg" type="video/ogg">
+    <track kind="captions" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.en.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
+    <track kind="subtitles" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.ar.vtt" srclang="ar" label="Arabic"></track><!-- Tracks need an ending tag thanks to IE9 -->
+    <track kind="subtitles" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.sv.vtt" srclang="sv" label="Swedish"></track><!-- Tracks need an ending tag thanks to IE9 -->
+    <track kind="subtitles" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.ru.vtt" srclang="ru" label="Russian"></track><!-- Tracks need an ending tag thanks to IE9 -->
+    <track kind="subtitles" src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/captions.ja.vtt" srclang="ja" label="Japanese"></track><!-- Tracks need an ending tag thanks to IE9 -->
+    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
+  </video>
+  <p>This player has the captions-only captionsButton, the subtiles-only subtitlesButton and the subsCapsButton which shows both kinds. Typically you'll use either just the subsCapsButton alone, or one or both of the captionsButton and subtitlesButton.</p>
+  <script>
+    var vid = document.getElementById("vid1");
+    var player = videojs(vid, {
+      controlBar: {
+        children: [
+          'playToggle',
+          'volumePanel',
+          'currentTimeDisplay',
+          'timeDivider',
+          'durationDisplay',
+          'progressControl',
+          'liveDisplay',
+          'remainingTimeDisplay',
+          'customControlSpacer',
+          'playbackRateMenuButton',
+          'chaptersButton',
+          'descriptionsButton',
+          'subtitlesButton',
+          'captionsButton',
+          'subsCapsButton',
+          'audioTrackButton',
+          'fullscreenToggle'
+        ]
+      }
+    });
+    console.log(player.language());
+  </script>
+
+</body>
+</html>

sandbox/descriptions.html.example

@@ -24,8 +24,8 @@
              useful way! -->
   <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="360"
       data-setup='{ "html5" : { "nativeTextTracks" : false } }'>
-    <source src="https://archive.org/download/ElephantsDream/ed_hd.mp4" type="video/mp4">
-    <source src="https://archive.org/download/ElephantsDream/ed_hd.ogv" type="video/ogv">
+    <source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4" type="video/mp4">
+    <source src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.ogg" type="video/ogg">
 
     <track kind="captions" src="../docs/examples/elephantsdream/captions.en.vtt" srclang="en" label="English" default></track><!-- Tracks need an ending tag thanks to IE9 -->
     <track kind="captions" src="../docs/examples/elephantsdream/captions.sv.vtt" srclang="sv" label="Swedish"></track>

sandbox/flash.html.example

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Video.js Sandbox</title>
+
+  <!-- Add ES5 shim and sham for IE8 -->
+  <script src="../build/temp/ie8/videojs-ie8.js"></script>
+
+  <!-- Load the source files -->
+  <link href="../build/temp/video-js.css" rel="stylesheet" type="text/css">
+  <script src="../build/temp/video.js"></script>
+  <script src="../node_modules/videojs-flash/dist/videojs-flash.js"></script>
+
+  <!-- Set the location of the flash SWF -->
+  <script>
+    videojs.options.flash.swf = '../build/temp/video-js.swf';
+  </script>
+
+</head>
+<body>
+  <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">
+    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.</p>
+    <pre>cp sandbox/flash.html.example sandbox/flash.html</pre>
+    <pre>npm run start</pre>
+    <pre>open http://localhost:9999/sandbox/flash.html</pre>
+  </div>
+
+  <video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
+      poster="http://vjs.zencdn.net/v/oceans.png"
+      data-setup=''>
+    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
+    <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
+    <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
+    <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
+    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
+  </video>
+
+  <script>
+    var vid = document.getElementById("vid1");
+    var player = videojs(vid, {techOrder: ['flash', 'html5']});
+  </script>
+
+</body>
+</html>

sandbox/index.html.example

@@ -10,6 +10,7 @@
   <!-- Load the source files -->
   <link href="../build/temp/video-js.css" rel="stylesheet" type="text/css">
   <script src="../build/temp/video.js"></script>
+  <script src="../node_modules/videojs-flash/dist/videojs-flash.js"></script>
 
   <!-- Set the location of the flash SWF -->
   <script>
@@ -21,8 +22,7 @@
   <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">
     <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.</p>
     <pre>cp sandbox/index.html.example sandbox/index.html</pre>
-    <pre>grunt watch</pre>
-    <pre>grunt connect</pre>
+    <pre>npm run start</pre>
     <pre>open http://localhost:9999/sandbox/index.html</pre>
   </div>
 
@@ -38,6 +38,8 @@
 
   <script>
     var vid = document.getElementById("vid1");
+    var player = videojs(vid);
+
   </script>
 
 </body>

src/css/components/_audio.scss

@@ -1,3 +1,3 @@
-.video-js .vjs-audio-button {
+.video-js .vjs-audio-button .vjs-icon-placeholder {
   @extend .vjs-icon-audio;
 }

src/css/components/_big-play.scss

@@ -17,11 +17,11 @@
   @include border-radius(0.3em);
   @include transition(all 0.4s);
 
-  @extend .vjs-icon-play;
-
   // Since the big play button doesn't inherit from vjs-control, we need to specify a bit more than
   // other buttons for the icon.
-  &:before {
+  & .vjs-icon-placeholder:before {
+    @extend .vjs-icon-play;
+
     @extend %icon-default;
   }
 }

src/css/components/_captions-settings.scss

@@ -1,86 +1,50 @@
-.vjs-caption-settings {
-  position: relative;
-  top: 1em;
+.vjs-modal-dialog.vjs-text-track-settings {
   background-color: $primary-background-color;
   background-color: rgba($primary-background-color, 0.75);
   color: $primary-foreground-color;
-  margin: 0 auto;
-  padding: 0.5em;
-  height: 16em;
-  font-size: 12px;
-  width: 40em;
+  height: 70%;
 }
 
-.vjs-caption-settings .vjs-tracksettings {
-  top: 0;
-  bottom: 1em;
-  left: 0;
-  right: 0;
-  position: absolute;
-  overflow: auto;
+// Layout divs
+.vjs-text-track-settings .vjs-modal-dialog-content {
+  display: table;
 }
 
-.vjs-caption-settings .vjs-tracksettings-colors,
-.vjs-caption-settings .vjs-tracksettings-font {
-  float: left;
-}
-.vjs-caption-settings .vjs-tracksettings-colors:after,
-.vjs-caption-settings .vjs-tracksettings-font:after,
-.vjs-caption-settings .vjs-tracksettings-controls:after {
-  clear: both;
+.vjs-text-track-settings .vjs-track-settings-colors,
+.vjs-text-track-settings .vjs-track-settings-font,
+.vjs-text-track-settings .vjs-track-settings-controls {
+  display: table-cell;
 }
 
-.vjs-caption-settings .vjs-tracksettings-controls {
-  position: absolute;
-  bottom: 1em;
-  right: 1em;
+.vjs-text-track-settings .vjs-track-settings-controls {
+  text-align: right;
+  vertical-align: bottom;
 }
 
-.vjs-caption-settings .vjs-tracksetting {
+// Form elements
+.vjs-text-track-settings fieldset {
   margin: 5px;
   padding: 3px;
-  min-height: 40px;
   border: none;
 }
-.vjs-caption-settings .vjs-tracksetting label,
-.vjs-caption-settings .vjs-tracksetting legend {
-  display: block;
-  width: 100px;
-  margin-bottom: 5px;
-}
 
-.vjs-caption-settings .vjs-tracksetting span {
-  display: inline;
+.vjs-text-track-settings fieldset span {
+  display: inline-block;
   margin-left: 5px;
-  vertical-align: top;
-  float: right;
 }
 
-.vjs-caption-settings .vjs-tracksetting > div {
-  margin-bottom: 5px;
-  min-height: 20px;
+.vjs-text-track-settings legend {
+  color: $primary-foreground-color;
+  margin: 0 0 5px 0;
 }
 
-.vjs-caption-settings .vjs-tracksetting > div:last-child {
-  margin-bottom: 0;
-  padding-bottom: 0;
-  min-height: 0;
-}
-
-.vjs-caption-settings label > input {
-  margin-right: 10px;
-}
-
-.vjs-caption-settings fieldset {
-  margin-top: 1em;
-  margin-left: .5em;
-}
-
-// Hide labels within fieldsets, so they are only for screen reader users
-.vjs-caption-settings fieldset .vjs-label {
+// Hide labels, so they are only for screen reader users
+.vjs-text-track-settings .vjs-label {
   position: absolute;
-  clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
+  clip: rect(1px 1px 1px 1px); // for Internet Explorer
   clip: rect(1px, 1px, 1px, 1px);
+  display: block;
+  margin: 0 0 5px 0;
   padding: 0;
   border: 0;
   height: 1px;
@@ -88,7 +52,25 @@
   overflow: hidden;
 }
 
-.vjs-caption-settings input[type="button"] {
-  width: 40px;
-  height: 40px;
+.vjs-track-settings-controls button:focus,
+.vjs-track-settings-controls button:active {
+  outline-style: solid;
+  outline-width: medium;
+  background-image: linear-gradient(0deg, $primary-foreground-color 88%, $secondary-background-color 100%);
+}
+
+.vjs-track-settings-controls button:hover {
+  color: rgba(#2B333F, 0.75);
+}
+
+.vjs-track-settings-controls button {
+  background-color: $primary-foreground-color;
+  background-image: linear-gradient(-180deg, $primary-foreground-color 88%, $secondary-background-color 100%);
+  color: #2B333F;
+  cursor: pointer;
+  border-radius: 2px;
+}
+
+.vjs-track-settings-controls .vjs-default-button {
+  margin-right: 1em;
 }

src/css/components/_captions.scss

@@ -1,3 +1,3 @@
-.video-js .vjs-captions-button {
+.video-js .vjs-captions-button .vjs-icon-placeholder {
   @extend .vjs-icon-captions;
 }

src/css/components/_chapters.scss

@@ -1,4 +1,4 @@
-.video-js .vjs-chapters-button {
+.video-js .vjs-chapters-button .vjs-icon-placeholder {
   @extend .vjs-icon-chapters;
 }
 

src/css/components/_close-button.scss

@@ -1,5 +1,8 @@
 .video-js .vjs-control.vjs-close-button {
-  @extend .vjs-icon-cancel;
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-cancel;
+  }
+
   cursor: pointer;
   height: 3em;
   position: absolute;

src/css/components/_control.scss

@@ -10,12 +10,12 @@
   width: 4em;
   @include flex(none);
 
-  &:before {
-    font-size: 1.8em;
-    line-height: 1.67;
+}
+.vjs-button > .vjs-icon-placeholder:before {
+  font-size: 1.8em;
+  line-height: 1.67;
 
-    @extend %icon-default;
-  }
+  @extend %icon-default;
 }
 
 // Replacement for focus outline

src/css/components/_descriptions.scss

@@ -1,3 +1,3 @@
-.video-js .vjs-descriptions-button {
+.video-js .vjs-descriptions-button .vjs-icon-placeholder {
   @extend .vjs-icon-audio-description;
 }

src/css/components/_fullscreen.scss

@@ -1,9 +1,12 @@
 .video-js .vjs-fullscreen-control {
   cursor: pointer;
   @include flex(none);
-  @extend .vjs-icon-fullscreen-enter;
+
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-fullscreen-enter;
+  }
 }
 // Switch to the exit icon when the player is in fullscreen
-.video-js.vjs-fullscreen .vjs-fullscreen-control {
+.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder {
   @extend .vjs-icon-fullscreen-exit;
 }

src/css/components/_layout.scss

@@ -33,6 +33,10 @@
   }
 }
 
+.video-js[tabindex="-1"] {
+  outline: none;
+}
+
 // All elements inherit border-box sizing
 .video-js *,
 .video-js *:before,

src/css/components/_modal-dialog.scss

@@ -1,6 +1,18 @@
 .video-js .vjs-modal-dialog {
   @extend %fill-parent;
   @include linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
+
+  // This allows scrolling of content if need be.
+  overflow: auto;
+
+  // When combined with `overflow: auto;`, this fixes gaps left by
+  // scrollbars in older IE versions.
+  box-sizing: content-box;
+}
+
+// Reset box-sizing inside the modal dialog.
+.video-js .vjs-modal-dialog > * {
+  box-sizing: border-box;
 }
 
 .vjs-modal-dialog .vjs-modal-dialog-content {

src/css/components/_play-pause.scss

@@ -1,11 +1,11 @@
-.video-js .vjs-play-control {
+.video-js .vjs-play-control .vjs-icon-placeholder {
   cursor: pointer;
   @include flex(none);
   @extend .vjs-icon-play;
 }
-.video-js .vjs-play-control.vjs-playing {
+.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder {
   @extend .vjs-icon-pause;
 }
-.video-js .vjs-play-control.vjs-ended {
+.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder {
   @extend .vjs-icon-replay;
 }

src/css/components/_progress.scss

@@ -2,6 +2,7 @@
 //
 // This is the container for all progress bar-related components/elements.
 .video-js .vjs-progress-control {
+  cursor: pointer;
   @include flex(auto);
   @include display-flex(center);
   min-width: 4em;
@@ -24,6 +25,15 @@
   height: 0.3em;
 }
 
+.video-js .vjs-progress-control .vjs-progress-holder {
+
+  // This is one of the rare cases where we are using a pixel dimension. The
+  // reason is that the progress holder font-size changes on hover. With the
+  // default em-based margins, this means it gets narrower and causes issues
+  // with mouseover behaviors/math.
+  margin: 0 10px;
+}
+
 // This increases the size of the progress holder so there is an increased
 // hit area for clicks/touches.
 .video-js .vjs-progress-control:hover .vjs-progress-holder {
@@ -40,7 +50,7 @@
 .video-js .vjs-progress-holder .vjs-load-progress div {
   position: absolute;
   display: block;
-  height: 0.3em;
+  height: 100%;
   margin: 0;
   padding: 0;
   // updated by javascript during playback
@@ -82,9 +92,7 @@
 
 // .vjs-time-tooltip
 //
-// These elements are displayed above the progress bar. They are not components
-// themselves, but they are managed by the MouseTimeDisplay and PlayProgressBar
-// components individually.
+// These elements are displayed above the progress bar.
 //
 // By default, they are hidden and only shown when hovering over the progress
 // control.
@@ -92,7 +100,6 @@
   @include background-color-with-alpha(#fff, 0.8);
   @include border-radius(0.3em);
   color: #000;
-  display: inline-block;
 
   // By floating the tooltips to the right, their right edge becomes aligned
   // with the right edge of their parent element. However, in order to have them
@@ -113,7 +120,13 @@
   z-index: 1;
 }
 
-.video-js .vjs-progress-control:hover .vjs-time-tooltip {
+.video-js .vjs-progress-holder:focus .vjs-time-tooltip {
+  display: none;
+}
+
+.video-js .vjs-progress-control:hover .vjs-time-tooltip,
+.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip {
+  display: block;
 
   // Ensure that we maintain a font-size of ~10px.
   font-size: 0.6em;

src/css/components/_subs-caps.scss

@@ -0,0 +1,25 @@
+// North America uses 'CC' icon
+.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder {
+  @extend .vjs-icon-captions;
+}
+
+// ROW uses 'subtitles'
+// Double selector because @extend puts these rules above the captions icon
+.video-js .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder {
+  @extend .vjs-icon-subtitles;
+}
+
+.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
+  position: absolute;
+}
+.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
+  font-family: VideoJS;
+  content: "\f10d";
+  font-size: 1.5em;
+  line-height: inherit;
+}

src/css/components/_subtitles.scss

@@ -1,3 +1,3 @@
-.video-js .vjs-subtitles-button {
+.video-js .vjs-subtitles-button .vjs-icon-placeholder {
   @extend .vjs-icon-subtitles;
 }

src/css/components/_volume.scss

@@ -1,25 +1,29 @@
 .video-js .vjs-mute-control {
   cursor: pointer;
   @include flex(none);
-  @extend .vjs-icon-volume-high;
   // padding here is for IE < 9, it doesn't do width: auto from
   // another style correctly
   padding-left: 2em;
   padding-right: 2em;
   padding-bottom: 3em;
+
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-volume-high;
+  }
 }
 
-.video-js .vjs-mute-control.vjs-vol-0 {
+.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder {
   @extend .vjs-icon-volume-mute;
 }
-.video-js .vjs-mute-control.vjs-vol-1 {
+.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder {
   @extend .vjs-icon-volume-low;
 }
-.video-js .vjs-mute-control.vjs-vol-2 {
+.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder {
   @extend .vjs-icon-volume-mid;
 }
 
 .video-js .vjs-volume-control {
+  cursor: pointer;
   margin-right: 1em;
   @include display-flex;
 }

src/css/components/menu/_menu.scss

@@ -16,8 +16,19 @@
   display: block;
   padding: 0;
   margin: 0;
-  overflow: auto;
   font-family: $text-font-family;
+
+  // This allows scrolling of content if need be.
+  overflow: auto;
+
+  // When combined with `overflow: auto;`, this fixes gaps left by
+  // scrollbars in older IE versions.
+  box-sizing: content-box;
+}
+
+// Reset box-sizing inside the menu.
+.vjs-menu .vjs-menu-content > * {
+  box-sizing: border-box;
 }
 
 // prevent menus from opening while scrubbing (FF, IE)

src/css/video-js.scss

@@ -8,6 +8,7 @@
 @import "components/big-play";
 @import "components/button";
 @import "components/close-button";
+@import "components/modal-dialog";
 
 @import "components/menu/menu";
 @import "components/menu/menu-popup";
@@ -35,9 +36,9 @@
 @import "components/chapters";
 @import "components/descriptions";
 @import "components/subtitles";
+@import "components/subs-caps";
 @import "components/audio";
 @import "components/adaptive";
 @import "components/captions-settings";
-@import "components/modal-dialog";
 
 @import "print";

src/js/big-play-button.js

@@ -34,7 +34,23 @@ class BigPlayButton extends Button {
    * @listens click
    */
   handleClick(event) {
-    this.player_.play();
+    const playPromise = this.player_.play();
+
+    const cb = this.player_.getChild('controlBar');
+    const playToggle = cb && cb.getChild('playToggle');
+
+    if (!playToggle) {
+      this.player_.focus();
+      return;
+    }
+
+    if (playPromise) {
+      playPromise.then(() => playToggle.focus());
+    } else {
+      this.setTimeout(function() {
+        playToggle.focus();
+      }, 1);
+    }
   }
 }
 

src/js/button.js

@@ -33,6 +33,7 @@ class Button extends ClickableComponent {
     tag = 'button';
 
     props = assign({
+      innerHTML: '<span aria-hidden="true" class="vjs-icon-placeholder"></span>',
       className: this.buildCSSClass()
     }, props);
 

src/js/clickable-component.js

@@ -51,6 +51,7 @@ class ClickableComponent extends Component {
    */
   createEl(tag = 'div', props = {}, attributes = {}) {
     props = assign({
+      innerHTML: '<span aria-hidden="true" class="vjs-icon-placeholder"></span>',
       className: this.buildCSSClass(),
       tabIndex: 0
     }, props);
@@ -120,7 +121,10 @@ class ClickableComponent extends Component {
 
     this.controlText_ = text;
     this.controlTextEl_.innerHTML = localizedText;
-    el.setAttribute('title', localizedText);
+    if (!this.nonIconControl) {
+      // Set title attribute if only an icon is shown
+      el.setAttribute('title', localizedText);
+    }
   }
 
   /**
@@ -215,7 +219,7 @@ class ClickableComponent extends Component {
     // Support Space (32) or Enter (13) key operation to fire a click event
     if (event.which === 32 || event.which === 13) {
       event.preventDefault();
-      this.handleClick(event);
+      this.trigger('click');
     } else if (super.handleKeyPress) {
 
       // Pass keypress handling up for unsupported keys

src/js/component.js

@@ -139,13 +139,15 @@ class Component {
     this.childIndex_ = null;
     this.childNameIndex_ = null;
 
-    // Remove element from DOM
-    if (this.el_.parentNode) {
-      this.el_.parentNode.removeChild(this.el_);
-    }
+    if (this.el_) {
+      // Remove element from DOM
+      if (this.el_.parentNode) {
+        this.el_.parentNode.removeChild(this.el_);
+      }
 
-    DomData.removeData(this.el_);
-    this.el_ = null;
+      DomData.removeData(this.el_);
+      this.el_ = null;
+    }
   }
 
   /**
@@ -214,34 +216,70 @@ class Component {
   /**
    * Localize a string given the string in english.
    *
+   * If tokens are provided, it'll try and run a simple token replacement on the provided string.
+   * The tokens it loooks for look like `{1}` with the index being 1-indexed into the tokens array.
+   *
+   * If a `defaultValue` is provided, it'll use that over `string`,
+   * if a value isn't found in provided language files.
+   * This is useful if you want to have a descriptive key for token replacement
+   * but have a succinct localized string and not require `en.json` to be included.
+   *
+   * Currently, it is used for the progress bar timing.
+   * ```js
+   * {
+   *   "progress bar timing: currentTime={1} duration={2}": "{1} of {2}"
+   * }
+   * ```
+   * It is then used like so:
+   * ```js
+   * this.localize('progress bar timing: currentTime={1} duration{2}',
+   *               [this.player_.currentTime(), this.player_.duration()],
+   *               '{1} of {2}');
+   * ```
+   *
+   * Which outputs something like: `01:23 of 24:56`.
+   *
+   *
    * @param {string} string
-   *        The string to localize.
+   *        The string to localize and the key to lookup in the language files.
+   * @param {string[]} [tokens]
+   *        If the current item has token replacements, provide the tokens here.
+   * @param {string} [defaultValue]
+   *        Defaults to `string`. Can be a default value to use for token replacement
+   *        if the lookup key is needed to be separate.
    *
    * @return {string}
    *         The localized string or if no localization exists the english string.
    */
-  localize(string) {
+  localize(string, tokens, defaultValue = string) {
     const code = this.player_.language && this.player_.language();
     const languages = this.player_.languages && this.player_.languages();
+    const language = languages && languages[code];
+    const primaryCode = code && code.split('-')[0];
+    const primaryLang = languages && languages[primaryCode];
 
-    if (!code || !languages) {
-      return string;
-    }
-
-    const language = languages[code];
+    let localizedString = defaultValue;
 
     if (language && language[string]) {
-      return language[string];
+      localizedString = language[string];
+    } else if (primaryLang && primaryLang[string]) {
+      localizedString = primaryLang[string];
     }
 
-    const primaryCode = code.split('-')[0];
-    const primaryLang = languages[primaryCode];
+    if (tokens) {
+      localizedString = localizedString.replace(/\{(\d+)\}/g, function(match, index) {
+        const value = tokens[index - 1];
+        let ret = value;
 
-    if (primaryLang && primaryLang[string]) {
-      return primaryLang[string];
+        if (typeof value === 'undefined') {
+          ret = match;
+        }
+
+        return ret;
+      });
     }
 
-    return string;
+    return localizedString;
   }
 
   /**
@@ -380,7 +418,7 @@ class Component {
 
     // If a name wasn't used to create the component, check if we can use the
     // name function of the component
-    componentName = componentName || (component.name && component.name());
+    componentName = componentName || (component.name && toTitleCase(component.name()));
 
     if (componentName) {
       this.childNameIndex_[componentName] = component;
@@ -790,7 +828,7 @@ class Component {
    *        The width that you want to set postfixed with '%', 'px' or nothing.
    *
    * @param {boolean} [skipListeners]
-   *        Skip the resize event trigger
+   *        Skip the componentresize event trigger
    *
    * @return {number|string}
    *         The width when getting, zero if there is no width. Can be a string
@@ -808,7 +846,7 @@ class Component {
    *        The height that you want to set postfixed with '%', 'px' or nothing.
    *
    * @param {boolean} [skipListeners]
-   *        Skip the resize event trigger
+   *        Skip the componentresize event trigger
    *
    * @return {number|string}
    *         The width when getting, zero if there is no width. Can be a string
@@ -828,7 +866,7 @@ class Component {
    *         Height to set the `Component`s element to.
    */
   dimensions(width, height) {
-    // Skip resize listeners on width for optimization
+    // Skip componentresize listeners on width for optimization
     this.width(width, true);
     this.height(height);
   }
@@ -847,7 +885,7 @@ class Component {
    * - If you want the computed style of the component, use {@link Component#currentWidth}
    *   and {@link {Component#currentHeight}
    *
-   * @fires Component#resize
+   * @fires Component#componentresize
    *
    * @param {string} widthOrHeight
    8        'width' or 'height'
@@ -856,7 +894,7 @@ class Component {
    8         New dimension
    *
    * @param  {boolean} [skipListeners]
-   *         Skip resize event trigger
+   *         Skip componentresize event trigger
    *
    * @return {number}
    *         The dimension when getting or 0 if unset
@@ -882,10 +920,10 @@ class Component {
         /**
          * Triggered when a component is resized.
          *
-         * @event Component#resize
+         * @event Component#componentresize
          * @type {EventTarget~Event}
          */
-        this.trigger('resize');
+        this.trigger('componentresize');
       }
 
       return;
@@ -998,6 +1036,20 @@ class Component {
     return this.currentDimension('height');
   }
 
+  /**
+   * Set the focus to this component
+   */
+  focus() {
+    this.el_.focus();
+  }
+
+  /**
+   * Remove the focus from this component
+   */
+  blur() {
+    this.el_.blur();
+  }
+
   /**
    * Emit a 'tap' events when touch event support gets detected. This gets used to
    * support toggling the controls through a tap on the video. They get enabled

src/js/control-bar/audio-track-controls/audio-track-button.js

@@ -25,8 +25,6 @@ class AudioTrackButton extends TrackButton {
     options.tracks = player.audioTracks();
 
     super(player, options);
-
-    this.el_.setAttribute('aria-label', 'Audio Menu');
   }
 
   /**
@@ -39,6 +37,10 @@ class AudioTrackButton extends TrackButton {
     return `vjs-audio-button ${super.buildCSSClass()}`;
   }
 
+  buildWrapperCSSClass() {
+    return `vjs-audio-button ${super.buildWrapperCSSClass()}`;
+  }
+
   /**
    * Create a menu item for each audio track
    *
@@ -49,6 +51,9 @@ class AudioTrackButton extends TrackButton {
    *         An array of menu items
    */
   createItems(items = []) {
+    // if there's only one audio track, there no point in showing it
+    this.hideThreshold_ = 1;
+
     const tracks = this.player_.audioTracks();
 
     for (let i = 0; i < tracks.length; i++) {

src/js/control-bar/control-bar.js

@@ -17,6 +17,7 @@ import './text-track-controls/chapters-button.js';
 import './text-track-controls/descriptions-button.js';
 import './text-track-controls/subtitles-button.js';
 import './text-track-controls/captions-button.js';
+import './text-track-controls/subs-caps-button.js';
 import './audio-track-controls/audio-track-button.js';
 import './playback-rate-menu/playback-rate-menu-button.js';
 import './spacer-controls/custom-control-spacer.js';
@@ -39,7 +40,8 @@ class ControlBar extends Component {
       className: 'vjs-control-bar',
       dir: 'ltr'
     }, {
-      // The control bar is a group, so it can contain menuitems
+      // The control bar is a group, but we don't aria-label it to avoid
+      //  over-announcing by JAWS
       role: 'group'
     });
   }
@@ -65,8 +67,7 @@ ControlBar.prototype.options_ = {
     'playbackRateMenuButton',
     'chaptersButton',
     'descriptionsButton',
-    'subtitlesButton',
-    'captionsButton',
+    'subsCapsButton',
     'audioTrackButton',
     'fullscreenToggle'
   ]

src/js/control-bar/mute-toggle.js

@@ -53,19 +53,47 @@ class MuteToggle extends Button {
    * @listens click
    */
   handleClick(event) {
-    this.player_.muted(this.player_.muted() ? false : true);
+    const vol = this.player_.volume();
+    const lastVolume = this.player_.lastVolume_();
+
+    if (vol === 0) {
+      const volumeToSet = lastVolume < 0.1 ? 0.1 : lastVolume;
+
+      this.player_.volume(volumeToSet);
+      this.player_.muted(false);
+    } else {
+      this.player_.muted(this.player_.muted() ? false : true);
+    }
   }
 
   /**
-   * Update the state of volume.
+   * Update the `MuteToggle` button based on the state of `volume` and `muted`
+   * on the player.
    *
    * @param {EventTarget~Event} [event]
-   *        The {@link Player#loadstart} event if this function was called through an
-   *        event.
+   *        The {@link Player#loadstart} event if this function was called
+   *        through an event.
    *
    * @listens Player#loadstart
+   * @listens Player#volumechange
    */
   update(event) {
+    this.updateIcon_();
+    this.updateControlText_();
+  }
+
+  /**
+   * Update the appearance of the `MuteToggle` icon.
+   *
+   * Possible states (given `level` variable below):
+   * - 0: crossed out
+   * - 1: zero bars of volume
+   * - 2: one bar of volume
+   * - 3: two bars of volume
+   *
+   * @private
+   */
+  updateIcon_() {
     const vol = this.player_.volume();
     let level = 3;
 
@@ -77,15 +105,6 @@ class MuteToggle extends Button {
       level = 2;
     }
 
-    // Don't rewrite the button text if the actual text doesn't change.
-    // This causes unnecessary and confusing information for screen reader users.
-    // This check is needed because this function gets called every time the volume level is changed.
-    const toMute = this.player_.muted() ? 'Unmute' : 'Mute';
-
-    if (this.controlText() !== toMute) {
-      this.controlText(toMute);
-    }
-
     // TODO improve muted icon classes
     for (let i = 0; i < 4; i++) {
       Dom.removeClass(this.el_, `vjs-vol-${i}`);
@@ -93,6 +112,22 @@ class MuteToggle extends Button {
     Dom.addClass(this.el_, `vjs-vol-${level}`);
   }
 
+  /**
+   * If `muted` has changed on the player, update the control text
+   * (`title` attribute on `vjs-mute-control` element and content of
+   * `vjs-control-text` element).
+   *
+   * @private
+   */
+  updateControlText_() {
+    const soundOff = this.player_.muted() || this.player_.volume() === 0;
+    const text = soundOff ? 'Unmute' : 'Mute';
+
+    if (this.controlText() !== text) {
+      this.controlText(text);
+    }
+  }
+
 }
 
 /**

src/js/control-bar/play-toggle.js

@@ -91,7 +91,6 @@ class PlayToggle extends Button {
   /**
    * Add the vjs-ended class to the element so it can change appearance
    *
-   * @method handleEnded
    */
   handleEnded(event) {
     this.removeClass('vjs-playing');

src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js

@@ -62,6 +62,10 @@ class PlaybackRateMenuButton extends MenuButton {
     return `vjs-playback-rate ${super.buildCSSClass()}`;
   }
 
+  buildWrapperCSSClass() {
+    return `vjs-playback-rate ${super.buildWrapperCSSClass()}`;
+  }
+
   /**
    * Create the playback rate menu
    *

src/js/control-bar/playback-rate-menu/playback-rate-menu-item.js

@@ -27,6 +27,8 @@ class PlaybackRateMenuItem extends MenuItem {
     // Modify options for parent MenuItem class's init.
     options.label = label;
     options.selected = rate === 1;
+    options.selectable = true;
+
     super(player, options);
 
     this.label = label;

src/js/control-bar/progress-control/mouse-time-display.js

@@ -2,10 +2,8 @@
  * @file mouse-time-display.js
  */
 import Component from '../../component.js';
-// import * as Dom from '../../utils/dom.js';
 import * as Fn from '../../utils/fn.js';
 import formatTime from '../../utils/format-time.js';
-// import computedStyle from '../../utils/computed-style.js';
 
 import './time-tooltip';
 
@@ -34,7 +32,7 @@ class MouseTimeDisplay extends Component {
   }
 
   /**
-   * Create the the DOM element for this class.
+   * Create the DOM element for this class.
    *
    * @return {Element}
    *         The element that was created.

src/js/control-bar/progress-control/play-progress-bar.js

@@ -2,6 +2,7 @@
  * @file play-progress-bar.js
  */
 import Component from '../../component.js';
+import {IE_VERSION, IS_IOS, IS_ANDROID} from '../../utils/browser.js';
 import formatTime from '../../utils/format-time.js';
 
 import './time-tooltip';
@@ -14,19 +15,6 @@ import './time-tooltip';
  */
 class PlayProgressBar extends Component {
 
-  /**
-   * Creates an instance of this class.
-   *
-   * @param {Player} player
-   *        The {@link Player} that this class should be attached to.
-   *
-   * @param {Object} [options]
-   *        The key/value store of player options.
-   */
-  constructor(player, options) {
-    super(player, options);
-  }
-
   /**
    * Create the the DOM element for this class.
    *
@@ -64,8 +52,11 @@ class PlayProgressBar extends Component {
         this.player_.currentTime();
 
       const content = formatTime(time, this.player_.duration());
+      const timeTooltip = this.getChild('timeTooltip');
 
-      this.getChild('timeTooltip').update(seekBarRect, seekBarPoint, content);
+      if (timeTooltip) {
+        timeTooltip.update(seekBarRect, seekBarPoint, content);
+      }
     });
   }
 }
@@ -77,10 +68,13 @@ class PlayProgressBar extends Component {
  * @private
  */
 PlayProgressBar.prototype.options_ = {
-  children: [
-    'timeTooltip'
-  ]
+  children: []
 };
 
+// Time tooltips should not be added to a player on mobile devices or IE8
+if ((!IE_VERSION || IE_VERSION > 8) && !IS_IOS && !IS_ANDROID) {
+  PlayProgressBar.prototype.options_.children.push('timeTooltip');
+}
+
 Component.registerComponent('PlayProgressBar', PlayProgressBar);
 export default PlayProgressBar;

src/js/control-bar/progress-control/progress-control.js

@@ -2,8 +2,8 @@
  * @file progress-control.js
  */
 import Component from '../../component.js';
-import * as Fn from '../../utils/fn.js';
 import * as Dom from '../../utils/dom.js';
+import {throttle, bind} from '../../utils/fn.js';
 
 import './seek-bar.js';
 
@@ -26,8 +26,11 @@ class ProgressControl extends Component {
    */
   constructor(player, options) {
     super(player, options);
-    this.handleMouseMove = Fn.throttle(Fn.bind(this, this.handleMouseMove), 25);
+    this.handleMouseMove = throttle(bind(this, this.handleMouseMove), 25);
     this.on(this.el_, 'mousemove', this.handleMouseMove);
+
+    this.throttledHandleMouseSeek = throttle(bind(this, this.handleMouseSeek), 25);
+    this.on(['mousedown', 'touchstart'], this.handleMouseDown);
   }
 
   /**
@@ -53,6 +56,7 @@ class ProgressControl extends Component {
    */
   handleMouseMove(event) {
     const seekBar = this.getChild('seekBar');
+    const mouseTimeDisplay = seekBar.getChild('mouseTimeDisplay');
     const seekBarEl = seekBar.el();
     const seekBarRect = Dom.getBoundingClientRect(seekBarEl);
     let seekBarPoint = Dom.getPointerPosition(seekBarEl, event).x;
@@ -66,7 +70,71 @@ class ProgressControl extends Component {
       seekBarPoint = 0;
     }
 
-    seekBar.getChild('mouseTimeDisplay').update(seekBarRect, seekBarPoint);
+    if (mouseTimeDisplay) {
+      mouseTimeDisplay.update(seekBarRect, seekBarPoint);
+    }
+  }
+
+  /**
+   * A throttled version of the {@link ProgressControl#handleMouseSeek} listener.
+   *
+   * @method ProgressControl#throttledHandleMouseSeek
+   * @param {EventTarget~Event} event
+   *        The `mousemove` event that caused this function to run.
+   *
+   * @listen mousemove
+   * @listen touchmove
+   */
+
+  /**
+   * Handle `mousemove` or `touchmove` events on the `ProgressControl`.
+   *
+   * @param {EventTarget~Event} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousemove
+   * @listens touchmove
+   */
+  handleMouseSeek(event) {
+    const seekBar = this.getChild('seekBar');
+
+    seekBar.handleMouseMove(event);
+  }
+
+  /**
+   * Handle `mousedown` or `touchstart` events on the `ProgressControl`.
+   *
+   * @param {EventTarget~Event} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousedown
+   * @listens touchstart
+   */
+  handleMouseDown(event) {
+    const doc = this.el_.ownerDocument;
+
+    this.on(doc, 'mousemove', this.throttledHandleMouseSeek);
+    this.on(doc, 'touchmove', this.throttledHandleMouseSeek);
+    this.on(doc, 'mouseup', this.handleMouseUp);
+    this.on(doc, 'touchend', this.handleMouseUp);
+  }
+
+  /**
+   * Handle `mouseup` or `touchend` events on the `ProgressControl`.
+   *
+   * @param {EventTarget~Event} event
+   *        `mouseup` or `touchend` event that triggered this function.
+   *
+   * @listens touchend
+   * @listens mouseup
+   */
+  handleMouseUp(event) {
+    const doc = this.el_.ownerDocument;
+
+    this.off(doc, 'mousemove', this.throttledHandleMouseSeek);
+    this.off(doc, 'touchmove', this.throttledHandleMouseSeek);
+    this.off(doc, 'mouseup', this.handleMouseUp);
+    this.off(doc, 'touchend', this.handleMouseUp);
   }
 }
 

src/js/control-bar/progress-control/seek-bar.js

@@ -3,6 +3,7 @@
  */
 import Slider from '../../slider/slider.js';
 import Component from '../../component.js';
+import {IE_VERSION, IS_IOS, IS_ANDROID} from '../../utils/browser.js';
 import * as Dom from '../../utils/dom.js';
 import * as Fn from '../../utils/fn.js';
 import formatTime from '../../utils/format-time.js';
@@ -47,7 +48,7 @@ class SeekBar extends Slider {
     return super.createEl('div', {
       className: 'vjs-progress-holder'
     }, {
-      'aria-label': 'progress bar'
+      'aria-label': this.localize('Progress Bar')
     });
   }
 
@@ -73,7 +74,11 @@ class SeekBar extends Slider {
     this.el_.setAttribute('aria-valuenow', (percent * 100).toFixed(2));
 
     // human readable value of progress bar (time complete)
-    this.el_.setAttribute('aria-valuetext', formatTime(time, duration));
+    this.el_.setAttribute('aria-valuetext',
+                          this.localize('progress bar timing: currentTime={1} duration={2}',
+                                        [formatTime(time, duration),
+                                         formatTime(duration, duration)],
+                                        '{1} of {2}'));
 
     // Update the `PlayProgressBar`.
     this.bar.update(Dom.getBoundingClientRect(this.el_), percent);
@@ -166,6 +171,44 @@ class SeekBar extends Slider {
   stepBack() {
     this.player_.currentTime(this.player_.currentTime() - STEP_SECONDS);
   }
+
+  /**
+   * Toggles the playback state of the player
+   * This gets called when enter or space is used on the seekbar
+   *
+   * @param {EventTarget~Event} event
+   *        The `keydown` event that caused this function to be called
+   *
+   */
+  handleAction(event) {
+    if (this.player_.paused()) {
+      this.player_.play();
+    } else {
+      this.player_.pause();
+    }
+  }
+
+  /**
+   * Called when this SeekBar has focus and a key gets pressed down. By
+   * default it will call `this.handleAction` when the key is space or enter.
+   *
+   * @param {EventTarget~Event} event
+   *        The `keydown` event that caused this function to be called.
+   *
+   * @listens keydown
+   */
+  handleKeyPress(event) {
+
+    // Support Space (32) or Enter (13) key operation to fire a click event
+    if (event.which === 32 || event.which === 13) {
+      event.preventDefault();
+      this.handleAction(event);
+    } else if (super.handleKeyPress) {
+
+      // Pass keypress handling up for unsupported keys
+      super.handleKeyPress(event);
+    }
+  }
 }
 
 /**
@@ -177,12 +220,16 @@ class SeekBar extends Slider {
 SeekBar.prototype.options_ = {
   children: [
     'loadProgressBar',
-    'mouseTimeDisplay',
     'playProgressBar'
   ],
   barName: 'playProgressBar'
 };
 
+// MouseTimeDisplay tooltips should not be added to a player on mobile devices or IE8
+if ((!IE_VERSION || IE_VERSION > 8) && !IS_IOS && !IS_ANDROID) {
+  SeekBar.prototype.options_.children.splice(1, 0, 'mouseTimeDisplay');
+}
+
 /**
  * Call the update event for this Slider when this event happens on the player.
  *

src/js/control-bar/text-track-controls/caption-settings-menu-item.js

@@ -33,6 +33,8 @@ class CaptionSettingsMenuItem extends TextTrackMenuItem {
     // CaptionSettingsMenuItem has no concept of 'selected'
     options.selectable = false;
 
+    options.name = 'CaptionSettingsMenuItem';
+
     super(player, options);
     this.addClass('vjs-texttrack-settings');
     this.controlText(', opens ' + options.kind + ' settings dialog');
@@ -50,10 +52,8 @@ class CaptionSettingsMenuItem extends TextTrackMenuItem {
    * @listens click
    */
   handleClick(event) {
-    this.player().getChild('textTrackSettings').show();
-    this.player().getChild('textTrackSettings').el_.focus();
+    this.player().getChild('textTrackSettings').open();
   }
-
 }
 
 Component.registerComponent('CaptionSettingsMenuItem', CaptionSettingsMenuItem);

src/js/control-bar/text-track-controls/captions-button.js

@@ -26,7 +26,6 @@ class CaptionsButton extends TextTrackButton {
    */
   constructor(player, options, ready) {
     super(player, options, ready);
-    this.el_.setAttribute('aria-label', 'Captions Menu');
   }
 
   /**
@@ -39,31 +38,8 @@ class CaptionsButton extends TextTrackButton {
     return `vjs-captions-button ${super.buildCSSClass()}`;
   }
 
-  /**
-   * Update caption menu items
-   *
-   * @param {EventTarget~Event} [event]
-   *        The `addtrack` or `removetrack` event that caused this function to be
-   *        called.
-   *
-   * @listens TextTrackList#addtrack
-   * @listens TextTrackList#removetrack
-   */
-  update(event) {
-    let threshold = 2;
-
-    super.update();
-
-    // if native, then threshold is 1 because no settings button
-    if (this.player().tech_ && this.player().tech_.featuresNativeTextTracks) {
-      threshold = 1;
-    }
-
-    if (this.items && this.items.length > threshold) {
-      this.show();
-    } else {
-      this.hide();
-    }
+  buildWrapperCSSClass() {
+    return `vjs-captions-button ${super.buildWrapperCSSClass()}`;
   }
 
   /**
@@ -77,6 +53,8 @@ class CaptionsButton extends TextTrackButton {
 
     if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks)) {
       items.push(new CaptionSettingsMenuItem(this.player_, {kind: this.kind_}));
+
+      this.hideThreshold_ += 1;
     }
 
     return super.createItems(items);

src/js/control-bar/text-track-controls/chapters-button.js

@@ -29,7 +29,6 @@ class ChaptersButton extends TextTrackButton {
    */
   constructor(player, options, ready) {
     super(player, options, ready);
-    this.el_.setAttribute('aria-label', 'Chapters Menu');
   }
 
   /**
@@ -42,6 +41,10 @@ class ChaptersButton extends TextTrackButton {
     return `vjs-chapters-button ${super.buildCSSClass()}`;
   }
 
+  buildWrapperCSSClass() {
+    return `vjs-chapters-button ${super.buildWrapperCSSClass()}`;
+  }
+
   /**
    * Update the menu based on the current state of its items.
    *

src/js/control-bar/text-track-controls/descriptions-button.js

@@ -26,7 +26,6 @@ class DescriptionsButton extends TextTrackButton {
    */
   constructor(player, options, ready) {
     super(player, options, ready);
-    this.el_.setAttribute('aria-label', 'Descriptions Menu');
 
     const tracks = player.textTracks();
     const changeHandler = Fn.bind(this, this.handleTracksChange);
@@ -77,6 +76,9 @@ class DescriptionsButton extends TextTrackButton {
     return `vjs-descriptions-button ${super.buildCSSClass()}`;
   }
 
+  buildWrapperCSSClass() {
+    return `vjs-descriptions-button ${super.buildWrapperCSSClass()}`;
+  }
 }
 
 /**

src/js/control-bar/text-track-controls/off-text-track-menu-item.js

@@ -26,11 +26,21 @@ class OffTextTrackMenuItem extends TextTrackMenuItem {
     options.track = {
       player,
       kind: options.kind,
-      label: options.kind + ' off',
+      kinds: options.kinds,
       default: false,
       mode: 'disabled'
     };
 
+    if (!options.kinds) {
+      options.kinds = [options.kind];
+    }
+
+    if (options.label) {
+      options.track.label = options.label;
+    } else {
+      options.track.label = options.kinds.join(' and ') + ' off';
+    }
+
     // MenuItem is selectable
     options.selectable = true;
 
@@ -51,7 +61,7 @@ class OffTextTrackMenuItem extends TextTrackMenuItem {
     for (let i = 0, l = tracks.length; i < l; i++) {
       const track = tracks[i];
 
-      if (track.kind === this.track.kind && track.mode === 'showing') {
+      if ((this.options_.kinds.indexOf(track.kind) > -1) && track.mode === 'showing') {
         selected = false;
         break;
       }

src/js/control-bar/text-track-controls/subs-caps-button.js

@@ -0,0 +1,81 @@
+/**
+ * @file sub-caps-button.js
+ */
+import TextTrackButton from './text-track-button.js';
+import Component from '../../component.js';
+import CaptionSettingsMenuItem from './caption-settings-menu-item.js';
+import SubsCapsMenuItem from './subs-caps-menu-item.js';
+import toTitleCase from '../../utils/to-title-case.js';
+/**
+ * The button component for toggling and selecting captions and/or subtitles
+ *
+ * @extends TextTrackButton
+ */
+class SubsCapsButton extends TextTrackButton {
+
+  constructor(player, options = {}) {
+    super(player, options);
+
+    // Although North America uses "captions" in most cases for
+    // "captions and subtitles" other locales use "subtitles"
+    this.label_ = 'subtitles';
+    if (['en', 'en-us', 'en-ca', 'fr-ca'].indexOf(this.player_.language_) > -1) {
+      this.label_ = 'captions';
+    }
+    this.menuButton_.controlText(toTitleCase(this.label_));
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-subs-caps-button ${super.buildCSSClass()}`;
+  }
+
+  buildWrapperCSSClass() {
+    return `vjs-subs-caps-button ${super.buildWrapperCSSClass()}`;
+  }
+
+  /**
+   * Create caption/subtitles menu items
+   *
+   * @return {CaptionSettingsMenuItem[]}
+   *         The array of current menu items.
+   */
+  createItems() {
+    let items = [];
+
+    if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks)) {
+      items.push(new CaptionSettingsMenuItem(this.player_, {kind: this.label_}));
+
+      this.hideThreshold_ += 1;
+    }
+
+    items = super.createItems(items, SubsCapsMenuItem);
+    return items;
+  }
+
+}
+
+/**
+ * `kind`s of TextTrack to look for to associate it with this menu.
+ *
+ * @type {array}
+ * @private
+ */
+SubsCapsButton.prototype.kinds_ = ['captions', 'subtitles'];
+
+/**
+ * The text that should display over the `SubsCapsButton`s controls.
+ *
+ *
+ * @type {string}
+ * @private
+ */
+SubsCapsButton.prototype.controlText_ = 'Subtitles';
+
+Component.registerComponent('SubsCapsButton', SubsCapsButton);
+export default SubsCapsButton;

src/js/control-bar/text-track-controls/subs-caps-menu-item.js

@@ -0,0 +1,37 @@
+/**
+ * @file subs-caps-menu-item.js
+ */
+import TextTrackMenuItem from './text-track-menu-item.js';
+import Component from '../../component.js';
+import {assign} from '../../utils/obj';
+
+/**
+ * SubsCapsMenuItem has an [cc] icon to distinguish captions from subtitles
+ * in the SubsCapsMenu.
+ *
+ * @extends TextTrackMenuItem
+ */
+class SubsCapsMenuItem extends TextTrackMenuItem {
+
+  createEl(type, props, attrs) {
+    let innerHTML = `<span class="vjs-menu-item-text">${this.localize(this.options_.label)}`;
+
+    if (this.options_.track.kind === 'captions') {
+      innerHTML += `
+        <span aria-hidden="true" class="vjs-icon-placeholder"></span>
+        <span class="vjs-control-text"> ${this.localize('Captions')}</span>
+      `;
+    }
+
+    innerHTML += '</span>';
+
+    const el = super.createEl(type, assign({
+      innerHTML
+    }, props), attrs);
+
+    return el;
+  }
+}
+
+Component.registerComponent('SubsCapsMenuItem', SubsCapsMenuItem);
+export default SubsCapsMenuItem;

src/js/control-bar/text-track-controls/subtitles-button.js

@@ -25,7 +25,6 @@ class SubtitlesButton extends TextTrackButton {
    */
   constructor(player, options, ready) {
     super(player, options, ready);
-    this.el_.setAttribute('aria-label', 'Subtitles Menu');
   }
 
   /**
@@ -38,6 +37,9 @@ class SubtitlesButton extends TextTrackButton {
     return `vjs-subtitles-button ${super.buildCSSClass()}`;
   }
 
+  buildWrapperCSSClass() {
+    return `vjs-subtitles-button ${super.buildWrapperCSSClass()}`;
+  }
 }
 
 /**

src/js/control-bar/text-track-controls/text-track-button.js

@@ -26,6 +26,10 @@ class TextTrackButton extends TrackButton {
     options.tracks = player.textTracks();
 
     super(player, options);
+
+    if (!Array.isArray(this.kinds_)) {
+      this.kinds_ = [this.kind_];
+    }
   }
 
   /**
@@ -37,22 +41,39 @@ class TextTrackButton extends TrackButton {
    * @return {TextTrackMenuItem[]}
    *         Array of menu items that were created
    */
-  createItems(items = []) {
+  createItems(items = [], TrackMenuItem = TextTrackMenuItem) {
+
+    // Label is an overide for the [track] off label
+    // USed to localise captions/subtitles
+    let label;
+
+    if (this.label_) {
+      label = `${this.label_} off`;
+    }
     // Add an OFF menu item to turn all tracks off
-    items.push(new OffTextTrackMenuItem(this.player_, {kind: this.kind_}));
+    items.push(new OffTextTrackMenuItem(this.player_, {
+      kinds: this.kinds_,
+      kind: this.kind_,
+      label
+    }));
+
+    this.hideThreshold_ += 1;
 
     const tracks = this.player_.textTracks();
 
     for (let i = 0; i < tracks.length; i++) {
       const track = tracks[i];
 
-      // only add tracks that are of the appropriate kind and have a label
-      if (track.kind === this.kind_) {
-        items.push(new TextTrackMenuItem(this.player_, {
+      // only add tracks that are of an appropriate kind and have a label
+      if (this.kinds_.indexOf(track.kind) > -1) {
+        const item = new TrackMenuItem(this.player_, {
           track,
           // MenuItem is selectable
           selectable: true
-        }));
+        });
+
+        item.addClass(`vjs-${track.kind}-menu-item`);
+        items.push(item);
       }
     }
 

src/js/control-bar/text-track-controls/text-track-menu-item.js

@@ -36,6 +36,7 @@ class TextTrackMenuItem extends MenuItem {
     this.track = track;
     const changeHandler = Fn.bind(this, this.handleTracksChange);
 
+    player.on(['loadstart', 'texttrackchange'], changeHandler);
     tracks.addEventListener('change', changeHandler);
     this.on('dispose', function() {
       tracks.removeEventListener('change', changeHandler);
@@ -83,8 +84,13 @@ class TextTrackMenuItem extends MenuItem {
    */
   handleClick(event) {
     const kind = this.track.kind;
+    let kinds = this.track.kinds;
     const tracks = this.player_.textTracks();
 
+    if (!kinds) {
+      kinds = [kind];
+    }
+
     super.handleClick(event);
 
     if (!tracks) {
@@ -94,11 +100,7 @@ class TextTrackMenuItem extends MenuItem {
     for (let i = 0; i < tracks.length; i++) {
       const track = tracks[i];
 
-      if (track.kind !== kind) {
-        continue;
-      }
-
-      if (track === this.track) {
+      if (track === this.track && (kinds.indexOf(track.kind) > -1)) {
         track.mode = 'showing';
       } else {
         track.mode = 'disabled';

src/js/control-bar/track-button.js

@@ -38,6 +38,7 @@ class TrackButton extends MenuButton {
 
     tracks.addEventListener('removetrack', updateHandler);
     tracks.addEventListener('addtrack', updateHandler);
+    this.player_.on('ready', updateHandler);
 
     this.player_.on('dispose', function() {
       tracks.removeEventListener('removetrack', updateHandler);

src/js/control-bar/volume-control/volume-bar.js

@@ -25,9 +25,9 @@ class VolumeBar extends Slider {
    */
   constructor(player, options) {
     super(player, options);
-
+    this.on('slideractive', this.updateLastVolume_);
     this.on(player, 'volumechange', this.updateARIAAttributes);
-    player.ready(() => this.updateARIAAttributes);
+    player.ready(() => this.updateARIAAttributes());
   }
 
   /**
@@ -40,7 +40,7 @@ class VolumeBar extends Slider {
     return super.createEl('div', {
       className: 'vjs-volume-bar vjs-slider-bar'
     }, {
-      'aria-label': 'volume level',
+      'aria-label': this.localize('Volume Level'),
       'aria-live': 'polite'
     });
   }
@@ -105,11 +105,37 @@ class VolumeBar extends Slider {
    * @listens Player#volumechange
    */
   updateARIAAttributes(event) {
-    // Current value of volume bar as a percentage
-    const volume = (this.player_.volume() * 100).toFixed(2);
+    const ariaValue = this.player_.muted() ? 0 : this.volumeAsPercentage_();
 
-    this.el_.setAttribute('aria-valuenow', volume);
-    this.el_.setAttribute('aria-valuetext', volume + '%');
+    this.el_.setAttribute('aria-valuenow', ariaValue);
+    this.el_.setAttribute('aria-valuetext', ariaValue + '%');
+  }
+
+  /**
+   * Returns the current value of the player volume as a percentage
+   *
+   * @private
+   */
+  volumeAsPercentage_() {
+    return Math.round(this.player_.volume() * 100);
+  }
+
+  /**
+   * When user starts dragging the VolumeBar, store the volume and listen for
+   * the end of the drag. When the drag ends, if the volume was set to zero,
+   * set lastVolume to the stored volume.
+   *
+   * @listens slideractive
+   * @private
+   */
+  updateLastVolume_() {
+    const volumeBeforeDrag = this.player_.volume();
+
+    this.one('sliderinactive', () => {
+      if (this.player_.volume() === 0) {
+        this.player_.lastVolume_(volumeBeforeDrag);
+      }
+    });
   }
 
 }

src/js/control-bar/volume-control/volume-control.js

@@ -4,6 +4,7 @@
 import Component from '../../component.js';
 import checkVolumeSupport from './check-volume-support';
 import {isPlain} from '../../utils/obj';
+import { throttle, bind } from '../../utils/fn.js';
 
 // Required children
 import './volume-bar.js';
@@ -39,6 +40,11 @@ class VolumeControl extends Component {
     // hide this control if volume support is missing
     checkVolumeSupport(this, player);
 
+    this.throttledHandleMouseMove = throttle(bind(this, this.handleMouseMove), 25);
+
+    this.on('mousedown', this.handleMouseDown);
+    this.on('touchstart', this.handleMouseDown);
+
     // while the slider is active (the mouse has been pressed down and
     // is dragging) or in focus we do not want to hide the VolumeBar
     this.on(this.volumeBar, ['focus', 'slideractive'], () => {
@@ -72,6 +78,54 @@ class VolumeControl extends Component {
     });
   }
 
+  /**
+   * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+   *
+   * @param {EventTarget~Event} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousedown
+   * @listens touchstart
+   */
+  handleMouseDown(event) {
+    const doc = this.el_.ownerDocument;
+
+    this.on(doc, 'mousemove', this.throttledHandleMouseMove);
+    this.on(doc, 'touchmove', this.throttledHandleMouseMove);
+    this.on(doc, 'mouseup', this.handleMouseUp);
+    this.on(doc, 'touchend', this.handleMouseUp);
+  }
+
+  /**
+   * Handle `mouseup` or `touchend` events on the `VolumeControl`.
+   *
+   * @param {EventTarget~Event} event
+   *        `mouseup` or `touchend` event that triggered this function.
+   *
+   * @listens touchend
+   * @listens mouseup
+   */
+  handleMouseUp(event) {
+    const doc = this.el_.ownerDocument;
+
+    this.off(doc, 'mousemove', this.throttledHandleMouseMove);
+    this.off(doc, 'touchmove', this.throttledHandleMouseMove);
+    this.off(doc, 'mouseup', this.handleMouseUp);
+    this.off(doc, 'touchend', this.handleMouseUp);
+  }
+
+  /**
+   * Handle `mousedown` or `touchstart` events on the `VolumeControl`.
+   *
+   * @param {EventTarget~Event} event
+   *        `mousedown` or `touchstart` event that triggered this function
+   *
+   * @listens mousedown
+   * @listens touchstart
+   */
+  handleMouseMove(event) {
+    this.volumeBar.handleMouseMove(event);
+  }
 }
 
 /**

src/js/error-display.js

@@ -58,6 +58,7 @@ class ErrorDisplay extends ModalDialog {
  * @private
  */
 ErrorDisplay.prototype.options_ = mergeOptions(ModalDialog.prototype.options_, {
+  pauseOnOpen: false,
   fillAlways: true,
   temporary: false,
   uncloseable: true

src/js/extend.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @file extend.js
  * @module extend
  */
@@ -40,6 +40,9 @@ const _inherits = function(subClass, superClass) {
  * Function for subclassing using the same inheritance that
  * videojs uses internally
  *
+ * @static
+ * @const
+ *
  * @param {Object} superClass
  *        The class to inherit from
  *

src/js/menu/menu-button.js

@@ -1,19 +1,21 @@
 /**
  * @file menu-button.js
  */
-import ClickableComponent from '../clickable-component.js';
+import Button from '../button.js';
 import Component from '../component.js';
 import Menu from './menu.js';
 import * as Dom from '../utils/dom.js';
 import * as Fn from '../utils/fn.js';
+import * as Events from '../utils/events.js';
 import toTitleCase from '../utils/to-title-case.js';
+import document from 'global/document';
 
 /**
  * A `MenuButton` class for any popup {@link Menu}.
  *
- * @extends ClickableComponent
+ * @extends Component
  */
-class MenuButton extends ClickableComponent {
+class MenuButton extends Component {
 
   /**
    * Creates an instance of this class.
@@ -27,12 +29,28 @@ class MenuButton extends ClickableComponent {
   constructor(player, options = {}) {
     super(player, options);
 
+    this.menuButton_ = new Button(player, options);
+
+    this.menuButton_.controlText(this.controlText_);
+    this.menuButton_.el_.setAttribute('aria-haspopup', 'true');
+
+    // Add buildCSSClass values to the button, not the wrapper
+    const buttonClass = Button.prototype.buildCSSClass();
+
+    this.menuButton_.el_.className = this.buildCSSClass() + ' ' + buttonClass;
+    this.menuButton_.removeClass('vjs-control');
+
+    this.addChild(this.menuButton_);
+
     this.update();
 
     this.enabled_ = true;
 
-    this.el_.setAttribute('aria-haspopup', 'true');
-    this.el_.setAttribute('role', 'menuitem');
+    this.on(this.menuButton_, 'tap', this.handleClick);
+    this.on(this.menuButton_, 'click', this.handleClick);
+    this.on(this.menuButton_, 'focus', this.handleFocus);
+    this.on(this.menuButton_, 'blur', this.handleBlur);
+
     this.on('keydown', this.handleSubmenuKeyPress);
   }
 
@@ -56,11 +74,11 @@ class MenuButton extends ClickableComponent {
      * @private
      */
     this.buttonPressed_ = false;
-    this.el_.setAttribute('aria-expanded', 'false');
+    this.menuButton_.el_.setAttribute('aria-expanded', 'false');
 
-    if (this.items && this.items.length === 0) {
+    if (this.items && this.items.length <= this.hideThreshold_) {
       this.hide();
-    } else if (this.items && this.items.length > 1) {
+    } else {
       this.show();
     }
   }
@@ -72,7 +90,17 @@ class MenuButton extends ClickableComponent {
    *         The constructed menu
    */
   createMenu() {
-    const menu = new Menu(this.player_);
+    const menu = new Menu(this.player_, { menuButton: this });
+
+    /**
+     * Hide the menu if the number of items is less than or equal to this threshold. This defaults
+     * to 0 and whenever we add items which can be hidden to the menu we'll increment it. We list
+     * it here because every time we run `createMenu` we need to reset the value.
+     *
+     * @protected
+     * @type {Number}
+     */
+    this.hideThreshold_ = 0;
 
     // Add a title list item to the top
     if (this.options_.title) {
@@ -82,6 +110,8 @@ class MenuButton extends ClickableComponent {
         tabIndex: -1
       });
 
+      this.hideThreshold_ += 1;
+
       menu.children_.unshift(title);
       Dom.prependTo(title, menu.contentEl());
     }
@@ -113,10 +143,33 @@ class MenuButton extends ClickableComponent {
    */
   createEl() {
     return super.createEl('div', {
-      className: this.buildCSSClass()
+      className: this.buildWrapperCSSClass()
+    }, {
     });
   }
 
+  /**
+   * Allow sub components to stack CSS class names for the wrapper element
+   *
+   * @return {string}
+   *         The constructed wrapper DOM `className`
+   */
+  buildWrapperCSSClass() {
+    let menuButtonClass = 'vjs-menu-button';
+
+    // If the inline option is passed, we want to use different styles altogether.
+    if (this.options_.inline === true) {
+      menuButtonClass += '-inline';
+    } else {
+      menuButtonClass += '-popup';
+    }
+
+    // TODO: Fix the CSS so that this isn't necessary
+    const buttonClass = Button.prototype.buildCSSClass();
+
+    return `vjs-menu-button ${menuButtonClass} ${buttonClass} ${super.buildCSSClass()}`;
+  }
+
   /**
    * Builds the default DOM `className`.
    *
@@ -136,6 +189,24 @@ class MenuButton extends ClickableComponent {
     return `vjs-menu-button ${menuButtonClass} ${super.buildCSSClass()}`;
   }
 
+  /**
+   * Get or set the localized control text that will be used for accessibility.
+   *
+   * > NOTE: This will come from the internal `menuButton_` element.
+   *
+   * @param {string} [text]
+   *        Control text for element.
+   *
+   * @param {Element} [el=this.menuButton_.el()]
+   *        Element to set the title on.
+   *
+   * @return {string}
+   *         - The control text when getting
+   */
+  controlText(text, el = this.menuButton_.el()) {
+    return this.menuButton_.controlText(text, el);
+  }
+
   /**
    * Handle a click on a `MenuButton`.
    * See {@link ClickableComponent#handleClick} for instances where this is called.
@@ -163,6 +234,47 @@ class MenuButton extends ClickableComponent {
     }
   }
 
+  /**
+   * Set the focus to the actual button, not to this element
+   */
+  focus() {
+    this.menuButton_.focus();
+  }
+
+  /**
+   * Remove the focus from the actual button, not this element
+   */
+  blur() {
+    this.menuButton_.blur();
+  }
+
+  /**
+   * This gets called when a `MenuButton` gains focus via a `focus` event.
+   * Turns on listening for `keydown` events. When they happen it
+   * calls `this.handleKeyPress`.
+   *
+   * @param {EventTarget~Event} event
+   *        The `focus` event that caused this function to be called.
+   *
+   * @listens focus
+   */
+  handleFocus() {
+    Events.on(document, 'keydown', Fn.bind(this, this.handleKeyPress));
+  }
+
+  /**
+   * Called when a `MenuButton` loses focus. Turns off the listener for
+   * `keydown` events. Which Stops `this.handleKeyPress` from getting called.
+   *
+   * @param {EventTarget~Event} event
+   *        The `blur` event that caused this function to be called.
+   *
+   * @listens blur
+   */
+  handleBlur() {
+    Events.off(document, 'keydown', Fn.bind(this, this.handleKeyPress));
+  }
+
   /**
    * Handle tab, escape, down arrow, and up arrow keys for `MenuButton`. See
    * {@link ClickableComponent#handleKeyPress} for instances where this is called.
@@ -182,6 +294,8 @@ class MenuButton extends ClickableComponent {
       // Don't preventDefault for Tab key - we still want to lose focus
       if (event.which !== 9) {
         event.preventDefault();
+        // Set focus back to the menu button's button
+        this.menuButton_.el_.focus();
       }
     // Up (38) key or Down (40) key press the 'button'
     } else if (event.which === 38 || event.which === 40) {
@@ -189,8 +303,6 @@ class MenuButton extends ClickableComponent {
         this.pressButton();
         event.preventDefault();
       }
-    } else {
-      super.handleKeyPress(event);
     }
   }
 
@@ -213,6 +325,8 @@ class MenuButton extends ClickableComponent {
       // Don't preventDefault for Tab key - we still want to lose focus
       if (event.which !== 9) {
         event.preventDefault();
+        // Set focus back to the menu button's button
+        this.menuButton_.el_.focus();
       }
     }
   }
@@ -224,7 +338,7 @@ class MenuButton extends ClickableComponent {
     if (this.enabled_) {
       this.buttonPressed_ = true;
       this.menu.lockShowing();
-      this.el_.setAttribute('aria-expanded', 'true');
+      this.menuButton_.el_.setAttribute('aria-expanded', 'true');
       // set the focus into the submenu
       this.menu.focus();
     }
@@ -237,9 +351,7 @@ class MenuButton extends ClickableComponent {
     if (this.enabled_) {
       this.buttonPressed_ = false;
       this.menu.unlockShowing();
-      this.el_.setAttribute('aria-expanded', 'false');
-      // Set focus back to this menu button
-      this.el_.focus();
+      this.menuButton_.el_.setAttribute('aria-expanded', 'false');
     }
   }
 
@@ -247,14 +359,12 @@ class MenuButton extends ClickableComponent {
    * Disable the `MenuButton`. Don't allow it to be clicked.
    */
   disable() {
-    // Unpress, but don't force focus on this button
-    this.buttonPressed_ = false;
-    this.menu.unlockShowing();
-    this.el_.setAttribute('aria-expanded', 'false');
+    this.unpressButton();
 
     this.enabled_ = false;
+    this.addClass('vjs-disabled');
 
-    super.disable();
+    this.menuButton_.disable();
   }
 
   /**
@@ -262,7 +372,9 @@ class MenuButton extends ClickableComponent {
    */
   enable() {
     this.enabled_ = true;
-    super.enable();
+    this.removeClass('vjs-disabled');
+
+    this.menuButton_.enable();
   }
 }
 

src/js/menu/menu-item.js

@@ -54,9 +54,12 @@ class MenuItem extends ClickableComponent {
    *         The element that gets created.
    */
   createEl(type, props, attrs) {
+    // The control is textual, not just an icon
+    this.nonIconControl = true;
+
     return super.createEl('li', assign({
       className: 'vjs-menu-item',
-      innerHTML: this.localize(this.options_.label),
+      innerHTML: `<span class="vjs-menu-item-text">${this.localize(this.options_.label)}</span>`,
       tabIndex: -1
     }, props), attrs);
   }

src/js/menu/menu.js

@@ -27,6 +27,10 @@ class Menu extends Component {
   constructor(player, options) {
     super(player, options);
 
+    if (options) {
+      this.menuButton_ = options.menuButton;
+    }
+
     this.focusedChild_ = -1;
 
     this.on('keydown', this.handleKeyPress);
@@ -42,8 +46,16 @@ class Menu extends Component {
   addItem(component) {
     this.addChild(component);
     component.on('click', Fn.bind(this, function(event) {
-      this.unlockShowing();
-      // TODO: Need to set keyboard focus back to the menuButton
+      // Unpress the associated MenuButton, and move focus back to it
+      if (this.menuButton_) {
+        this.menuButton_.unpressButton();
+
+        // don't focus menu button if item is a caption settings item
+        // because focus will move elsewhere and it logs an error on IE8
+        if (component.name() !== 'CaptionSettingsMenuItem') {
+          this.menuButton_.focus();
+        }
+      }
     }));
   }
 
@@ -67,7 +79,6 @@ class Menu extends Component {
       className: 'vjs-menu'
     });
 
-    el.setAttribute('role', 'presentation');
     el.appendChild(this.contentEl_);
 
     // Prevent clicks from bubbling up. Needed for Menu Buttons,

src/js/modal-dialog.js

@@ -4,6 +4,8 @@
 import * as Dom from './utils/dom';
 import * as Fn from './utils/fn';
 import Component from './component';
+import window from 'global/window';
+import document from 'global/document';
 
 const MODAL_CLASS_NAME = 'vjs-modal-dialog';
 const ESC = 27;
@@ -68,7 +70,7 @@ class ModalDialog extends Component {
     });
 
     this.descEl_ = Dom.createEl('p', {
-      className: `${MODAL_CLASS_NAME}-description vjs-offscreen`,
+      className: `${MODAL_CLASS_NAME}-description vjs-control-text`,
       id: this.el().getAttribute('aria-describedby')
     });
 
@@ -127,7 +129,7 @@ class ModalDialog extends Component {
    *         the localized or raw label of this modal.
    */
   label() {
-    return this.options_.label || this.localize('Modal Window');
+    return this.localize(this.options_.label || 'Modal Window');
   }
 
   /**
@@ -177,7 +179,7 @@ class ModalDialog extends Component {
       // playing state.
       this.wasPlaying_ = !player.paused();
 
-      if (this.wasPlaying_) {
+      if (this.options_.pauseOnOpen && this.wasPlaying_) {
         player.pause();
       }
 
@@ -187,6 +189,7 @@ class ModalDialog extends Component {
 
       player.controls(false);
       this.show();
+      this.conditionalFocus_();
       this.el().setAttribute('aria-hidden', 'false');
 
       /**
@@ -238,7 +241,7 @@ class ModalDialog extends Component {
     this.trigger('beforemodalclose');
     this.opened_ = false;
 
-    if (this.wasPlaying_) {
+    if (this.wasPlaying_ && this.options_.pauseOnOpen) {
       player.play();
     }
 
@@ -257,6 +260,7 @@ class ModalDialog extends Component {
       * @type {EventTarget~Event}
       */
     this.trigger('modalclose');
+    this.conditionalBlur_();
 
     if (this.options_.temporary) {
       this.dispose();
@@ -351,6 +355,13 @@ class ModalDialog extends Component {
     } else {
       parentEl.appendChild(contentEl);
     }
+
+    // make sure that the close button is last in the dialog DOM
+    const closeButton = this.getChild('closeButton');
+
+    if (closeButton) {
+      parentEl.appendChild(closeButton.el_);
+    }
   }
 
   /**
@@ -399,6 +410,98 @@ class ModalDialog extends Component {
     }
     return this.content_;
   }
+
+  /**
+   * conditionally focus the modal dialog if focus was previously on the player.
+   *
+   * @private
+   */
+  conditionalFocus_() {
+    const activeEl = document.activeElement;
+    const playerEl = this.player_.el_;
+
+    this.previouslyActiveEl_ = null;
+
+    if (playerEl.contains(activeEl) || playerEl === activeEl) {
+      this.previouslyActiveEl_ = activeEl;
+
+      this.focus();
+
+      this.on(document, 'keydown', this.handleKeyDown);
+    }
+  }
+
+  /**
+   * conditionally blur the element and refocus the last focused element
+   *
+   * @private
+   */
+  conditionalBlur_() {
+    if (this.previouslyActiveEl_) {
+      this.previouslyActiveEl_.focus();
+      this.previouslyActiveEl_ = null;
+    }
+
+    this.off(document, 'keydown', this.handleKeyDown);
+  }
+
+  /**
+   * Keydown handler. Attached when modal is focused.
+   *
+   * @listens keydown
+   */
+  handleKeyDown(event) {
+    // exit early if it isn't a tab key
+    if (event.which !== 9) {
+      return;
+    }
+
+    const focusableEls = this.focusableEls_();
+    const activeEl = this.el_.querySelector(':focus');
+    let focusIndex;
+
+    for (let i = 0; i < focusableEls.length; i++) {
+      if (activeEl === focusableEls[i]) {
+        focusIndex = i;
+        break;
+      }
+    }
+
+    if (document.activeElement === this.el_) {
+      focusIndex = 0;
+    }
+
+    if (event.shiftKey && focusIndex === 0) {
+      focusableEls[focusableEls.length - 1].focus();
+      event.preventDefault();
+    } else if (!event.shiftKey && focusIndex === focusableEls.length - 1) {
+      focusableEls[0].focus();
+      event.preventDefault();
+    }
+  }
+
+  /**
+   * get all focusable elements
+   *
+   * @private
+   */
+  focusableEls_() {
+    const allChildren = this.el_.querySelectorAll('*');
+
+    return Array.prototype.filter.call(allChildren, (child) => {
+      return ((child instanceof window.HTMLAnchorElement ||
+               child instanceof window.HTMLAreaElement) && child.hasAttribute('href')) ||
+             ((child instanceof window.HTMLInputElement ||
+               child instanceof window.HTMLSelectElement ||
+               child instanceof window.HTMLTextAreaElement ||
+               child instanceof window.HTMLButtonElement) && !child.hasAttribute('disabled')) ||
+             (child instanceof window.HTMLIFrameElement ||
+               child instanceof window.HTMLObjectElement ||
+               child instanceof window.HTMLEmbedElement) ||
+             (child.hasAttribute('tabindex') && child.getAttribute('tabindex') !== -1) ||
+             (child.hasAttribute('contenteditable'));
+    });
+  }
 }
 
 /**
@@ -408,6 +511,7 @@ class ModalDialog extends Component {
  * @private
  */
 ModalDialog.prototype.options_ = {
+  pauseOnOpen: true,
   temporary: true
 };
 

src/js/player.js

@@ -14,7 +14,7 @@ import * as Fn from './utils/fn.js';
 import * as Guid from './utils/guid.js';
 import * as browser from './utils/browser.js';
 import log from './utils/log.js';
-import toTitleCase from './utils/to-title-case.js';
+import toTitleCase, { titleCaseEquals } from './utils/to-title-case.js';
 import { createTimeRange } from './utils/time-ranges.js';
 import { bufferedPercent } from './utils/buffer.js';
 import * as stylesheet from './utils/stylesheet.js';
@@ -28,6 +28,7 @@ import ModalDialog from './modal-dialog';
 import Tech from './tech/tech.js';
 import * as middleware from './tech/middleware.js';
 import {ALL as TRACK_TYPES} from './tracks/track-types';
+import filterSource from './utils/filter-source';
 
 // The following imports are used only to ensure that the corresponding modules
 // are always included in the video.js package. Importing the modules will
@@ -191,6 +192,22 @@ const TECH_EVENTS_RETRIGGER = [
    */
   'ratechange',
 
+  /**
+   * Fires when the video's intrinsic dimensions change
+   *
+   * @event Player#resize
+   * @type {event}
+   */
+  /**
+   * Retrigger the `resize` event that was triggered by the {@link Tech}.
+   *
+   * @private
+   * @method Player#handleTechResize_
+   * @fires Player#resize
+   * @listens Tech#resize
+   */
+  'resize',
+
   /**
    * Fires when the volume has been changed
    *
@@ -294,6 +311,9 @@ class Player extends Component {
     // Run base component initializing with new options
     super(null, options, ready);
 
+    // Turn off API access because we're loading a new tech that might load asynchronously
+    this.isReady_ = false;
+
     // if the global option object was accidentally blown away by
     // someone, bail early with an informative error
     if (!this.options_ ||
@@ -335,6 +355,9 @@ class Player extends Component {
     // Set controls
     this.controls_ = !!options.controls;
 
+    // Set default values for lastVolume
+    this.cache_.lastVolume = 1;
+
     // Original tag settings stored in options
     // now remove immediately so native controls don't flash.
     // May be turned back on by HTML5 tech if nativeControlsForTouch is true
@@ -392,9 +415,9 @@ class Player extends Component {
     // Set ARIA label and region role depending on player type
     this.el_.setAttribute('role', 'region');
     if (this.isAudio()) {
-      this.el_.setAttribute('aria-label', 'audio player');
+      this.el_.setAttribute('aria-label', this.localize('Audio Player'));
     } else {
-      this.el_.setAttribute('aria-label', 'video player');
+      this.el_.setAttribute('aria-label', this.localize('Video Player'));
     }
 
     if (this.isAudio()) {
@@ -489,6 +512,9 @@ class Player extends Component {
       el = this.el_ = super.createEl('div');
     }
 
+    // set tabindex to -1 so we could focus on the player element
+    tag.setAttribute('tabindex', '-1');
+
     // Remove width/height attrs from tag so CSS can make it 100% width/height
     tag.removeAttribute('width');
     tag.removeAttribute('height');
@@ -563,6 +589,10 @@ class Player extends Component {
     Dom.prependTo(tag, el);
     this.children_.unshift(tag);
 
+    // Set lang attr on player to ensure CSS :lang() in consistent with player
+    // if it's been set to something different to the doc
+    this.el_.setAttribute('lang', this.language_);
+
     this.el_ = el;
 
     return el;
@@ -803,14 +833,17 @@ class Player extends Component {
       this.unloadTech_();
     }
 
+    const titleTechName = toTitleCase(techName);
+    const camelTechName = techName.charAt(0).toLowerCase() + techName.slice(1);
+
     // get rid of the HTML5 video tag as soon as we are using another tech
-    if (techName !== 'Html5' && this.tag) {
+    if (titleTechName !== 'Html5' && this.tag) {
       Tech.getTech('Html5').disposeMediaElement(this.tag);
       this.tag.player = null;
       this.tag = null;
     }
 
-    this.techName_ = techName;
+    this.techName_ = titleTechName;
 
     // Turn off API access because we're loading a new tech that might load asynchronously
     this.isReady_ = false;
@@ -820,7 +853,7 @@ class Player extends Component {
       source,
       'nativeControlsForTouch': this.options_.nativeControlsForTouch,
       'playerId': this.id(),
-      'techId': `${this.id()}_${techName}_api`,
+      'techId': `${this.id()}_${titleTechName}_api`,
       'autoplay': this.options_.autoplay,
       'preload': this.options_.preload,
       'loop': this.options_.loop,
@@ -837,6 +870,8 @@ class Player extends Component {
       techOptions[props.getterName] = this[props.privateName];
     });
 
+    assign(techOptions, this.options_[titleTechName]);
+    assign(techOptions, this.options_[camelTechName]);
     assign(techOptions, this.options_[techName.toLowerCase()]);
 
     if (this.tag) {
@@ -848,14 +883,13 @@ class Player extends Component {
     }
 
     // Initialize tech instance
-    let TechComponent = Tech.getTech(techName);
+    const TechClass = Tech.getTech(techName);
 
-    // Support old behavior of techs being registered as components.
-    // Remove once that deprecated behavior is removed.
-    if (!TechComponent) {
-      TechComponent = Component.getComponent(techName);
+    if (!TechClass) {
+      throw new Error(`No Tech named '${titleTechName}' exists! '${titleTechName}' should be registered using videojs.registerTech()'`);
     }
-    this.tech_ = new TechComponent(techOptions);
+
+    this.tech_ = new TechClass(techOptions);
 
     // player.triggerReady is always async, so don't need this to be async
     this.tech_.ready(Fn.bind(this, this.handleTechReady_), true);
@@ -892,7 +926,7 @@ class Player extends Component {
 
     // Add the tech element in the DOM if it was not already there
     // Make sure to not insert the original video element if using Html5
-    if (this.tech_.el().parentNode !== this.el() && (techName !== 'Html5' || !this.tag)) {
+    if (this.tech_.el().parentNode !== this.el() && (titleTechName !== 'Html5' || !this.tag)) {
       Dom.prependTo(this.tech_.el(), this.el());
     }
 
@@ -1578,11 +1612,16 @@ class Player extends Component {
   play() {
     if (this.changingSrc_) {
       this.ready(function() {
-        this.techCall_('play');
+        const retval = this.techGet_('play');
+
+        // silence errors (unhandled promise from play)
+        if (retval !== undefined && typeof retval.then === 'function') {
+          retval.then(null, (e) => {});
+        }
       });
 
     // Only calls the tech's play if we already have a src loaded
-    } else if (this.src() || this.currentSrc()) {
+    } else if (this.isReady_ && (this.src() || this.currentSrc())) {
       return this.techGet_('play');
     } else {
       this.ready(function() {
@@ -1812,6 +1851,10 @@ class Player extends Component {
       this.cache_.volume = vol;
       this.techCall_('setVolume', vol);
 
+      if (vol > 0) {
+        this.lastVolume_(vol);
+      }
+
       return;
     }
 
@@ -1872,6 +1915,28 @@ class Player extends Component {
     return this.techGet_('defaultMuted') || false;
   }
 
+  /**
+   * Get the last volume, or set it
+   *
+   * @param  {number} [percentAsDecimal]
+   *         The new last volume as a decimal percent:
+   *         - 0 is muted/0%/off
+   *         - 1.0 is 100%/full
+   *         - 0.5 is half volume or 50%
+   *
+   * @return {number}
+   *         the current value of lastVolume as a percent when getting
+   *
+   * @private
+   */
+  lastVolume_(percentAsDecimal) {
+    if (percentAsDecimal !== undefined && percentAsDecimal !== 0) {
+      this.cache_.lastVolume = percentAsDecimal;
+      return;
+    }
+    return this.cache_.lastVolume;
+  }
+
   /**
    * Check if current tech can support native fullscreen
    * (e.g. with built in controls like iOS, so not our flash swf)
@@ -2073,7 +2138,7 @@ class Player extends Component {
 
     // Loop through each playback technology in the options order
     for (let i = 0, j = this.options_.techOrder; i < j.length; i++) {
-      const techName = toTitleCase(j[i]);
+      const techName = j[i];
       let tech = Tech.getTech(techName);
 
       // Support old behavior of techs being registered as components.
@@ -2117,12 +2182,8 @@ class Player extends Component {
     // current platform
     const techs =
       this.options_.techOrder
-        .map(toTitleCase)
         .map((techName) => {
-          // `Component.getComponent(...)` is for support of old behavior of techs
-          // being registered as components.
-          // Remove once that deprecated behavior is removed.
-          return [techName, Tech.getTech(techName) || Component.getComponent(techName)];
+          return [techName, Tech.getTech(techName)];
         })
         .filter(([techName, tech]) => {
           // Check if the current tech is defined before continuing
@@ -2189,37 +2250,40 @@ class Player extends Component {
    *         The current video source when getting
    */
   src(source) {
-    if (source === undefined) {
+    // getter usage
+    if (typeof source === 'undefined') {
       return this.cache_.src;
     }
+    // filter out invalid sources and turn our source into
+    // an array of source objects
+    const sources = filterSource(source);
 
-    this.changingSrc_ = true;
-
-    let src = source;
-
-    if (Array.isArray(source)) {
-      this.cache_.sources = source;
-      src = source[0];
-    } else if (typeof source === 'string') {
-      src = {
-        src: source
-      };
-
-      this.cache_.sources = [src];
+    // if a source was passed in then it is invalid because
+    // it was filtered to a zero length Array. So we have to
+    // show an error
+    if (!sources.length) {
+      this.setTimeout(function() {
+        this.error({ code: 4, message: this.localize(this.options_.notSupportedMessage) });
+      }, 0);
+      return;
     }
 
-    this.cache_.source = src;
+    // intial sources
+    this.cache_.sources = sources;
+    this.changingSrc_ = true;
 
-    this.currentType_ = src.type;
+    // intial source
+    this.cache_.source = sources[0];
 
-    middleware.setSource(this, src, (src_, mws) => {
+    // middlewareSource is the source after it has been changed by middleware
+    middleware.setSource(this, sources[0], (middlewareSource, mws) => {
       this.middleware_ = mws;
 
-      const err = this.src_(src_);
+      const err = this.src_(middlewareSource);
 
       if (err) {
-        if (Array.isArray(source) && source.length > 1) {
-          return this.src(source.slice(1));
+        if (sources.length > 1) {
+          return this.src(sources.slice(1));
         }
 
         // We need to wrap this in a timeout to give folks a chance to add error event handlers
@@ -2235,11 +2299,26 @@ class Player extends Component {
       }
 
       this.changingSrc_ = false;
-      this.cache_.src = src_.src;
+      // video element listed source
+      this.cache_.src = middlewareSource.src;
+
       middleware.setTech(mws, this.tech_);
     });
   }
 
+  /**
+   * Set the source object on the tech, returns a boolean that indicates wether
+   * there is a tech that can play the source or not
+   *
+   * @param {Tech~SourceObject} source
+   *        The source object to set on the Tech
+   *
+   * @return {Boolean}
+   *         - True if there is no Tech to playback this source
+   *         - False otherwise
+   *
+   * @private
+   */
   src_(source) {
     const sourceTech = this.selectSource([source]);
 
@@ -2247,7 +2326,7 @@ class Player extends Component {
       return true;
     }
 
-    if (sourceTech.tech !== this.techName_) {
+    if (!titleCaseEquals(sourceTech.tech, this.techName_)) {
       this.changingSrc_ = true;
 
       // load this technology with the chosen source
@@ -2282,39 +2361,6 @@ class Player extends Component {
     return false;
   }
 
-  /**
-   * Handle an array of source objects
-   *
-   * @param  {Tech~SourceObject[]} sources
-   *         Array of source objects
-   *
-   * @private
-   */
-  sourceList_(sources) {
-    const sourceTech = this.selectSource(sources);
-
-    if (sourceTech) {
-      if (sourceTech.tech === this.techName_) {
-        // if this technology is already loaded, set the source
-        this.src(sourceTech.source);
-      } else {
-        // load this technology with the chosen source
-        this.loadTech_(sourceTech.tech, sourceTech.source);
-      }
-
-      this.cache_.sources = sources;
-    } else {
-      // We need to wrap this in a timeout to give folks a chance to add error event handlers
-      this.setTimeout(function() {
-        this.error({ code: 4, message: this.localize(this.options_.notSupportedMessage) });
-      }, 0);
-
-      // we could not find an appropriate tech, but let's still notify the delegate that this is it
-      // this needs a better comment about why this is needed
-      this.triggerReady();
-    }
-  }
-
   /**
    * Begin loading the src data.
    */
@@ -2327,7 +2373,7 @@ class Player extends Component {
    * and calls `reset` on the tech`.
    */
   reset() {
-    this.loadTech_(toTitleCase(this.options_.techOrder[0]), null);
+    this.loadTech_(this.options_.techOrder[0], null);
     this.techCall_('reset');
   }
 
@@ -2356,14 +2402,7 @@ class Player extends Component {
    *         The current source object
    */
   currentSource() {
-    const source = {};
-    const src = this.currentSrc();
-
-    if (src) {
-      source.src = src;
-    }
-
-    return this.cache_.source || source;
+    return this.cache_.source || {};
   }
 
   /**
@@ -2374,7 +2413,7 @@ class Player extends Component {
    *         The current source
    */
   currentSrc() {
-    return this.cache_.source && this.cache_.source.src || '';
+    return this.currentSource() && this.currentSource().src || '';
   }
 
   /**
@@ -2386,7 +2425,7 @@ class Player extends Component {
    *         The source MIME type
    */
   currentType() {
-    return this.currentType_ || '';
+    return this.currentSource() && this.currentSource().type || '';
   }
 
   /**
@@ -2923,9 +2962,9 @@ class Player extends Component {
    *
    * @param {boolean} [manualCleanup=true] if set to false, the TextTrack will be
    *
-   * @return {HTMLTrackElement}
+   * @return {HtmlTrackElement}
    *         the HTMLTrackElement that was created and added
-   *         to the HTMLTrackElementList and the remote
+   *         to the HtmlTrackElementList and the remote
    *         TextTrackList
    *
    * @deprecated The default value of the "manualCleanup" parameter will default
@@ -2939,7 +2978,7 @@ class Player extends Component {
 
   /**
    * Remove a remote {@link TextTrack} from the respective
-   * {@link TextTrackList} and {@link HTMLTrackElementList}.
+   * {@link TextTrackList} and {@link HtmlTrackElementList}.
    *
    * @param {Object} track
    *        Remote {@link TextTrack} to remove
@@ -3183,9 +3222,9 @@ class Player extends Component {
  */
 
 /**
- * Get the remote {@link HTMLTrackElementList} tracks.
+ * Get the remote {@link HtmlTrackElementList} tracks.
  *
- * @return {HTMLTrackElementList}
+ * @return {HtmlTrackElementList}
  *         The current remote text track element list
  *
  * @method Player.prototype.remoteTextTrackEls
@@ -3225,7 +3264,7 @@ const navigator = window.navigator;
  */
 Player.prototype.options_ = {
   // Default order of fallback technology
-  techOrder: Tech.defaultTechs_,
+  techOrder: Tech.defaultTechOrder_,
 
   html5: {},
   flash: {},
@@ -3375,7 +3414,7 @@ TECH_EVENTS_RETRIGGER.forEach(function(event) {
  * This does not report whether or not the plugin has ever been initialized
  * on this player. For that, [usingPlugin]{@link Player#usingPlugin}.
  *
- * @method hasPlugin
+ * @method Player#hasPlugin
  * @param  {string}  name
  *         The name of a plugin.
  *
@@ -3389,7 +3428,7 @@ TECH_EVENTS_RETRIGGER.forEach(function(event) {
  * For basic plugins, this only reports whether the plugin has _ever_ been
  * initialized on this player.
  *
- * @method usingPlugin
+ * @method Player#usingPlugin
  * @param  {string} name
  *         The name of a plugin.
  *

src/js/plugin.js

@@ -5,6 +5,7 @@ import evented from './mixins/evented';
 import stateful from './mixins/stateful';
 import * as Events from './utils/events';
 import * as Fn from './utils/fn';
+import log from './utils/log';
 import Player from './player';
 
 /**
@@ -88,17 +89,25 @@ const markPluginAsActive = (player, name) => {
  * @returns {Function}
  *          A wrapper function for the given plugin.
  */
-const createBasicPlugin = (name, plugin) => function() {
-  const instance = plugin.apply(this, arguments);
+const createBasicPlugin = function(name, plugin) {
+  const basicPluginWrapper = function() {
+    const instance = plugin.apply(this, arguments);
 
-  markPluginAsActive(this, name);
+    markPluginAsActive(this, name);
 
-  // We trigger the "pluginsetup" event on the player regardless, but we want
-  // the hash to be consistent with the hash provided for advanced plugins.
-  // The only potentially counter-intuitive thing here is the `instance` is the
-  // value returned by the `plugin` function.
-  this.trigger('pluginsetup', {name, plugin, instance});
-  return instance;
+    // We trigger the "pluginsetup" event on the player regardless, but we want
+    // the hash to be consistent with the hash provided for advanced plugins.
+    // The only potentially counter-intuitive thing here is the `instance` is the
+    // value returned by the `plugin` function.
+    this.trigger('pluginsetup', {name, plugin, instance});
+    return instance;
+  };
+
+  Object.keys(plugin).forEach(function(prop) {
+    basicPluginWrapper[prop] = plugin[prop];
+  });
+
+  return basicPluginWrapper;
 };
 
 /**
@@ -297,8 +306,10 @@ class Plugin {
       throw new Error(`Illegal plugin name, "${name}", must be a string, was ${typeof name}.`);
     }
 
-    if (pluginExists(name) || Player.prototype.hasOwnProperty(name)) {
-      throw new Error(`Illegal plugin name, "${name}", already exists.`);
+    if (pluginExists(name)) {
+      log.warn(`A plugin named "${name}" already exists. You may want to avoid re-registering plugins!`);
+    } else if (Player.prototype.hasOwnProperty(name)) {
+      throw new Error(`Illegal plugin name, "${name}", cannot share a name with an existing player method!`);
     }
 
     if (typeof plugin !== 'function') {

src/js/setup.js

@@ -88,7 +88,7 @@ const autoSetup = function() {
  * @param {number} wait
  *        How long to wait in ms
  *
- * @param {videojs} [vjs]
+ * @param {module:videojs} [vjs]
  *        The videojs library function
  */
 function autoSetupTimeout(wait, vjs) {

src/js/tech/html5.js

@@ -68,6 +68,7 @@ class Html5 extends Tech {
             // store HTMLTrackElement and TextTrack to remote list
             this.remoteTextTrackEls().addTrackElement_(node);
             this.remoteTextTracks().addTrack(node.track);
+            this.textTracks().addTrack(node.track);
             if (!crossoriginTracks &&
                 !this.el_.hasAttribute('crossorigin') &&
                 Url.isCrossOrigin(node.src)) {
@@ -341,19 +342,6 @@ class Html5 extends Tech {
     });
   }
 
-  /**
-   * Called by {@link Player#play} to play using the `Html5` `Tech`.
-   */
-  play() {
-    const playPromise = this.el_.play();
-
-    // Catch/silence error when a pause interrupts a play request
-    // on browsers which return a promise
-    if (playPromise !== undefined && typeof playPromise.then === 'function') {
-      playPromise.then(null, (e) => {});
-    }
-  }
-
   /**
    * Set current time for the `HTML5` tech.
    *
@@ -848,6 +836,7 @@ Html5.Events = [
   'play',
   'pause',
   'ratechange',
+  'resize',
   'volumechange'
 ];
 

src/js/tech/loader.js

@@ -4,6 +4,7 @@
 import Component from '../component.js';
 import Tech from './tech.js';
 import toTitleCase from '../utils/to-title-case.js';
+import mergeOptions from '../utils/merge-options.js';
 
 /**
  * The `MediaLoader` is the `Component` that decides which playback technology to load
@@ -26,7 +27,10 @@ class MediaLoader extends Component {
    *        The function that is run when this component is ready.
    */
   constructor(player, options, ready) {
-    super(player, options, ready);
+    // MediaLoader has no element
+    const options_ = mergeOptions({createEl: false}, options);
+
+    super(player, options_, ready);
 
     // If there are no sources when the player is initialized,
     // load the first supported playback technology.

src/js/tech/tech.js

@@ -13,6 +13,7 @@ import window from 'global/window';
 import document from 'global/document';
 import {isPlain} from '../utils/obj';
 import * as TRACK_TYPES from '../tracks/track-types';
+import toTitleCase from '../utils/to-title-case';
 
 /**
  * An Object containing a structure like: `{src: 'url', type: 'mimetype'}` or string
@@ -32,6 +33,8 @@ import * as TRACK_TYPES from '../tracks/track-types';
 /**
  * A function used by {@link Tech} to create a new {@link TextTrack}.
  *
+ * @private
+ *
  * @param {Tech} self
  *        An instance of the Tech class.
  *
@@ -127,8 +130,10 @@ class Tech extends Component {
       }
     });
 
-    if (options.nativeCaptions === false) {
+    if (options.nativeCaptions === false || options.nativeTextTracks === false) {
       this.featuresNativeTextTracks = false;
+    } else if (options.nativeCaptions === true || options.nativeTextTracks === true) {
+      this.featuresNativeTextTracks = true;
     }
 
     if (!this.featuresNativeTextTracks) {
@@ -503,16 +508,20 @@ class Tech extends Component {
    * @fires Tech#vttjserror
    */
   addWebVttScript_() {
-    if (!window.WebVTT && this.el().parentNode !== null && this.el().parentNode !== undefined) {
+    if (window.WebVTT) {
+      return;
+    }
+
+    // Initially, Tech.el_ is a child of a dummy-div wait until the Component system
+    // signals that the Tech is ready at which point Tech.el_ is part of the DOM
+    // before inserting the WebVTT script
+    if (document.body.contains(this.el())) {
       const vtt = require('videojs-vtt.js');
 
       // load via require if available and vtt.js script location was not passed in
       // as an option. novtt builds will turn the above require call into an empty object
       // which will cause this if check to always fail.
       if (!this.options_['vtt.js'] && isPlain(vtt) && Object.keys(vtt).length > 0) {
-        Object.keys(vtt).forEach(function(k) {
-          window[k] = vtt[k];
-        });
         this.trigger('vttjsloaded');
         return;
       }
@@ -521,7 +530,7 @@ class Tech extends Component {
       // passed in
       const script = document.createElement('script');
 
-      script.src = this.options_['vtt.js'] || 'https://cdn.rawgit.com/gkatsev/vtt.js/vjs-v0.12.1/dist/vtt.min.js';
+      script.src = this.options_['vtt.js'] || 'https://vjs.zencdn.net/vttjs/0.12.3/vtt.min.js';
       script.onload = () => {
         /**
          * Fired when vtt.js is loaded.
@@ -548,13 +557,15 @@ class Tech extends Component {
       // we don't overwrite the injected window.WebVTT if it loads right away
       window.WebVTT = true;
       this.el().parentNode.appendChild(script);
+    } else {
+      this.ready(this.addWebVttScript_);
     }
+
   }
 
   /**
    * Emulate texttracks
    *
-   * @method emulateTextTracks
    */
   emulateTextTracks() {
     const tracks = this.textTracks();
@@ -565,10 +576,7 @@ class Tech extends Component {
     remoteTracks.on('addtrack', handleAddTrack);
     remoteTracks.on('removetrack', handleRemoveTrack);
 
-    // Initially, Tech.el_ is a child of a dummy-div wait until the Component system
-    // signals that the Tech is ready at which point Tech.el_ is part of the DOM
-    // before inserting the WebVTT script
-    this.on('ready', this.addWebVttScript_);
+    this.addWebVttScript_();
 
     const updateDisplay = () => this.trigger('texttrackchange');
 
@@ -587,11 +595,15 @@ class Tech extends Component {
 
     textTracksChanges();
     tracks.addEventListener('change', textTracksChanges);
+    tracks.addEventListener('addtrack', textTracksChanges);
+    tracks.addEventListener('removetrack', textTracksChanges);
 
     this.on('dispose', function() {
       remoteTracks.off('addtrack', handleAddTrack);
       remoteTracks.off('removetrack', handleRemoveTrack);
       tracks.removeEventListener('change', textTracksChanges);
+      tracks.removeEventListener('addtrack', textTracksChanges);
+      tracks.removeEventListener('removetrack', textTracksChanges);
 
       for (let i = 0; i < tracks.length; i++) {
         const track = tracks[i];
@@ -805,10 +817,12 @@ class Tech extends Component {
       throw new Error('Techs must have a static canPlaySource method on them');
     }
 
+    name = toTitleCase(name);
+
     Tech.techs_[name] = tech;
     if (name !== 'Tech') {
       // camel case the techName for use in techOrder
-      Tech.defaultTechs_.push(name.charAt(0).toLowerCase() + name.slice(1));
+      Tech.defaultTechOrder_.push(name);
     }
     return tech;
   }
@@ -817,12 +831,18 @@ class Tech extends Component {
    * Get a `Tech` from the shared list by name.
    *
    * @param {string} name
-   *        Name of the component to get
+   *        `camelCase` or `TitleCase` name of the Tech to get
    *
    * @return {Tech|undefined}
    *         The `Tech` or undefined if there was no tech with the name requsted.
    */
   static getTech(name) {
+    if (!name) {
+      return;
+    }
+
+    name = toTitleCase(name);
+
     if (Tech.techs_ && Tech.techs_[name]) {
       return Tech.techs_[name];
     }
@@ -863,9 +883,9 @@ class Tech extends Component {
  */
 
 /**
- * Get the remote element {@link HTMLTrackElementList}
+ * Get the remote element {@link HtmlTrackElementList}
  *
- * @returns {HTMLTrackElementList}
+ * @returns {HtmlTrackElementList}
  * @method Tech.prototype.remoteTextTrackEls
  */
 
@@ -1184,6 +1204,6 @@ Tech.registerTech('Tech', Tech);
  *
  * @private
  */
-Tech.defaultTechs_ = [];
+Tech.defaultTechOrder_ = [];
 
 export default Tech;

src/js/tracks/audio-track.js

@@ -51,9 +51,11 @@ class AudioTrack extends Track {
       }
     }
     /**
+     * @memberof AudioTrack
      * @member {boolean} enabled
      *         If this `AudioTrack` is enabled or not. When setting this will
      *         fire {@link AudioTrack#enabledchange} if the state of enabled is changed.
+     * @instance
      *
      * @fires VideoTrack#selectedchange
      */