doc comments, cleanup

We've been printing the resulting value from a successful call to the ghrelease, this was useful for debugging but isn't necessary anymore.
Add the result to the error conditional with some headings.

.babelrc

@@ -1,4 +1,8 @@
 {
-  "presets": [ ["es2015", {"loose": true}] ],
-  "plugins": ["transform-es3-property-literals", "transform-es3-member-expression-literals", "inline-json"]
+  "presets": [
+    "es3",
+    ["es2015", {
+      "loose": true
+    }]
+  ]
 }

.github/ISSUE_TEMPLATE.md

@@ -4,7 +4,6 @@ Include a [reduced test case](https://css-tricks.com/reduced-test-cases/), we ha
 
 ## Steps to reproduce
 Explain in detail the exact steps necessary to reproduce the issue.
-
 1.
 2.
 3.

.github/PULL_REQUEST_TEMPLATE.md

@@ -3,7 +3,6 @@ Please describe the change as necessary.
 If it's a feature or enhancement please be as detailed as possible.
 If it's a bug fix, please link the issue that it fixes or describe the bug in as much detail.
 
-
 ## Specific Changes proposed
 Please list the specific changes involved in this pull request.
 

.gitignore

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

.jsdoc.json

@@ -1,6 +1,41 @@
 {
+  "source": {
+    "include": [ "src/js/" ],
+    "includePattern": ".js$"
+  },
+  "opts": {
+    "destination": "docs/api",
+    "readme": "docs/index.md",
+    "template": "node_modules/tui-jsdoc-template",
+    "package": "package.json",
+    "recurse": true,
+    "tutorials": "docs/guides",
+    "encoding": "utf8"
+  },
+  "templates": {
+    "default": {
+      "staticFiles": {
+        "include": ["build/docs/"]
+      }
+    },
+    "logo": {
+      "url": "http://videojs.com/img/logo.png",
+      "height": "30px",
+      "width": "214px"
+    },
+    "name": "Video.js Documentation",
+    "tabNames": {
+      "tutorials": "Guides"
+    },
+    "footerText": "<span class='copyright'><a href='http://videojs.com'>Video.js</a> is a free and open source HTML5 video player. © <a href='https://brightcove.com' target='_blank'>Brightcove, Inc</a>. <a href='https://github.com/videojs/video.js/blob/master/LICENSE' class='button blue' target='_blank'>View license</a></span> <ul class='other-links'><li><a href='http://videojs.com' class='button white'><i class='fa fa-external-link'></i> Video.js</a></li> <li><a href='https://twitter.com/videojs' class='button white' target='_blank'><i class='fa fa-twitter'></i> @videojs</a></li> <li><a href='http://github.com/videojs/video.js' class='button white' target='_blank'><i class='fa fa-github-alt'></i> Source</a></li> </ul>",
+    "css": [
+      "styles/videojs.css",
+      "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
+    ]
+  },
   "plugins": ["plugins/markdown"],
   "markdown": {
-    "tags": ["example"]
+    "tags": ["example"],
+    "idInHeadings": true
   }
 }

.npmignore

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

.remarkignore

@@ -0,0 +1 @@
+CHANGELOG.md

.remarkrc.js

@@ -0,0 +1,84 @@
+var remarkrc = {
+  settings: {
+    bullet: '*',
+    fence: '`',
+    strong: '*',
+    emphasis: '_',
+    listItemIndent: 1,
+    incrementListMarker: false
+  },
+  plugins: {
+    'toc': {
+      tight: true
+    },
+  }
+};
+var args = process.argv;
+
+// only lint in non-output mode
+if (args.indexOf('-o') === -1 && args.indexOf('--output') === -1) {
+  remarkrc['validate-links'] = {};
+  remarkrc.plugins.lint = {
+    'blockquote-indentation': ['error', 2],
+    'checkbox-character-style': ['warn'],
+    'checkbox-content-indent': ['error'],
+    'code-block-style': ['error', 'fenced'],
+    'definition-case': ['off'],
+    'definition-spacing': ['error'],
+    'emphasis-marker': ['error', '_'],
+    'fenced-code-flag': ['error'],
+    'fenced-code-marker': ['error', '`'],
+    'file-extension': ['error'],
+    'final-definition': ['error'],
+    'final-newline': ['off'],
+    'first-heading-level': ['warn', 1],
+    'hard-break-spaces': ['off'],
+    'heading-increment': ['error'],
+    'heading-style': ['error', 'atx'],
+    'link-title-style': ['warn', '"'],
+    'list-item-bullet-indent': ['error'],
+    'list-item-content-indent': ['warn'],
+    'list-item-indent': ['error', 'space'],
+    'list-item-spacing': ['off'],
+    'maximum-heading-length': ['off'],
+    'maximum-line-length': ['off'],
+    'no-auto-link-without-protocol': ['error'],
+    'no-blockquote-without-caret': ['error'],
+    'no-consecutive-blank-lines': ['error'],
+    'no-duplicate-definitions': ['error'],
+    'no-duplicate-headings-in-section': ['error'],
+    'no-duplicate-headings': ['off'],
+    'no-emphasis-as-heading': ['error'],
+    'no-file-name-articles': ['off'],
+    'no-file-name-consecutive-dashes': ['off'],
+    'no-file-name-irregular-characters': ['warn', '\\.a-zA-Z0-9-_'],
+    'no-file-name-mixed-case': ['error'],
+    'no-file-name-outer-dashes': ['error'],
+    'no-heading-content-indent': ['error'],
+    'no-heading-indent': ['error'],
+    'no-heading-punctuation': ['off'],
+    'no-html': ['off'],
+    'no-inline-padding': ['error'],
+    'no-literal-urls': ['off'],
+    'no-missing-blank-lines': ['off'],
+    'no-multiple-toplevel-headings': ['error'],
+    'no-reference-like-url': ['error'],
+    'no-shell-dollars': ['error'],
+    'no-shortcut-reference-iamge': ['off'],
+    'no-shortcut-reference-link': ['off'],
+    'no-table-indentation': ['error'],
+    'no-tabs': ['error'],
+    'no-undefined-references': ['error'],
+    'no-unused-definitions': ['error'],
+    'ordered-list-marker-style': ['error', '.'],
+    'ordered-list-marker-value': ['error', 'one'],
+    'rule-style': ['error', '***'],
+    'strong-marker': ['error', '*'],
+    'table-cell-padding': ['warn', 'padded'],
+    'table-cell-alignment': ['warn'],
+    'table-pipes': ['warn'],
+    'unordered-list-marker-style': ['warn', '*']
+  };
+}
+
+module.exports = remarkrc;

.travis.yml

@@ -2,9 +2,13 @@ language: node_js
 node_js:
   - 4.4
 before_install:
-  - export CHROME_BIN=chromium-browser
+  - export CHROME_BIN=/usr/bin/google-chrome
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
+after_failure:
+  - npm ls --depth=1
+after_success:
+  - npm run assets
 notifications:
   irc:
     channels:
@@ -13,6 +17,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=
@@ -20,8 +26,12 @@ env:
     - secure: gglh7xDnURKfXp9T543DD7NG1pQ8HeWh1XtRspBAwr0H7RqJBVDqqODSYSPRFhfld7M6sYmvQIXgil7XlyefnKNTXqCarvaoTg3lbip8kSltXMiNw2V6AVpsQGuja7+XbaM0do70ETTKjW4Kw6wnxEHb78BvGN/hXIeqizUAjanlDAjd7fouaxpTBIbMESe2rI+WRHPis1cmnv8v70Mrh/8Un/NO4gkebGyvA47LTDNIaVqIVjonsndr8WjMv1/PNxQ8LyCO6D64MufrobS7Sec+VuN30apwEsBw8v82MK/MZ3qXu0lUp4+ERTbuc/rymh2wDFTQeG20Kf/NTauSaH6f414KNzIRFj0/xyLAzVZKIscXM2DKXMuskkZuvHLZvaspnZWcPYTjPZl0P88N0RBqnoLdR80dR5bDljNwU2QnSBeol/q1wXNEr6I1VTRFOB+qsHrD1blVMB1I5W3I0ti1aQ7XtgMOGi1kcPb4oFcJdl+3dLFDnyRyaNfdMOnOZYBBHdQCo19Mj/L+nqPGWeeYiEAM6JsuhNjHn5Za5nGf1ztXTimVPOQjyATin0x9kST3soLWSVmdW2dBHUGDVSMhvoLLR+nKSdNQ0KfpqtgrzeLxoVnRYHVBlih41tapM9IG/6BMYnDMaRcc0i54YeUP4oxlxGSyASIenkAgC6w=
     - secure: WtIEOSnqDkCZuTlBsxwlVwaRpVTbz7ol8+XSJIZb0aFo1lLisF9cz6s9WrAfX36MaxIcDN9LFZkpXzMvNrNkZWQa1kacGWH1rbx0SiiQ8LMweAcKdnZ5uXlSplBxbJ8bZfXKB1sIHsOsYw/vWhHKkcsDUkAEzQrIiMOhuoUV3s0uKM0knKXIAfNIF0EbDzLIojm+nm+F0n5vM60LRdKesaSt/o2p2LKxdZVoFGrg48D7bdA9VEfMWWRL/evDxJmnX4p+AjBc7mklqZ5F2pYsY6XXQuuS+2Sy+lnxz01kLg+RC4Cpv5dyYfK3h0j8KeyK8IuixycVONWVe9rANq8UaIsMrRN+6uDSC8zXiH4P+h6UDMm3jetc2ZyAfhBA8OyIs5QEShae2Rd7Y3WFJxBp6UVgyj6SkXGxrEdb1ZJgTTl4dyqiP0bYrLePNP2qSJ6OTfNdG791HF077uzXI96ABdMG54Wv9N9T/hmxKwV2Lajx/GZJMmHuwT9tkHKhkcxWea1HYam9QYSFUyJ5THfNk2A9u/r8DkL62MZ85zIQBisrlFjbPAGRejq6qyirBJPAy+FCjhM+oO/i2f2bGkkAfHGT0Og1BcrWVXs54yWdO7UZgie2F+Rmdwinb/GxebZJ+21ZQ4OkVr2t1Skr/PRni9+U7q/6xCLwUJgx45XJ0FE=
 sudo: false
+dist: trusty
 cache:
   directories:
     - node_modules
 addons:
   firefox: latest
+  apt:
+    packages:
+      - google-chrome-stable

CHANGELOG.md

@@ -1,3 +1,611 @@
+<a name="6.3.3"></a>
+## [6.3.3](https://github.com/videojs/video.js/compare/v6.3.2...v6.3.3) (2017-10-10)
+
+### Bug Fixes
+
+* a possible breaking change caused by the use of remainingTimeDisplay ([#4655](https://github.com/videojs/video.js/issues/4655)) ([b1de506](https://github.com/videojs/video.js/commit/b1de506))
+
+### Documentation
+
+* **hooks:** Fix Typo ([#4652](https://github.com/videojs/video.js/issues/4652)) ([6738f76](https://github.com/videojs/video.js/commit/6738f76))
+
+<a name="6.3.2"></a>
+## [6.3.2](https://github.com/videojs/video.js/compare/v6.3.1...v6.3.2) (2017-10-04)
+
+### Bug Fixes
+
+* Fix a typo in current time display component. ([#4647](https://github.com/videojs/video.js/issues/4647)) ([4658c7b](https://github.com/videojs/video.js/commit/4658c7b))
+
+### Documentation
+
+* Document how to add a version number to a plugin ([#4642](https://github.com/videojs/video.js/issues/4642)) ([85a34d1](https://github.com/videojs/video.js/commit/85a34d1))
+
+<a name="6.3.1"></a>
+## [6.3.1](https://github.com/videojs/video.js/compare/v6.3.0...v6.3.1) (2017-10-03)
+
+### Bug Fixes
+
+* Make sure time displays use correctly-formatted time. ([#4643](https://github.com/videojs/video.js/issues/4643)) ([20f7fe9](https://github.com/videojs/video.js/commit/20f7fe9))
+
+<a name="6.3.0"></a>
+# [6.3.0](https://github.com/videojs/video.js/compare/v6.2.8...v6.3.0) (2017-10-03)
+
+### Features
+
+* Add remainingTimeDisplay method to Player ([#4620](https://github.com/videojs/video.js/issues/4620)) ([445eb26](https://github.com/videojs/video.js/commit/445eb26))
+* display currentTime as duration and remainingTime as 0 on ended ([#4634](https://github.com/videojs/video.js/issues/4634)) ([f51d36b](https://github.com/videojs/video.js/commit/f51d36b))
+* Do not set focus in sub-menus to prevent undesirable scrolling behavior in iOS ([#4607](https://github.com/videojs/video.js/issues/4607)) ([1ac8065](https://github.com/videojs/video.js/commit/1ac8065))
+
+### Bug Fixes
+
+* reset to a play/pause button when seeking after ended ([#4614](https://github.com/videojs/video.js/issues/4614)) ([335bcde](https://github.com/videojs/video.js/commit/335bcde))
+
+### Chores
+
+* alias rollup-dev to watch for development ([#4615](https://github.com/videojs/video.js/issues/4615)) ([edde614](https://github.com/videojs/video.js/commit/edde614))
+* **lang:** Update Dutch ([#4588](https://github.com/videojs/video.js/issues/4588)) ([5ca0992](https://github.com/videojs/video.js/commit/5ca0992))
+* **lang:** Update Vietnamese ([#4625](https://github.com/videojs/video.js/issues/4625)) ([ac58dbf](https://github.com/videojs/video.js/commit/ac58dbf))
+* **package:** update grunt-browserify to version 5.2.0 ([#4578](https://github.com/videojs/video.js/issues/4578)) ([6cd785a](https://github.com/videojs/video.js/commit/6cd785a))
+* **package:** update remark-validate-links to version 7.0.0 ([#4585](https://github.com/videojs/video.js/issues/4585)) ([7929677](https://github.com/videojs/video.js/commit/7929677))
+
+### Code Refactoring
+
+* Create a base time display class, and use it ([#4633](https://github.com/videojs/video.js/issues/4633)) ([fa6f884](https://github.com/videojs/video.js/commit/fa6f884))
+
+### Documentation
+
+* Document playbackRates ([#4602](https://github.com/videojs/video.js/issues/4602)) ([9d249bb](https://github.com/videojs/video.js/commit/9d249bb))
+* update player reference in advanced plugins doc ([#4622](https://github.com/videojs/video.js/issues/4622)) ([d8ea23e](https://github.com/videojs/video.js/commit/d8ea23e))
+
+<a name="6.2.8"></a>
+## [6.2.8](https://github.com/videojs/video.js/compare/v6.2.7...v6.2.8) (2017-09-01)
+
+### Bug Fixes
+
+* rely on browser or tech to handle autoplay ([#4582](https://github.com/videojs/video.js/issues/4582)) ([95c4ae0](https://github.com/videojs/video.js/commit/95c4ae0))
+* **package:** remove pkg.module ([#4594](https://github.com/videojs/video.js/issues/4594)) ([5e23048](https://github.com/videojs/video.js/commit/5e23048)), closes [#4580](https://github.com/videojs/video.js/issues/4580)
+
+### Documentation
+
+* **COLLABORATOR_GUIDE:** how to release Video.js ([#4586](https://github.com/videojs/video.js/issues/4586)) ([9588602](https://github.com/videojs/video.js/commit/9588602))
+* update to width and height doc comments ([#4592](https://github.com/videojs/video.js/issues/4592)) ([006fb3b](https://github.com/videojs/video.js/commit/006fb3b))
+
+<a name="6.2.7"></a>
+## [6.2.7](https://github.com/videojs/video.js/compare/v6.2.6...v6.2.7) (2017-08-24)
+
+### Bug Fixes
+
+* use typeof for checking preload option ([#4574](https://github.com/videojs/video.js/issues/4574)) ([fe63992](https://github.com/videojs/video.js/commit/fe63992))
+
+### Chores
+
+* **package:** update rollup to version 0.47.5 ([#4572](https://github.com/videojs/video.js/issues/4572)) ([7b251d0](https://github.com/videojs/video.js/commit/7b251d0))
+
+<a name="6.2.6"></a>
+## [6.2.6](https://github.com/videojs/video.js/compare/v6.2.5...v6.2.6) (2017-08-16)
+
+### Bug Fixes
+
+* make boolean attributes set and check both the associated property and the attribute ([#4562](https://github.com/videojs/video.js/issues/4562)) ([d668c49](https://github.com/videojs/video.js/commit/d668c49)), closes [#4351](https://github.com/videojs/video.js/issues/4351)
+* playback rate default text ([#4558](https://github.com/videojs/video.js/issues/4558)) ([a6b8425](https://github.com/videojs/video.js/commit/a6b8425))
+* remove 'use strict' from rollup because vttjs isn't strict ([#4551](https://github.com/videojs/video.js/issues/4551)) ([db55bbd](https://github.com/videojs/video.js/commit/db55bbd))
+* set width and height for vjs-button like the SubsCaps button ([#4548](https://github.com/videojs/video.js/issues/4548)) ([cd2f510](https://github.com/videojs/video.js/commit/cd2f510)), closes [#4547](https://github.com/videojs/video.js/issues/4547)
+* **lang:** typos in ar.json ([#4528](https://github.com/videojs/video.js/issues/4528)) ([3e63bf3](https://github.com/videojs/video.js/commit/3e63bf3))
+
+### Chores
+
+* improve dev and beginner experience ([#4555](https://github.com/videojs/video.js/issues/4555)) ([19ebc0d](https://github.com/videojs/video.js/commit/19ebc0d))
+* **package:** update grunt-babel to version 7.0.0 ([#4553](https://github.com/videojs/video.js/issues/4553)) ([f6f9998](https://github.com/videojs/video.js/commit/f6f9998))
+* **package:** update grunt-browserify to version 5.1.0 ([#4565](https://github.com/videojs/video.js/issues/4565)) ([8c21f0a](https://github.com/videojs/video.js/commit/8c21f0a))
+* **package:** update klaw-sync to version 3.0.0 ([#4544](https://github.com/videojs/video.js/issues/4544)) ([6233d14](https://github.com/videojs/video.js/commit/6233d14))
+* **package:** update rollup to version 0.47.4 ([#4570](https://github.com/videojs/video.js/issues/4570)) ([d7f7e05](https://github.com/videojs/video.js/commit/d7f7e05)), closes [#4561](https://github.com/videojs/video.js/issues/4561)
+
+### Documentation
+
+* updates to faq, language guide, and minor edits ([#4556](https://github.com/videojs/video.js/issues/4556)) ([1f3375e](https://github.com/videojs/video.js/commit/1f3375e))
+
+<a name="6.2.5"></a>
+## [6.2.5](https://github.com/videojs/video.js/compare/v6.2.4...v6.2.5) (2017-07-26)
+
+### Bug Fixes
+
+* only change focus from BPB if not a mouse click ([#4497](https://github.com/videojs/video.js/issues/4497)) ([ee014e2](https://github.com/videojs/video.js/commit/ee014e2))
+
+### Chores
+
+* **greenkeeper:** ignore webpack and uglify ([#4518](https://github.com/videojs/video.js/issues/4518)) ([fe95a77](https://github.com/videojs/video.js/commit/fe95a77))
+* **package:** update remark-cli to version 4.0.0 ([#4508](https://github.com/videojs/video.js/issues/4508)) ([7c80e13](https://github.com/videojs/video.js/commit/7c80e13))
+* **package:** update remark-parse to version 4.0.0 ([#4507](https://github.com/videojs/video.js/issues/4507)) ([abb5d67](https://github.com/videojs/video.js/commit/abb5d67))
+* **package:** update remark-stringify to version 4.0.0 ([#4506](https://github.com/videojs/video.js/issues/4506)) ([bbd92ab](https://github.com/videojs/video.js/commit/bbd92ab))
+
+<a name="6.2.4"></a>
+## [6.2.4](https://github.com/videojs/video.js/compare/v6.2.3...v6.2.4) (2017-07-14)
+
+### Chores
+
+* fix gh-release minimist call ([#4489](https://github.com/videojs/video.js/issues/4489)) ([07594bc](https://github.com/videojs/video.js/commit/07594bc))
+
+<a name="6.2.3"></a>
+## [6.2.3](https://github.com/videojs/video.js/compare/v6.2.2...v6.2.3) (2017-07-14)
+
+### Chores
+
+* **gh-release:** add prerelease flag and find right zip  ([#4488](https://github.com/videojs/video.js/issues/4488)) ([b1ac2e0](https://github.com/videojs/video.js/commit/b1ac2e0))
+
+<a name="6.2.2"></a>
+## [6.2.2](https://github.com/videojs/video.js/compare/v6.2.1...v6.2.2) (2017-07-14)
+
+### Bug Fixes
+
+* **playback rate menu:** cycling rates via click ([#4486](https://github.com/videojs/video.js/issues/4486)) ([4f43616](https://github.com/videojs/video.js/commit/4f43616))
+
+### Chores
+
+* **build:** remove unused var in build/version.js ([#4458](https://github.com/videojs/video.js/issues/4458)) ([6986dbb](https://github.com/videojs/video.js/commit/6986dbb))
+* add automatic github release ([#4466](https://github.com/videojs/video.js/issues/4466)) ([3a600d0](https://github.com/videojs/video.js/commit/3a600d0))
+* switch to using chrome for testing PRs on travis ([#4462](https://github.com/videojs/video.js/issues/4462)) ([687aae5](https://github.com/videojs/video.js/commit/687aae5))
+* **package:** update rollup to version 0.45.2 ([#4487](https://github.com/videojs/video.js/issues/4487)) ([971f633](https://github.com/videojs/video.js/commit/971f633)), closes [#4475](https://github.com/videojs/video.js/issues/4475)
+
+### Documentation
+
+* Fix Player#src API documentation. ([#4454](https://github.com/videojs/video.js/issues/4454)) ([7579fc1](https://github.com/videojs/video.js/commit/7579fc1))
+* make jsdoc generate anchor names so ToC links work ([#4471](https://github.com/videojs/video.js/issues/4471)) ([03fd402](https://github.com/videojs/video.js/commit/03fd402))
+
+### Tests
+
+* add unit tests for player.duration() ([#4459](https://github.com/videojs/video.js/issues/4459)) ([1e80e59](https://github.com/videojs/video.js/commit/1e80e59))
+
+<a name="6.2.1"></a>
+## [6.2.1](https://github.com/videojs/video.js/compare/v6.2.0...v6.2.1) (2017-06-28)
+
+### Bug Fixes
+
+* auto-removal remote text tracks being removed when not supposed to ([#4450](https://github.com/videojs/video.js/issues/4450)) ([82c8b80](https://github.com/videojs/video.js/commit/82c8b80)), closes [#4403](https://github.com/videojs/video.js/issues/4403) [#4315](https://github.com/videojs/video.js/issues/4315)
+* IE10 issue for disableOthers when property access results in "permission denied" ([#4395](https://github.com/videojs/video.js/issues/4395)) ([7f7ea70](https://github.com/videojs/video.js/commit/7f7ea70)), closes [#4378](https://github.com/videojs/video.js/issues/4378)
+* player.duration() should return NaN if duration is not known ([#4443](https://github.com/videojs/video.js/issues/4443)) ([f5cc165](https://github.com/videojs/video.js/commit/f5cc165))
+* Safari picture-in-picture triggers fullscreenchange ([#4437](https://github.com/videojs/video.js/issues/4437)) ([b636663](https://github.com/videojs/video.js/commit/b636663))
+* Update translations to match correct string ([#4383](https://github.com/videojs/video.js/issues/4383)) ([e0824c8](https://github.com/videojs/video.js/commit/e0824c8))
+* Use passive event listeners for touchstart/touchmove ([#4440](https://github.com/videojs/video.js/issues/4440)) ([b4dc4f8](https://github.com/videojs/video.js/commit/b4dc4f8)), closes [#4432](https://github.com/videojs/video.js/issues/4432)
+
+### Chores
+
+* **package:** update husky to version 0.14.1 ([#4444](https://github.com/videojs/video.js/issues/4444)) ([66a0d23](https://github.com/videojs/video.js/commit/66a0d23)), closes [#4436](https://github.com/videojs/video.js/issues/4436)
+* **package:** update rollup to version 0.42.0 ([#4392](https://github.com/videojs/video.js/issues/4392)) ([f87b12c](https://github.com/videojs/video.js/commit/f87b12c))
+* **package:** update rollup-watch to version 4.0.0 ([#4396](https://github.com/videojs/video.js/issues/4396)) ([4bce4a2](https://github.com/videojs/video.js/commit/4bce4a2))
+* **sandbox:** Fix paths in sandbox files. ([#4416](https://github.com/videojs/video.js/issues/4416)) ([c4bbe5d](https://github.com/videojs/video.js/commit/c4bbe5d))
+
+### Documentation
+
+* Fix links in API docs for several Player events. ([#4427](https://github.com/videojs/video.js/issues/4427)) ([cc6e824](https://github.com/videojs/video.js/commit/cc6e824))
+* Fixing player.remoteTextTracks jsdoc ([#4417](https://github.com/videojs/video.js/issues/4417)) ([9329e3e](https://github.com/videojs/video.js/commit/9329e3e))
+* Update name of FullscreenToggle in documentation ([#4410](https://github.com/videojs/video.js/issues/4410)) ([9702155](https://github.com/videojs/video.js/commit/9702155))
+
+### Performance Improvements
+
+* Various small performance improvements. ([#4426](https://github.com/videojs/video.js/issues/4426)) ([77ba3d1](https://github.com/videojs/video.js/commit/77ba3d1))
+
+<a name="6.2.0"></a>
+# [6.2.0](https://github.com/videojs/video.js/compare/v6.1.0...v6.2.0) (2017-05-30)
+
+### Features
+
+* Persist caption/description choice over source changes in emulated tracks ([#4295](https://github.com/videojs/video.js/issues/4295)) ([188ead1](https://github.com/videojs/video.js/commit/188ead1))
+* **lang:** Adding galician ([#4334](https://github.com/videojs/video.js/issues/4334)) ([2a26c7f](https://github.com/videojs/video.js/commit/2a26c7f))
+* **lang:** Create sk.json ([#4374](https://github.com/videojs/video.js/issues/4374)) ([e5e1c7f](https://github.com/videojs/video.js/commit/e5e1c7f))
+* **lang:** Update zh-CN.json ([#4370](https://github.com/videojs/video.js/issues/4370)) ([0c16c5f](https://github.com/videojs/video.js/commit/0c16c5f))
+* Use Rollup to generate dist files ([#4301](https://github.com/videojs/video.js/issues/4301)) ([c31836c](https://github.com/videojs/video.js/commit/c31836c))
+
+### Chores
+
+* **package:** update grunt-contrib-cssmin to version 2.2.0 ([#4345](https://github.com/videojs/video.js/issues/4345)) ([d57f09f](https://github.com/videojs/video.js/commit/d57f09f))
+* **package:** update videojs-flash to version 2.0.0 ([#4375](https://github.com/videojs/video.js/issues/4375)) ([9816070](https://github.com/videojs/video.js/commit/9816070))
+* update translations needed ([#4380](https://github.com/videojs/video.js/issues/4380)) ([a5a68e8](https://github.com/videojs/video.js/commit/a5a68e8))
+
+### Tests
+
+* **TextTrackDisplay:** Removing incorrect test techOrder ([#4379](https://github.com/videojs/video.js/issues/4379)) ([eade52e](https://github.com/videojs/video.js/commit/eade52e))
+
+<a name="6.1.0"></a>
+# [6.1.0](https://github.com/videojs/video.js/compare/v6.0.1...v6.1.0) (2017-05-15)
+
+### Features
+
+* Add 'beforepluginsetup' event and named plugin setup events (e.g. 'pluginsetup:foo') ([#4255](https://github.com/videojs/video.js/issues/4255)) ([0a19cf0](https://github.com/videojs/video.js/commit/0a19cf0))
+* add 'playsinline' player option ([#4348](https://github.com/videojs/video.js/issues/4348)) ([8d80a58](https://github.com/videojs/video.js/commit/8d80a58))
+* Add a version class to the player ([#4320](https://github.com/videojs/video.js/issues/4320)) ([ae423df](https://github.com/videojs/video.js/commit/ae423df))
+* Add getVideoPlaybackQuality API ([#4338](https://github.com/videojs/video.js/issues/4338)) ([483e5a2](https://github.com/videojs/video.js/commit/483e5a2))
+* deprecate firstplay event ([#4353](https://github.com/videojs/video.js/issues/4353)) ([35df351](https://github.com/videojs/video.js/commit/35df351))
+* remove playbackRate blacklist for recent Android Chrome ([#4321](https://github.com/videojs/video.js/issues/4321)) ([da0f1ee](https://github.com/videojs/video.js/commit/da0f1ee))
+
+### Bug Fixes
+
+* **package:** update global to version 4.3.2 ([#4291](https://github.com/videojs/video.js/issues/4291)) ([b5c60f3](https://github.com/videojs/video.js/commit/b5c60f3))
+* only disable user-selection on sliders ([#4354](https://github.com/videojs/video.js/issues/4354)) ([cb6005e](https://github.com/videojs/video.js/commit/cb6005e))
+* Only update text track mode if changed ([#4298](https://github.com/videojs/video.js/issues/4298)) ([3087830](https://github.com/videojs/video.js/commit/3087830))
+* prevent dupe events on enabled ClickableComponents ([#4316](https://github.com/videojs/video.js/issues/4316)) ([03bab83](https://github.com/videojs/video.js/commit/03bab83)), closes [#4312](https://github.com/videojs/video.js/issues/4312)
+* TextTrackButton on Safari and iOS ([#4350](https://github.com/videojs/video.js/issues/4350)) ([3dcfa95](https://github.com/videojs/video.js/commit/3dcfa95))
+
+### Chores
+
+* Fix examples and docs and some links ([#4279](https://github.com/videojs/video.js/issues/4279)) ([f773c47](https://github.com/videojs/video.js/commit/f773c47))
+* typo soruce -> source ([#4307](https://github.com/videojs/video.js/issues/4307)) ([da1d861](https://github.com/videojs/video.js/commit/da1d861))
+
+### Documentation
+
+* **react-guide:** Use a React component as a VJS component ([#4287](https://github.com/videojs/video.js/issues/4287)) ([cff2e50](https://github.com/videojs/video.js/commit/cff2e50))
+
+<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)
+
+### Features
+
+* Show big play button on pause if specified ([#3892](https://github.com/videojs/video.js/issues/3892)) ([b547214](https://github.com/videojs/video.js/commit/b547214))
+
+### Bug Fixes
+
+* give techs a name ([#3934](https://github.com/videojs/video.js/issues/3934)) ([94fd5c1](https://github.com/videojs/video.js/commit/94fd5c1)), closes [#1786](https://github.com/videojs/video.js/issues/1786)
+* Pause player before seeking in seek bar mousedown ([#3921](https://github.com/videojs/video.js/issues/3921)) ([2ceed0a](https://github.com/videojs/video.js/commit/2ceed0a)), closes [#3839](https://github.com/videojs/video.js/issues/3839) [#3886](https://github.com/videojs/video.js/issues/3886)
+* player el ingest when parent doesn't have `hasAttribute` method ([#3929](https://github.com/videojs/video.js/issues/3929)) ([bbe8253](https://github.com/videojs/video.js/commit/bbe8253))
+* showing custom poster with controls disabled ([#3933](https://github.com/videojs/video.js/issues/3933)) ([305e5ea](https://github.com/videojs/video.js/commit/305e5ea)), closes [#1625](https://github.com/videojs/video.js/issues/1625)
+
+### Chores
+
+* better dev experience ([#3896](https://github.com/videojs/video.js/issues/3896)) ([9ec5587](https://github.com/videojs/video.js/commit/9ec5587))
+* don't run tests on travis if only docs were changed ([#3908](https://github.com/videojs/video.js/issues/3908)) ([c239bd5](https://github.com/videojs/video.js/commit/c239bd5))
+* **development:** fix `npm start` file watching ([#3922](https://github.com/videojs/video.js/issues/3922)) ([02da697](https://github.com/videojs/video.js/commit/02da697))
+* **release:** add es5 folder to the tagged commit ([#3913](https://github.com/videojs/video.js/issues/3913)) ([d120ea2](https://github.com/videojs/video.js/commit/d120ea2))
+* **sass:** upgrade to latest version of grunt-sass ([#3897](https://github.com/videojs/video.js/issues/3897)) ([83d453b](https://github.com/videojs/video.js/commit/83d453b)), closes [#3692](https://github.com/videojs/video.js/issues/3692)
+* fix typo in collaborator guide ([#3931](https://github.com/videojs/video.js/issues/3931)) ([f35de1c](https://github.com/videojs/video.js/commit/f35de1c))
+
+### Code Refactoring
+
+* require `videojs-vtt.js` via require rather than concat ([#3919](https://github.com/videojs/video.js/issues/3919)) ([d290db1](https://github.com/videojs/video.js/commit/d290db1))
+
+### Documentation
+
+* **faq:** add a question about autoplay ([#3898](https://github.com/videojs/video.js/issues/3898)) ([e5a240a](https://github.com/videojs/video.js/commit/e5a240a))
+* **faq:** add FAQ question about RTMP url ([#3899](https://github.com/videojs/video.js/issues/3899)) ([9c74116](https://github.com/videojs/video.js/commit/9c74116))
+* **troubleshooting:** updates to troubleshooting doc ([#3912](https://github.com/videojs/video.js/issues/3912)) ([0ce7cd4](https://github.com/videojs/video.js/commit/0ce7cd4))
+
+<a name="5.15.1"></a>
+## [5.15.1](https://github.com/videojs/video.js/compare/v5.15.0...v5.15.1) (2016-12-23)
+
+### Bug Fixes
+
+* extra warn logs on already initialized player references ([#3888](https://github.com/videojs/video.js/issues/3888)) ([b7c384e](https://github.com/videojs/video.js/commit/b7c384e))
+* Support require()-ing video.js ([#3889](https://github.com/videojs/video.js/issues/3889)) ([ac0b03f](https://github.com/videojs/video.js/commit/ac0b03f)), closes [#3869](https://github.com/videojs/video.js/issues/3869)
+
+<a name="5.15.0"></a>
+# [5.15.0](https://github.com/videojs/video.js/compare/v5.14.1...v5.15.0) (2016-12-22)
+
+### Features
+
+* **player:** ingest a player div for videojs ([#3856](https://github.com/videojs/video.js/issues/3856)) ([74530d8](https://github.com/videojs/video.js/commit/74530d8))
+* deprecate the use of `starttime` in player.js ([#3838](https://github.com/videojs/video.js/issues/3838)) ([22cf3dd](https://github.com/videojs/video.js/commit/22cf3dd))
+
+### Bug Fixes
+
+* **html5:** (un)patchCanPlayType could set native canPlayType to null ([#3863](https://github.com/videojs/video.js/issues/3863)) ([559297a](https://github.com/videojs/video.js/commit/559297a))
+* **seeking:** don't always pause in mouse down ([#3886](https://github.com/videojs/video.js/issues/3886)) ([e92db4f](https://github.com/videojs/video.js/commit/e92db4f)), closes [#3839](https://github.com/videojs/video.js/issues/3839)
+* don't emit tap events on tech when using native controls ([#3873](https://github.com/videojs/video.js/issues/3873)) ([42507f8](https://github.com/videojs/video.js/commit/42507f8))
+* remote text track deprecation warnings ([#3864](https://github.com/videojs/video.js/issues/3864)) ([a7ffa34](https://github.com/videojs/video.js/commit/a7ffa34))
+* remove vjs-seeking on src change ([#3846](https://github.com/videojs/video.js/issues/3846)) ([83cbeec](https://github.com/videojs/video.js/commit/83cbeec)), closes [#3765](https://github.com/videojs/video.js/issues/3765)
+
+### Chores
+
+* **docs:** Documentation Linting and TOC generation ([#3841](https://github.com/videojs/video.js/issues/3841)) ([0493f54](https://github.com/videojs/video.js/commit/0493f54))
+* **faq:** move FAQ and troubleshooting guide to docs/ ([#3883](https://github.com/videojs/video.js/issues/3883)) ([26789e7](https://github.com/videojs/video.js/commit/26789e7))
+* **package:** update dependencies (enable Greenkeeper) 🌴 ([#3777](https://github.com/videojs/video.js/issues/3777)) ([d20e9ce](https://github.com/videojs/video.js/commit/d20e9ce))
+* **videojs-standard:** update to version 6.0.1 ([#3884](https://github.com/videojs/video.js/issues/3884)) ([eb389c5](https://github.com/videojs/video.js/commit/eb389c5))
+
+### Documentation
+
+* move examples out of code into docs ([642ad4b](https://github.com/videojs/video.js/commit/642ad4b))
+
+### Tests
+
+* **hooks:** move vjs hooks QUnit module into separate file ([#3862](https://github.com/videojs/video.js/issues/3862)) ([87cd26d](https://github.com/videojs/video.js/commit/87cd26d))
+* **hooks:** remove errors logged in tests ([#3865](https://github.com/videojs/video.js/issues/3865)) ([3f724f9](https://github.com/videojs/video.js/commit/3f724f9))
+
+<a name="5.14.1"></a>
+## [5.14.1](https://github.com/videojs/video.js/compare/v5.14.0...v5.14.1) (2016-12-05)
+
+### Bug Fixes
+
+* **throttle:** Fix error in Fn.throttle that broke MouseTimeDisplay ([#3833](https://github.com/videojs/video.js/issues/3833)) ([014c6b8](https://github.com/videojs/video.js/commit/014c6b8))
+
+### Tests
+
+* add Edge to browserstack tests ([#3834](https://github.com/videojs/video.js/issues/3834)) ([5ec46b0](https://github.com/videojs/video.js/commit/5ec46b0))
+* **events:** silence error logging in tests ([#3835](https://github.com/videojs/video.js/issues/3835)) ([214e01c](https://github.com/videojs/video.js/commit/214e01c))
+
 <a name="5.14.0"></a>
 # [5.14.0](https://github.com/videojs/video.js/compare/v5.13.2...v5.14.0) (2016-12-02)
 

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

@@ -1,32 +1,28 @@
 # Collaborator Guide
 
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-**Table of Contents**
+## Table of Contents
 
-- [Issues and Pull Requests](#issues-and-pull-requests)
-- [Accepting changes](#accepting-changes)
-  - [Involving the TSC](#involving-the-tsc)
-- [Landing a PR](#landing-a-pr)
-  - [Landing a PR manually](#landing-a-pr-manually)
-    - [Landing a PR manually with several changes](#landing-a-pr-manually-with-several-changes)
-    - [I just made a mistake](#i-just-made-a-mistake)
-      - [I accidentally pushed a broken commit or incorrect commit to master](#i-accidentally-pushed-a-broken-commit-or-incorrect-commit-to-master)
-      - [I lost changes](#i-lost-changes)
-      - [I accidentally committed a broken change to master](#i-accidentally-committed-a-broken-change-to-master)
-- [video.js releases](#videojs-releases)
-  - [Getting dependencies](#getting-dependencies)
-    - [Install contrib](#install-contrib)
-    - [npm access](#npm-access)
-    - [GitHub personal access token](#github-personal-access-token)
-  - [Doing a release](#doing-a-release)
-- [Doc credit](#doc-credit)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+* [Issues and Pull Requests](#issues-and-pull-requests)
+* [Accepting changes](#accepting-changes)
+  * [Involving the TSC](#involving-the-tsc)
+* [Landing a PR](#landing-a-pr)
+  * [Landing a PR manually](#landing-a-pr-manually)
+    * [Landing a PR manually with several changes](#landing-a-pr-manually-with-several-changes)
+    * [I just made a mistake](#i-just-made-a-mistake)
+      * [I accidentally pushed a broken commit or incorrect commit to master](#i-accidentally-pushed-a-broken-commit-or-incorrect-commit-to-master)
+      * [I lost changes](#i-lost-changes)
+      * [I accidentally committed a broken change to master](#i-accidentally-committed-a-broken-change-to-master)
+* [video.js releases](#videojs-releases)
+  * [Getting dependencies](#getting-dependencies)
+    * [Install contrib](#install-contrib)
+    * [npm access](#npm-access)
+    * [GitHub personal access token](#github-personal-access-token)
+  * [Doing a release](#doing-a-release)
+* [Doc credit](#doc-credit)
 
 ## Issues and Pull Requests
 
-Full courtesey should always be shown in video.js projects.
+Full courtesy should always be shown in video.js projects.
 
 Collaborators may manage issues they feel qualified to handle, being mindful of our guidelines.
 
@@ -77,7 +73,7 @@ The footer should contain things like whether this is a breaking change or what
 
 Here's an example:
 
-```
+```commit
 fix(html5): a regression with html5 tech
 
 This is where you'd explain what the regression is.
@@ -90,87 +86,91 @@ Fixes #123
 _Optional:_ ensure you're not in a weird rebase or merge state:
 
 ```sh
-$ git am --abort
-$ git rebase --abort
+git am --abort
+git rebase --abort
 ```
 
 Checkout and update the master branch:
 
 ```sh
-$ git checkout master
-$ git remote update
-$ git rebase upstream/master
+git checkout master
+git remote update
+git rebase upstream/master
 ```
 
 Check out the PR:
 
 ```sh
-$ git fetch upstream pull/{{PR Number}}/head:{{name of branch}}
-$ git checkout -t {{name of branch}}
+git fetch upstream pull/{{PR Number}}/head:{{name of branch}}
+git checkout -t {{name of branch}}
 ```
 
 > For example:
+>
 > ```sh
-> $ git fetch upstream pull/123/head:gkatsev-html5-fix
-> $ git checkout -t gkatsev-html5-fix
+> git fetch upstream pull/123/head:gkatsev-html5-fix
+> git checkout -t gkatsev-html5-fix
 > ```
 
 _Optional:_ If necessary, rebase against master. If you have multiple features in the PR, [landing a PR manually with several changes](#landing-a-pr-manually-with-several-changes)
 
 ```sh
-$ git rebase master
+git rebase master
 ```
 
 Fix up any issues that arise from the rebase, change back to the master branch and squash merge:
 
 ```sh
-$ git checkout master
-$ git merge --squash --no-commit gkatsev-html5-fix
+git checkout master
+git merge --squash --no-commit gkatsev-html5-fix
 ```
 
 The `--no-commit` tells git not to make a commit on your behalf. It does stage everything for you, so, you can instead it:
 
 ```sh
-$ git diff --cached
+git diff --cached
 ```
 
 Now get the author from the original commit:
 
 ```sh
-$ git log -n 1 --pretty=short gkatsev-html5-fix
+git log -n 1 --pretty=short gkatsev-html5-fix
 ```
-Which shows:
-```
-commit 433c58224f5be34480c8e067ca6c5406ba1c1e9c
-Author: Gary Katsevman <git@gkatsev.com>
 
-    Update TOC
+Which shows:
+
+```txt
+  commit 433c58224f5be34480c8e067ca6c5406ba1c1e9c
+  Author: Gary Katsevman <git@gkatsev.com>
+
+      Update TOC
 ```
 
 Now you can commit the change the change with the author, following our commit guidelines
 
 ```sh
-$ git commit --author "Gary Katsevman <git@gkatsev.com>"
+git commit --author "Gary Katsevman <git@gkatsev.com>"
 ```
 
 Now that it's committed, push to master
 
 ```sh
-$ git push upstream master
+git push upstream master
 ```
 
 Congratulate yourself for a job well done and the contributor for having his change landed in master.
 
 #### Landing a PR manually with several changes
+
 Follow the same steps as before but when you rebase against master, you want to do an interactive rebase and then squash the changes into just a few commits.
 
 ```sh
-$ git rebase -i master
+git rebase -i master
 ```
 
 This will give you an output like the following:
 
-```
+```txt
 pick b4dc15d Update CONTRIBUTING.md with latest info
 pick 8592149 Add Dev certificate of origin
 pick 259dee6 Add grunt and doctoc npm scripts
@@ -201,10 +201,10 @@ pick 433c582 Update TOC
 Replace `pick` to `fixup` or `edit` depending on how you want the output to look. You can also re-order the commits, if necessary.
 
 > `fixup` will squash the commit it's infront of up into the commit above it
-
+>
 > `edit` will allow you to edit the commit message before continuing
 
-```
+```txt
 edit b4dc15d Update CONTRIBUTING.md with latest info
 fixup 8592149 Add Dev certificate of origin
 fixup f12af12 Add conventional-changelog-videojs link
@@ -216,17 +216,18 @@ edit 259dee6 Add grunt and doctoc npm scripts
 When you get to the edit commits, git will give more information, but you'd want to run ammend the current commit while following our commit guidelines
 
 ```sh
-$ git commit --amend
+git commit --amend
 ```
 
 After going through and making the commits you want, you want to change back to master and then rebase the branch onto master so we get a clean history
 
 ```sh
-$ git rebase gkatsev-html5-fix
+git rebase gkatsev-html5-fix
 ```
 
 This will put our two commits into master:
-```
+
+```txt
 b4dc15d chore(contributing.md): Update CONTRIBUTING.md with latest info <Gary Katsevman>
 259dee6 chore(package.json): Add grunt and doctoc npm scripts <Gary Katsevman>
 9e20386 v5.12.6 <Gary Katsevman>
@@ -253,27 +254,21 @@ This is a great time to discover that something is broken. Because it hasn't bee
 To do so, just reset the branch against master.
 
 ```sh
-$ git reset --hard upstream/master
+git reset --hard upstream/master
 ```
 
 ## video.js releases
 
-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.
+Releasing video.js is partially automated through various 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.
 
 ### Getting dependencies
 
-#### Install contrib
-
-You can install it globally
-
-```sh
-npm i -g contrib/contrib
-```
-
 #### npm access
 
 To see who currently has access run this:
@@ -283,6 +278,7 @@ npm owner ls video.js
 ```
 
 If you are a core committer, you can request access to npm from one of the current owners.
+Access is managed via an [npm organization][npm org] for [Video.js][vjs npm].
 
 #### GitHub personal access token
 
@@ -290,29 +286,163 @@ This is used to make a GitHub release on videojs. You can get a token from the [
 
 After generating one, make sure to keep it safe because GitHub will not show the token for you again. A good place to save it is Lastpass Secure Notes.
 
+### Deciding what type of version release
+
+Since we follow the [conventional changelog conventions][conventions],
+all commits are prepended with a type, most commonly `feat` and `fix`.
+If all the commits are fix or other types such as `test` or `chore`, then the release will be a `patch` release.
+If there's even one `feat`, the release will be a `minor` release.
+If any commit has a `BREAKING CHANGE` footer, then the release will be a `major` release.
+Most common releases will be either `patch` or `minor`.
+
 ### Doing a release
 
-To do a release, check out the master branch
+It is also recommended you have a clean clone of Video.js for each release line you want to release.
+That means having a folder for master/v6 and one for 5.x.
+This is because 5.x and 6.x have different versions expecations for release process and have different dependencies.
+Plus, during development you could end up with a dirty repo, so, it just usually easier if you have a clean release repo.
 
 ```sh
-$ git checkout master
+# for v6
+git clone git@github.com:videojs/video.js.git videojs-6-release
+# for v5
+git clone git@github.com:videojs/video.js.git videojs-5-release
 ```
 
-Then run the contrib command to do the next release. Don't forget to provide your GitHub token so the GitHub release goes through.
+#### Video.js 6
+
+Make sure go to the master branch and grab the latest updates.
 
 ```sh
-VJS_GITHUB_USER=gkatsev VJS_GITHUB_TOKEN=my-personal-access-token contrib release next patch
+git checkout master
+git pull origin master
 ```
 
-This makes a patch release, you can also do a `minor` and a `major` release.
+At this point, you should run `npm install` because dependencies may have changed.
+
+Then, it's mostly a standard npm package release process with running `npm version`, followed by an `npm publish`.
+
+```sh
+npm version {major|minor|patch}
+```
+
+Depending on the commits that have been merged, you can choose from `major`, `minor`, or `patch` as the versioning values.
+See [deciding what type of version release section](#deciding-what-type-of-version-release).
+
+Optionally, you can run `git show` now to verify that the version update and CHANGELOG automation worked as expected.
+
+Afterwards, you want to push the commit and the tag to the repo.
+It's necessary to do this before running `npm publish` because our GitHub release automation
+relies on the commit being available on GitHub.
+
+```sh
+git push --tags origin master
+```
+
+Finally, run `npm publish` with an appropriate tag. Don't forget to supply your token.
+
+```sh
+VJS_GITHUB_USER=gkatsev VJS_GITHUB_TOKEN=my-personal-access-token npm publish --tag next
+```
 
 After it's done, verify that the GitHub release has the correct changelog output.
+This is to make sure that the CHANGELOG didn't get garbled and isn't missing pieces.
+
+If the GitHub release did not work correctly, such as if the GitHub token was not provided,
+you can run it manually:
+
+```sh
+VJS_GITHUB_USER=gkatsev VJS_GITHUB_TOKEN=123 node build/gh-release.js --prelease
+```
+
+#### Video.js 5
+
+Make sure to go to the 5.x branch and grab the latest updates.
+
+```sh
+git checkout 5.x
+git pull origin 5.x
+```
+
+> *Note:* you probably need to delete v6 tags due to the way that the our CHANGELOG lib works.
+>
+> You can run this to delete them:
+> ```sh
+> git tag | grep '^v6' | xargs git tag -d
+> ```
+> This will find all tags that start with `^v6` and delete them.
+
+At this point, you should run `npm install` because dependencies may have changed.
+
+Then, we have a script that automates most of the steps for publishing. It's a little trickier than publishing v6.
+
+##### Edit git-semver-tags
+
+You'll need to edit `git-semver-tags` to support our usage of tags that are not part of the branch.
+In the file `node_modules/conventional-changelog-cli/node_modules/conventional-changelog/node_modules/conventional-changelog-core/node_modules/git-semver-tags/index.js`, edit the line that says sets the `cmd` to be:
+```js
+var cmd = 'git log --all --date-order --decorate --no-color';
+```
+
+#### And now for the release
+
+After getting rid of the tags and getting the latest updates, you can just run the release script:
+
+```sh
+VJS_GITHUB_USER=gkatsev VJS_GITHUB_TOKEN=123 ./build/bin/release-next.sh
+```
+
+It will prompt you for a version change type, so, input `patch` or `minor` or `major`.
+See [deciding what type of version release section](#deciding-what-type-of-version-release).
+
+When it's done building everything, it'll show you the commit that's made via the default pager (i.e., less).
+At this point you can verify that things look normal rather than, for example, missing all the CSS.
+
+After exiting the pager, it'll make sure you want to continue with publishing.
+
+It will automatically release it as a `next-5` tag on npm.
+
+Then push the local changes up:
+
+```sh
+git push --tags origin 5.x
+```
+
+Also, you'll need to copy the CHANGELOG for this version and manually edit the GitHub release to include it.
+The current release's CHANGELOG could be copied from the [raw CHANGELOG.md file][raw chg] (or locally from the markdown file)
+and then pasted into the correct [GitHub release](https://github.com/videojs/video.js/releases).
+
+### Deploy as a patch to the CDN
+
+Follow the steps on the [CDN repo][] for the CDN release process.
+If it's a `next` or `next-5` release, only publish the patch version to the CDN.
+
+When the version gets promoted to `latest` or `latest-5`, the corresponding `minor` or `latest` version should be published to the CDN.
+
+### Announcement
+
+An announcement should automatically make it's way to #announcements channel on [slack][], it uses IFTTT and might take a while.
+
+You can also post it to twitter or ask someone (like @gkatsev) to post on your behalf.
+
+If it's a large enough release, consider writing a blog post as well.
 
 ## Doc credit
 
 This collaborator guide was heavily inspired by [node.js's guide](https://github.com/nodejs/node/blob/master/COLLABORATOR_GUIDE.md)
 
-
 [issue template]: /.github/ISSUE_TEMPLATE.md
+
 [pr template]: /.github/PULL_REQUEST_TEMPLATE.md
+
 [conventions]: https://github.com/videojs/conventional-changelog-videojs/blob/master/convention.md
+
+[vjs npm]: http://npmjs.com/org/videojs
+
+[npm org]: https://docs.npmjs.com/misc/orgs
+
+[slack]: http://slack.videojs.com
+
+[CDN repo]: https://github.com/videojs/cdn
+
+[raw chg]: https://raw.githubusercontent.com/videojs/video.js/5.x/CHANGELOG.md

CONTRIBUTING.md

@@ -2,56 +2,53 @@
 
 So you want to help out? Great! There's a number of ways you can get involved.
 
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-**Table of Contents**
+## Table of Contents
 
-- [Other repositories where issues could be filed](#other-repositories-where-issues-could-be-filed)
-- [Filing issues](#filing-issues)
-  - [Reporting a Bug](#reporting-a-bug)
-  - [Requesting a Feature](#requesting-a-feature)
-- [Contributing code](#contributing-code)
-  - [Building video.js locally](#building-videojs-locally)
-    - [Forking and cloning the repository](#forking-and-cloning-the-repository)
-    - [Installing local dependencies](#installing-local-dependencies)
-    - [Running tests](#running-tests)
-    - [Building videojs](#building-videojs)
-    - [Testing Locally](#testing-locally)
-    - [Sandbox test directory](#sandbox-test-directory)
-    - [Running a local web server](#running-a-local-web-server)
-    - [Watching source and test changes](#watching-source-and-test-changes)
-  - [Making Changes](#making-changes)
-    - [Step 1: Verify](#step-1-verify)
-    - [Step 2: Update remote](#step-2-update-remote)
-    - [Step 3: Branch](#step-3-branch)
-    - [Step 4: Commit](#step-4-commit)
-    - [Step 5: Test](#step-5-test)
-    - [Step 6: Push](#step-6-push)
-  - [Code Style Guide](#code-style-guide)
-- [Developer's Certificate of Origin 1.1](#developers-certificate-of-origin-11)
-- [Doc Credit](#doc-credit)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+* [Other repositories where issues could be filed](#other-repositories-where-issues-could-be-filed)
+* [Filing issues](#filing-issues)
+  * [Reporting a Bug](#reporting-a-bug)
+  * [Requesting a Feature](#requesting-a-feature)
+* [Contributing code](#contributing-code)
+  * [Building video.js locally](#building-videojs-locally)
+    * [Forking and cloning the repository](#forking-and-cloning-the-repository)
+    * [Installing local dependencies](#installing-local-dependencies)
+    * [Running tests](#running-tests)
+    * [Building videojs](#building-videojs)
+    * [Testing Locally](#testing-locally)
+    * [Sandbox test directory](#sandbox-test-directory)
+    * [Running a local web server](#running-a-local-web-server)
+    * [Watching source and test changes](#watching-source-and-test-changes)
+  * [Making Changes](#making-changes)
+    * [Step 1: Verify](#step-1-verify)
+    * [Step 2: Update remote](#step-2-update-remote)
+    * [Step 3: Branch](#step-3-branch)
+    * [Step 4: Commit](#step-4-commit)
+    * [Step 5: Test](#step-5-test)
+    * [Step 6: Push](#step-6-push)
+  * [Code Style Guide](#code-style-guide)
+* [Developer's Certificate of Origin 1.1](#developers-certificate-of-origin-11)
+* [Doc Credit](#doc-credit)
 
 ## Other repositories where issues could be filed
 
 There's also other Video.js projects where you can help. (check the [video.js org](https://github.com/videojs) for an up-to-date list of projects)
 
-  * [Videojs.com](https://github.com/videojs/videojs.com)
-  * [Video.js flash player](https://github.com/videojs/videojs-flash)
-  * [HLS](https://github.com/videojs/videojs-contrib-hls)
-  * [DASH](https://github.com/videojs/videojs-contrib-dash)
-  * [Youtube Tech](https://github.com/videojs/videojs-youtube)
-  * [Vimeo Tech](https://github.com/videojs/videojs-vimeo)
-  * [Ads](https://github.com/videojs/videojs-contrib-ads)
-  * [Plugin generator](https://github.com/videojs/generator-videojs-plugin)
-  * [Linter][linter]
+* [Videojs.com](https://github.com/videojs/videojs.com)
+* [Video.js flash player](https://github.com/videojs/videojs-flash)
+* [HLS](https://github.com/videojs/videojs-contrib-hls)
+* [DASH](https://github.com/videojs/videojs-contrib-dash)
+* [Youtube Tech](https://github.com/videojs/videojs-youtube)
+* [Vimeo Tech](https://github.com/videojs/videojs-vimeo)
+* [Ads](https://github.com/videojs/videojs-contrib-ads)
+* [Plugin generator](https://github.com/videojs/generator-videojs-plugin)
+* [Linter][linter]
 
 ## Filing issues
 
 [GitHub Issues](https://github.com/videojs/video.js/issues) are used for all discussions around the codebase, including **bugs**, **features**, and other **enhancements**.
 
-When filling out an issue, make sure to fill out the questions in the 
+When filling out an issue, make sure to fill out the questions in the
+
 ### Reporting a Bug
 
 **A bug is a demonstrable problem** that is caused by the code in the repository. Good bug reports are extremely helpful. Thank You!
@@ -59,16 +56,11 @@ When filling out an issue, make sure to fill out the questions in the
 Guidelines for bug reports:
 
 1. If your issue is with a particular video.js plugin or subproject, please open an issue against that project. See [list of some potential other projects above](#other-repositories-where-issues-could-be-filed)
-
-1. Use the [GitHub issue search](https://github.com/videojs/video.js/issues) &mdash; check if the issue has already been reported.
-
-1. Check if the issue has already been fixed &mdash; try to reproduce it using the latest `master` branch in the repository.
-
-1. Isolate the problem &mdash; **create a [reduced test case](https://css-tricks.com/reduced-test-cases/)** with a live example. You can possibly use [this JSBin example](http://jsbin.com/axedog/edit) as a starting point -- don't forget to update it to the videojs version you use.
-
+1. Use the [GitHub issue search](https://github.com/videojs/video.js/issues) — check if the issue has already been reported.
+1. Check if the issue has already been fixed — try to reproduce it using the latest `master` branch in the repository.
+1. Isolate the problem — **create a [reduced test case](https://css-tricks.com/reduced-test-cases/)** with a live example. You can possibly use [this JSBin example](http://jsbin.com/axedog/edit) as a starting point -- don't forget to update it to the videojs version you use.
 1. Answer all questions in the [issue template][]. The questions in the issue template are designed to try and provide the maintainers with as much information possible to minimize back-and-forth to get the issue resolved.
 
-
 A good bug report should be as detailed as possible, so that others won't have to follow up for the essential details.
 
 **[File a bug report](https://github.com/videojs/video.js/issues/new)**
@@ -76,12 +68,9 @@ A good bug report should be as detailed as possible, so that others won't have t
 ### Requesting a Feature
 
 1. [Check the plugin list](http://videojs.com/plugins/) for any plugins that may already support the feature.
-
-2. [Search the issues](https://github.com/videojs/video.js/issues) for any previous requests for the same feature, and give a thumbs up or +1 on existing requests.
-
-2. If no previous requests exist, create a new issue. Please be as clear as possible about why the feautre is needed and the intended use case.
-
-3. Once again, be as details as possible and follow the [issue template][]
+1. [Search the issues](https://github.com/videojs/video.js/issues) for any previous requests for the same feature, and give a thumbs up or +1 on existing requests.
+1. If no previous requests exist, create a new issue. Please be as clear as possible about why the feautre is needed and the intended use case.
+1. Once again, be as details as possible and follow the [issue template][]
 
 **[Request a feature](https://github.com/videojs/video.js/issues/new)**
 
@@ -89,17 +78,18 @@ A good bug report should be as detailed as possible, so that others won't have t
 
 To contibute code you'll need to be able to build a copy of Video.js and run tests locally. There are a few requirements before getting started.
 
-- Node.js
-Video.js uses Node for build and test automation. Node is available for Windows, Mac OS X, Linux, and SunOS, as well as source code if that doesn't scare you. [Download and install Node.js](http://nodejs.org/download/)
+* Node.js
+  Video.js uses Node for build and test automation. Node is available for Windows, Mac OS X, Linux, and SunOS, as well as source code if that doesn't scare you. [Download and install Node.js](http://nodejs.org/download/)
+
+* `grunt-cli`
+  Optionally, install `grunt-cli` globally to use grunt directly. It can always be run via an npm script:
 
-- `grunt-cli`
-Optionally, install `grunt-cli` globally to use grunt directly. It can always be run via an npm script:
 ```sh
-$ npm run grunt
+npm run grunt
 ```
 
 ```sh
-$ npm install -g grunt-cli
+npm install -g grunt-cli
 ```
 
 Depending on how you have node and npm set up, you may need to run the global install (`-g`) as a superuser by prepending `sudo`.
@@ -113,27 +103,27 @@ First, [fork](http://help.github.com/fork-a-repo/) the video.js git repository.
 Clone your fork of the repo into your code directory
 
 ```sh
-$ git clone https://github.com/<your-username>/video.js.git
+git clone https://github.com/<your-username>/video.js.git
 ```
 
 Navigate to the newly cloned directory
 
 ```sh
-$ cd video.js
+cd video.js
 ```
 
 Assign the original repo to a remote called "upstream"
 
-```
+```sh
 git remote add upstream https://github.com/videojs/video.js.git
 ```
 
 > In the future, if you want to pull in updates to video.js that happened after you cloned the main repo, you can run:
 >
 > ```sh
-> $ git remote update
-> $ git checkout master
-> $ git pull upstream master
+> git remote update
+> git checkout master
+> git pull upstream master
 > ```
 
 #### Installing local dependencies
@@ -141,7 +131,7 @@ git remote add upstream https://github.com/videojs/video.js.git
 Install the required node.js modules using node package manager
 
 ```sh
-$ npm install
+npm install
 ```
 
 > A note to Windows developers: If you run npm commands, and you find that your command prompt colors have suddenly reversed, you can configure npm to set color to false to prevent this from happening.
@@ -150,25 +140,28 @@ $ 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
+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
 
 To build video.js, simply run
 
 ```sh
-$ npm run build
+npm run build
 ```
 
 This outputs an `es5/` and `dist/` folder. The `es5/` folder is used by bundling tools like browserify and webpack to package video.js into projects. The `dist/` folder has pre-compiled versions of video.js, including a minified version and the CSS file. This file can be included in page via a `<script></script>` tag.
 
-
 #### Testing Locally
 
 Besides running automated tests, you often want to run video.js manually and play around with things as you're developing. A few things are provided to make it easier.
@@ -178,7 +171,7 @@ Besides running automated tests, you often want to run video.js manually and pla
 There's a sandbox directory where you can add any file and it won't get tracked in git. To start you can copy the example index file.
 
 ```sh
-$ cp sandbox/index.html.example sandbox/index.html
+cp sandbox/index.html.example sandbox/index.html
 ```
 
 See [the following section](#running-a-local-web-server) for how to open the page in a browser.
@@ -193,22 +186,27 @@ This ties in nicely with the sandbox directory. You can always open the `sandbox
 To run the local webserver, you can run it in a couple of ways.
 
 ```sh
-$ grunt connect
-$ open http://localhost:9999/sandbox/index.html
+grunt connect
+open http://localhost:9999/sandbox/index.html
 ```
+
 or
+
 ```sh
-$ npm start
+npm start
 ```
-The latter does some extra work which will be described in the [next section]
+
+The latter does some extra work which will be described in the next section.
 
 #### Watching source and test changes
 
 As you're developing, you want the build to re-run and update itself, and potentially re-run the tests. In addition, you want to launch a local web-server that you can open the `sandbox` directory in.
 To do so, you just need to run
+
 ```sh
-$ npm start
+npm start
 ```
+
 This sets up the local webserver using connect and then watches source files, test files, and CSS files for you and rebuilds things as they happen.
 
 ### Making Changes
@@ -222,9 +220,9 @@ Whether you're adding something new, making something better, or fixing a bug, y
 Before starting work, you want to update your local repository to have all the latest changes.
 
 ```sh
-$ git remote update
-$ git checkout master
-$ git rebase upstream/master
+git remote update
+git checkout master
+git rebase upstream/master
 ```
 
 #### Step 3: Branch
@@ -232,10 +230,11 @@ $ git rebase upstream/master
 You want to do your work in a separate branch.
 
 ```sh
-$ git checkout -b my-branch
+git checkout -b my-branch
 ```
 
 #### Step 4: Commit
+
 Commit changes as you go. Write thorough descriptions of your changes in your commit messages.
 For more information see our [conventional changelog guidelines for video.js](https://github.com/videojs/conventional-changelog-videojs/blob/master/convention.md)
 Follow these guidelines:
@@ -245,13 +244,16 @@ Follow these guidelines:
 1. A footer can be added if this fixes a particular issue on GitHub.
 
 ```sh
-$ git add src/js/player.js
-$ git commit
+git add src/js/player.js
+git commit
 ```
 
-An example commit message:
+An example of the first line of a commit message: `fix: changed the footer to correctly display foo`
 
-```
+In the body of the commit message, we can talk about why we made the change. What the change entails.
+Any testing considerations or things to think about when looking at the commit. For Example:
+
+```txt
 fix: one line commit explanation
 
 In the body of the commit message, we can talk about why we made the change. What the change entails.
@@ -264,8 +266,8 @@ Fixes #123. The footer can contain Fixes messages.
 > Make sure that git knows your name and email:
 >
 > ```sh
-> $ git config --global user.name "Random User"
-> $ git config --global user.email "random.user@example.com"
+> git config --global user.name "Random User"
+> git config --global user.email "random.user@example.com"
 > ```
 
 #### Step 5: Test
@@ -274,13 +276,15 @@ Any code change should come with corresponding test changes. Especially bug fixe
 Tests attached to bug fixes should fail before the change and succeed with it.
 
 ```sh
-$ npm test
+npm test
 ```
 
+See [Running tests](#running-tests) for more information.
+
 #### Step 6: Push
 
 ```sh
-$ git push origin my-branch
+git push origin my-branch
 ```
 
 Then go to the [repo page](http://github.com/videojs/video.js) and click the "Pull Request" button and fill out the [pull request template](/.github/PULL_REQUEST_TEMPLATE.md)
@@ -315,8 +319,8 @@ By making a contribution to this project, I certify that:
   maintained indefinitely and may be redistributed consistent with
   this project or the open source license(s) involved.
 
-
 ## Doc Credit
+
 This doc was inspired by some great contribution guide examples including [contribute.md template](https://github.com/contribute-md/contribute-md-template),
 [grunt](https://github.com/gruntjs/grunt/wiki/Contributing),
 [html5 boilerplate](https://github.com/h5bp/html5-boilerplate/blob/master/CONTRIBUTING.md),
@@ -324,4 +328,5 @@ This doc was inspired by some great contribution guide examples including [contr
 and [node.js](https://github.com/nodejs/node/blob/master/CONTRIBUTING.md).
 
 [issue template]: /.github/ISSUE_TEMPLATE.md
+
 [linter]: https://github.com/videojs/standard

README.md

@@ -10,16 +10,23 @@
 
 > 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>`:
 
 ```html
-<link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet">
-<script src="//vjs.zencdn.net/5.11/video.min.js"></script>
+<link href="//vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
+<script src="//vjs.zencdn.net/5.19/video.min.js"></script>
 ```
 
-> For the latest URLs, check out the [Getting Started][getting-started] page on our website.
+> For the latest version of video.js and URLs to use, check out the [Getting Started][getting-started] page on our website.
 
 Next, using Video.js is as simple as creating a `<video>` element, but with an additional `data-setup` attribute. At a minimum, this attribute must have a value of `'{}'`, but it can include any Video.js [options][options] - just make sure it contains valid JSON!
 
@@ -79,29 +86,50 @@ 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.
 
-
 [browserstack]: https://browserstack.com
-[buildwith]: https://trends.builtwith.com/media/VideoJS
+
+[builtwith]: https://trends.builtwith.com/media/VideoJS
+
 [contributing]: CONTRIBUTING.md
-[contributing-building]: CONTRIBUTING.md#building-your-own-copy-of-videojs
-[contributing-code]: CONTRIBUTING.md#contributing-code
+
 [coveralls-icon]: https://coveralls.io/repos/github/videojs/video.js/badge.svg?branch=master
+
 [coveralls-link]: https://coveralls.io/github/videojs/video.js?branch=master
+
 [docs]: http://docs.videojs.com
+
 [fastly]: http://www.fastly.com/
+
 [getting-started]: http://videojs.com/getting-started/
+
 [license]: LICENSE
+
 [logo]: http://videojs.com/img/logo.png
+
 [npm-icon]: https://nodei.co/npm/video.js.png?downloads=true&downloadRank=true
+
 [npm-link]: https://nodei.co/npm/video.js/
-[options]: docs/options.md
+
+[options]: docs/guides/options.md
+
 [plugins]: http://videojs.com/plugins/
+
 [slack-icon]: http://slack.videojs.com/badge.svg
+
 [slack-link]: http://slack.videojs.com
+
 [travis-icon]: https://travis-ci.org/videojs/video.js.svg?branch=master
+
 [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/assets.js

@@ -0,0 +1,65 @@
+const fs = require('fs');
+const zlib = require('zlib');
+const Promise = require('bluebird');
+const klawSync = require('klaw-sync');
+const filesize = require('filesize');
+const Table = require('cli-table');
+
+const files = klawSync('dist/', {
+  ignore: ['examples', 'lang', 'font', 'ie8', '*.zip', '*.gz'],
+  nodir: true
+});
+
+Promise.all(files.map(gzipAndStat))
+.then(mapFiles)
+.then(function(files) {
+  logTable(files);
+
+  return files;
+})
+.then(cleanup)
+.catch(function(err) {
+  console.error(err.stack);
+});
+
+function cleanup(files) {
+  files.forEach(function(file) {
+    fs.unlinkSync('dist/' + file[0] + '.gz');
+  });
+}
+
+function mapFiles(files) {
+  return files.map(function(file) {
+    const path = file[0].path;
+    const fileStat = file[0].stats;
+    const gzStat = file[1];
+    return [file[0].path.split('dist/')[1], filesize(fileStat.size), filesize(gzStat.size)];
+  });
+}
+
+function gzipAndStat(file) {
+  return new Promise(function(resolve, reject) {
+    const readStream = fs.createReadStream(file.path);
+    const writeStream = fs.createWriteStream(file.path + '.gz');
+    const gzip = zlib.createGzip();
+    readStream.pipe(gzip).pipe(writeStream).on('close', function() {
+      const gzStat = fs.statSync(file.path + '.gz');
+
+      resolve([file, gzStat]);
+    })
+    .on('error', reject);
+  });
+}
+
+function logTable(files) {
+  const table = new Table({
+    head: ['filename', 'size', 'gzipped'],
+    colAligns: ['left', 'right', 'right'],
+    style: {
+      border: ['white']
+    }
+  });
+
+  table.push.apply(table, files);
+  console.log(table.toString());
+}

build/current-changelog.js

@@ -0,0 +1,33 @@
+var unified = require('unified');
+var markdown = require('remark-parse');
+var stringify = require('remark-stringify');
+var fs = require('fs');
+
+module.exports = function() {
+  var processor = unified()
+  .use(markdown, {commonmark: true})
+  .use(stringify);
+
+  var ast = processor.parse(fs.readFileSync('./CHANGELOG.md'));
+
+  var changelog = [];
+  changelog.push(processor.stringify(ast.children[0]));
+
+  // start at 1 so we get the first anchor tag
+  // and can break on the second
+  for (var i = 1; i < ast.children.length; i++) {
+    var item = processor.stringify(ast.children[i]);
+
+    if (/^<a name="/.test(item)) {
+      break;
+    }
+
+    if (/^###/.test(item)) {
+      item = '\n' + item + '\n';
+    }
+
+    changelog.push(item);
+  }
+
+  return changelog.join('\n');
+};

build/docs-only.js

@@ -0,0 +1,19 @@
+import sh from 'shelljs';
+import path from 'path';
+
+
+export default function(commit, commitRange) {
+  const SINGLE_COMMIT = `git diff-tree --no-commit-id --name-only -r ${commit}`;
+  const COMMIT_RANGE = `git diff --name-only ${commitRange}`;
+
+  let command = SINGLE_COMMIT;
+
+  if (commitRange) {
+    command = COMMIT_RANGE
+  }
+
+  const output = sh.exec(command, {async: false, silent: true}).stdout;
+
+  const files = output.split('\n').filter(Boolean);
+  return files.every((file) => file.startsWith('docs') || path.extname(file) === '.md');
+};

build/docs/styles/videojs.css

@@ -0,0 +1,29 @@
+#resizer,
+footer {
+  background-color: #ECEEF1;
+  color: #868688;
+  padding: 3px 10px;
+}
+
+.footer-text {
+  padding: 3px;
+  display: block; 
+}
+
+footer .copyright {
+  float: left;
+}
+
+footer .other-links {
+  margin: 0;
+  padding: 0;
+  float: right;
+}
+
+footer .other-links li {
+  display: inline;
+}
+
+footer .logo {
+  display: none;
+}

build/fix-api-docs.js

@@ -0,0 +1,44 @@
+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: '#'},
+  {find: /(\<h[1-6] id="(?:.*)?)video-js(.*)?"\>/g, replace: '$1videojs$2">'},
+  {find: /(\<h[1-6] id="(?:.*)?)don-t(.*)?"\>/g, replace: '$1dont$2">'},
+  {find: /(\<h[1-6] id="(?:.*)?)node-js(.*)?"\>/g, replace: '$1nodejs$2">'},
+  {find: /(\<h[1-6] id="(?:.*)?)vtt-js(.*)?"\>/g, replace: '$1vttjs$2">'},
+  {find: /(\<h[1-6] id=")-(.*)("\>)/g, replace: '$1$2$3'},
+  {find: /(\<h[1-6] id=")(.*)-("\>)/g, replace: '$1$2$3'},
+  {find: /(\<h[1-6] id=".*)-docs-guides-.*-md("\>)/g, replace: '$1$2'},
+  // replace all children with children-1
+  {find: /\<h3 id="children"\>/g, replace: '<h3 id="children-1">'},
+  // remove the -1 from the first item
+  {find: /\<h3 id="children-1"\>/, replace: '<h3 id="children">'},
+  {find: '<h4 id="nativecontrolsfortouch">', replace: '<h4 id="nativecontrolsfortouch-1">'},
+  {find: '<h3 id="videojs-(audio|video)track">', replace: '<h3 id="videojs$1track">'},
+  {find: '<h3 id="text-tracks">', replace: '<h3 id="text-tracks-1">'},
+  {find: '<h2 id="q-how-can-i-hide-the-links-to-my-video-subtitles-audio-tracks">',
+   replace: '<h2 id="q-how-can-i-hide-the-links-to-my-videosubtitlesaudiotracks">'},
+  {find: '<h3 id="dispose-http-docs-videojs-com-player-html-dispose">',
+   replace: '<h3 id="dispose">'},
+  {find: '<h4 id="effect-on-player-width-and-player-height">',
+   replace: '<h4 id="effect-on-playerwidth-and-playerheight">'},
+  {find: '<h4 id="i-want-to-have-a-single-source-and-dont-care-about-live-adaptive-streaming">',
+   replace: '<h4 id="i-want-to-have-a-single-source-and-dont-care-about-liveadaptive-streaming">'},
+  {find: '<h2 id="api-docs-api">', replace: '<h2 id="api-docs">'},
+  {find: '<h2 id="guides-docs-guides">', replace: '<h2 id="guides">'}
+];
+
+
+replacements.forEach(function(obj) {
+  replace({
+    regex: obj.find,
+    replacement: obj.replace,
+    paths: [apiPath],
+    recursive: true,
+    silent: true
+  });
+});

build/gh-release.js

@@ -0,0 +1,44 @@
+var ghrelease = require('gh-release');
+var currentChangelog = require('./current-changelog.js');
+var safeParse = require('safe-json-parse/tuple');
+var pkg = require('../package.json')
+var minimist = require('minimist');
+
+var args = minimist(process.argv.slice(2), {
+  boolean: ['prerelease'],
+  default: {
+    prerelease: false
+  },
+  alias: {
+    p: 'prerelease'
+  }
+});
+
+var options = {
+  owner: 'videojs',
+  repo: 'video.js',
+  body: currentChangelog(),
+  assets: ['./dist/video-js-'+pkg.version+'.zip'],
+  endpoint: 'https://api.github.com',
+  auth: {
+    username: process.env.VJS_GITHUB_USER,
+    password: process.env.VJS_GITHUB_TOKEN
+  }
+};
+
+var tuple = safeParse(process.env.npm_config_argv);
+var npmargs = tuple[0] ? [] : tuple[1].cooked;
+
+if (args.prerelease || npmargs.some(function(arg) { return /next/.test(arg); })) {
+  options.prerelease = true;
+}
+
+ghrelease(options, function(err, result) {
+  if (err) {
+    console.error('Unable to publish release to github');
+    console.error('err:', err);
+    console.error('result:', result);
+  } else {
+    console.log('Publish release to github!');
+  }
+});

build/grunt.js

@@ -1,6 +1,7 @@
 import {gruntCustomizer, gruntOptionsMaker} from './options-customizer.js';
 import chg from 'chg';
 import npmRun from 'npm-run';
+import isDocsOnly from './docs-only.js';
 
 module.exports = function(grunt) {
   require('time-grunt')(grunt);
@@ -127,9 +128,14 @@ module.exports = function(grunt) {
     },
     dist: {},
     watch: {
-      novtt: {
-        files: ['build/temp/video.js'],
-        tasks: ['concat:novtt']
+      dist: {
+        files: [
+          'build/temp/video.js',
+          'build/temp/alt/video.novtt.js',
+          'build/temp/video-js.css',
+          'build/temp/alt/video-js-cdn.css'
+        ],
+        tasks: ['copy:dist']
       },
       minify: {
         files: ['build/temp/video.js'],
@@ -139,13 +145,9 @@ module.exports = function(grunt) {
         files: ['src/css/**/*'],
         tasks: ['skin']
       },
-      babel: {
-        files: ['src/js/**/*.js'],
-        tasks: ['babel:es5']
-      },
-      jshint: {
-        files: ['src/**/*', 'test/unit/**/*.js', 'Gruntfile.js'],
-        tasks: 'jshint'
+      lang: {
+        files: ['lang/**/*.json'],
+        tasks: ['vjslanguages']
       }
     },
     connect: {
@@ -223,6 +225,7 @@ module.exports = function(grunt) {
       chrome_bs:    { browsers: ['chrome_bs'] },
       firefox_bs:   { browsers: ['firefox_bs'] },
       safari_bs:    { browsers: ['safari_bs'] },
+      edge_bs:      { browsers: ['edge_bs'] },
       ie11_bs:      { browsers: ['ie11_bs'] },
       ie10_bs:      { browsers: ['ie10_bs'] },
       ie9_bs:       { browsers: ['ie9_bs'] },
@@ -264,25 +267,25 @@ module.exports = function(grunt) {
         options: {
           release: 'major'
         },
-        src: ['package.json', 'component.json']
+        src: ['package.json']
       },
       minor: {
         options: {
           release: 'minor'
         },
-        src: ['package.json', 'component.json']
+        src: ['package.json']
       },
       patch: {
         options: {
           release: 'patch'
         },
-        src: ['package.json', 'component.json']
+        src: ['package.json']
       },
       prerelease: {
         options: {
           release: 'prerelease'
         },
-        src: ['package.json', 'component.json']
+        src: ['package.json']
       },
       css: {
         options: {
@@ -319,32 +322,39 @@ module.exports = function(grunt) {
       }
     },
     browserify: {
-      options: browserifyGruntOptions(),
       build: {
+        options: browserifyGruntOptions(),
         files: {
           'build/temp/video.js': ['es5/video.js']
         }
       },
-      dist: {
+      buildnovtt: {
+        options: browserifyGruntOptions({transform: [
+          ['aliasify', {aliases: {'videojs-vtt.js': false}}]
+        ]}),
+        files: {
+          'build/temp/alt/video.novtt.js': ['es5/video.js']
+        }
+      },
+      watch: {
         options: browserifyGruntOptions({
-          transform: [
-            ['browserify-versionify', {
-              placeholder: '../node_modules/videojs-vtt.js/dist/vtt.js',
-              version: 'https://cdn.rawgit.com/gkatsev/vtt.js/vjs-v0.12.1/dist/vtt.min.js'
-            }],
-          ]
+          watch: true,
+          keepAlive: true,
         }),
         files: {
           'build/temp/video.js': ['es5/video.js']
         }
       },
-      watch: {
-        options: {
+      watchnovtt: {
+        options: browserifyGruntOptions({
+          transform: [
+            ['aliasify', {aliases: {'videojs-vtt.js': false}}]
+          ],
           watch: true,
-          keepAlive: true
-        },
+          keepAlive: true,
+        }),
         files: {
-          'build/temp/video.js': ['es5/video.js']
+          'build/temp/alt/video.novtt.js': ['es5/video.js']
         }
       },
       tests: {
@@ -383,14 +393,6 @@ module.exports = function(grunt) {
       options: {
         separator: '\n'
       },
-      novtt: {
-        src: ['build/temp/video.js'],
-        dest: 'build/temp/alt/video.novtt.js'
-      },
-      vtt: {
-        src: ['build/temp/video.js', 'node_modules/videojs-vtt.js/dist/vtt.js'],
-        dest: 'build/temp/video.js'
-      },
       ie8_addition: {
         src: ['build/temp/video-js.css', 'src/css/ie8.css'],
         dest: 'build/temp/video-js.css'
@@ -401,14 +403,23 @@ module.exports = function(grunt) {
         logConcurrentOutput: true
       },
       tests: [
-        'watch:babel',
+        'shell:babel',
         'browserify:tests'
       ],
+      dev: [
+        'shell:babel',
+        'shell:rollupwatch',
+        'browserify:tests',
+        'watch:skin',
+        'watch:lang',
+        'watch:dist'
+      ],
       // Run multiple watch tasks in parallel
       // Needed so watchify can cache intelligently
       watchAll: [
         'watch',
         'browserify:watch',
+        'browserify:watchnovtt',
         'browserify:tests',
         'karma:watch'
       ],
@@ -436,8 +447,32 @@ module.exports = function(grunt) {
       }
     },
     shell: {
+      rollup: {
+        command: 'npm run rollup',
+        options: {
+          preferLocal: true
+        }
+      },
+      rollupall: {
+        command: 'npm run rollup -- --no-progress && npm run rollup-minify -- --no-progress',
+        options: {
+          preferLocal: true
+        }
+      },
+      rollupwatch: {
+        command: 'npm run rollup-dev',
+        optoins: {
+          preferLocal: true
+        }
+      },
+      babel: {
+        command: 'npm run babel -- --watch --quiet',
+        options: {
+          preferLocal: true
+        }
+      },
       lint: {
-        command: 'npm run lint',
+        command: 'npm run lint -- --errors',
         options: {
           preferLocal: true
         }
@@ -455,7 +490,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
         }
@@ -470,8 +505,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'
         ]
 
       },
@@ -485,20 +520,13 @@ module.exports = function(grunt) {
   require('load-grunt-tasks')(grunt);
   grunt.loadNpmTasks('videojs-doc-generator');
   grunt.loadNpmTasks('chg');
-  grunt.loadNpmTasks('gkatsev-grunt-sass');
   grunt.loadNpmTasks('grunt-accessibility');
 
-  const buildDependents = [
+  grunt.registerTask('build', [
     'shell:lint',
     'clean:build',
 
-    'babel:es5',
-    'browserify:build',
-    'concat:novtt',
-    'concat:vtt',
-    'usebanner:novtt',
-    'usebanner:vtt',
-    'uglify',
+    'shell:rollupall',
 
     'skin',
     'version:css',
@@ -508,18 +536,11 @@ module.exports = function(grunt) {
     'copy:swf',
     'copy:ie8',
     'vjslanguages'
-  ];
-
-  grunt.registerTask('build', buildDependents);
-
-  grunt.registerTask(
-    'build:dist',
-    buildDependents.map(task => task === 'browserify:build' ? 'browserify:dist' : task)
-  );
+  ]);
 
   grunt.registerTask('dist', [
     'clean:dist',
-    'build:dist',
+    'build',
     'copy:dist',
     'copy:examples',
     'zip:dist'
@@ -531,19 +552,31 @@ module.exports = function(grunt) {
   grunt.registerTask('default', ['test']);
 
   // The test script includes coveralls only when the TRAVIS env var is set.
-  grunt.registerTask('test', [
-    'build',
-    'shell:noderequire',
-    'shell:browserify',
-    'shell:webpack',
-    'karma:defaults',
-    'test-a11y'].concat(process.env.TRAVIS && 'coveralls').filter(Boolean));
+  grunt.registerTask('test', function() {
+    const tasks = [
+      'build',
+      'shell:noderequire',
+      'shell:browserify',
+      'shell:webpack',
+      'karma:defaults',
+      'test-a11y'
+    ];
+
+    if (process.env.TRAVIS) {
+      if (isDocsOnly(process.env.TRAVIS_COMMIT, process.env.TRAVIS_COMMIT_RANGE)) {
+        grunt.log.write('Not running any tests because only docs were changed');
+        return;
+      }
+
+      tasks.concat(process.env.TRAVIS && 'coveralls').filter(Boolean);
+    }
+
+    grunt.task.run(tasks);
+  });
 
   // Run while developing
-  grunt.registerTask('dev', ['build', 'connect:dev', 'concurrent:watchSandbox']);
-
+  grunt.registerTask('dev', ['sandbox', 'connect:dev', 'concurrent:dev']);
   grunt.registerTask('watchAll', ['build', 'connect:dev', 'concurrent:watchAll']);
-
   grunt.registerTask('test-a11y', ['copy:a11y', 'accessibility']);
 
   // Pick your testing, or run both in different terminals

build/rollup.js

@@ -0,0 +1,212 @@
+import { rollup } from 'rollup';
+import duration from 'humanize-duration';
+import watch from 'rollup-watch';
+import babel from 'rollup-plugin-babel';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import json from 'rollup-plugin-json';
+import filesize from 'rollup-plugin-filesize';
+import progress from 'rollup-plugin-progress';
+import ignore from 'rollup-plugin-ignore';
+import uglify from 'rollup-plugin-uglify';
+import minimist from 'minimist';
+import _ from 'lodash';
+import pkg from '../package.json';
+import fs from 'fs';
+
+const args = minimist(process.argv.slice(2), {
+  boolean: ['watch', 'minify', 'progress'],
+  default: {
+    progress: true
+  },
+  alias: {
+    w: 'watch',
+    m: 'minify',
+    p: 'progress'
+  }
+});
+
+if (args.watch) {
+  args.progress = false;
+}
+
+const compiledLicense = _.template(fs.readFileSync('./build/license-header.txt', 'utf8'));
+const bannerData = _.pick(pkg, ['version', 'copyright']);
+
+const primedResolve = resolve({
+  jsnext: true,
+  main: true,
+  browser: true
+});
+const primedCjs = commonjs({
+  sourceMap: false
+});
+const primedBabel = babel({
+  babelrc: false,
+  exclude: 'node_modules/**',
+  presets: [
+    'es3',
+    ['es2015', {
+      loose: true,
+      modules: false
+    }]
+  ],
+  plugins: ['external-helpers']
+});
+
+const es = {
+  options: {
+    entry: 'src/js/video.js',
+    plugins: [
+      json(),
+      primedBabel,
+      args.progress ? progress() : {},
+      filesize()
+    ],
+    onwarn(warning) {
+      if (warning.code === 'UNUSED_EXTERNAL_IMPORT' ||
+          warning.code === 'UNRESOLVED_IMPORT') {
+        return;
+      }
+
+      // eslint-disable-next-line no-console
+      console.warn(warning.message);
+    },
+    legacy: true
+  },
+  banner: compiledLicense(Object.assign({includesVtt: true}, bannerData)),
+  useStrict: false,
+  format: 'es',
+  dest: 'dist/video.es.js'
+};
+
+const cjs = Object.assign({}, es, {
+  format: 'cjs',
+  dest: 'dist/video.cjs.js'
+});
+
+const umd = {
+  options: {
+    entry: 'src/js/video.js',
+    plugins: [
+      primedResolve,
+      json(),
+      primedCjs,
+      primedBabel,
+      args.progress ? progress() : {},
+      filesize()
+    ],
+    legacy: true
+  },
+  banner: compiledLicense(Object.assign({includesVtt: true}, bannerData)),
+  useStrict: false,
+  format: 'umd',
+  dest: 'dist/video.js'
+};
+
+const minifiedUmd = Object.assign({}, _.cloneDeep(umd), {
+  dest: 'dist/video.min.js'
+});
+
+minifiedUmd.options.plugins.splice(4, 0, uglify({
+  preserveComments: 'some',
+  screwIE8: false,
+  mangle: true,
+  compress: {
+    /* eslint-disable camelcase */
+    sequences: true,
+    dead_code: true,
+    conditionals: true,
+    booleans: true,
+    unused: true,
+    if_return: true,
+    join_vars: true,
+    drop_console: true
+    /* eslint-enable camelcase */
+  }
+}));
+
+const novttUmd = Object.assign({}, _.cloneDeep(umd), {
+  banner: compiledLicense(Object.assign({includesVtt: false}, bannerData)),
+  dest: 'dist/alt/video.novtt.js'
+});
+
+novttUmd.options.plugins.unshift(ignore(['videojs-vtt.js']));
+
+const minifiedNovttUmd = Object.assign({}, _.cloneDeep(minifiedUmd), {
+  banner: compiledLicense(Object.assign({includesVtt: false}, bannerData)),
+  dest: 'dist/alt/video.novtt.min.js'
+});
+
+minifiedNovttUmd.options.plugins.unshift(ignore(['videojs-vtt.js']));
+
+function runRollup({options, useStrict, format, dest, banner}) {
+  rollup(options)
+  .then(function(bundle) {
+    bundle.write({
+      useStrict,
+      format,
+      dest,
+      banner,
+      moduleName: 'videojs',
+      sourceMap: false
+    });
+  }, function(err) {
+    // eslint-disable-next-line no-console
+    console.error(err);
+  });
+}
+
+if (!args.watch) {
+  if (args.minify) {
+    runRollup(minifiedUmd);
+    runRollup(minifiedNovttUmd);
+  } else {
+    runRollup(es);
+    runRollup(cjs);
+    runRollup(umd);
+    runRollup(novttUmd);
+  }
+} else {
+  const props = ['format', 'dest', 'banner', 'useStrict'];
+  const watchers = [
+    ['es', watch({rollup},
+                 Object.assign({},
+                               es.options,
+                               _.pick(es, props)))],
+    ['cjs', watch({rollup},
+                  Object.assign({},
+                                cjs.options,
+                                _.pick(cjs, props)))],
+    ['umd', watch({rollup},
+                  Object.assign({moduleName: 'videojs'},
+                                umd.options,
+                                _.pick(umd, props)))],
+    ['novtt', watch({rollup},
+                    Object.assign({moduleName: 'videojs'},
+                                  novttUmd.options,
+                                  _.pick(novttUmd, props)))]
+  ];
+
+  watchers.forEach(function([type, watcher]) {
+    watcher.on('event', (details) => {
+      if (details.code === 'BUILD_START') {
+        // eslint-disable-next-line no-console
+        console.log(`Bundling ${type}...`);
+        return;
+      }
+
+      if (details.code === 'BUILD_END') {
+        // eslint-disable-next-line no-console
+        console.log(`Bundled ${type} in %s`, duration(details.duration));
+        return;
+      }
+
+      if (details.code === 'ERROR') {
+        // eslint-disable-next-line no-console
+        console.error(details.error.toString());
+        return;
+      }
+    });
+  });
+}

build/tasks/sandbox.js

@@ -0,0 +1,33 @@
+const fs = require('fs');
+const path = require('path');
+const klawSync = require('klaw-sync');
+
+module.exports = function(grunt) {
+  grunt.registerTask('sandbox', 'copy over sandbox example files if necessary', function() {
+    const files = klawSync('sandbox/').filter((file) => path.extname(file.path) === '.example');
+
+    const changes = files.map(function(file) {
+      const p = path.parse(file.path);
+      const nonExample = path.join(p.dir, p.name);
+      return {
+        file: file.path,
+        copy: nonExample
+      };
+    })
+    .filter(function(change) {
+      return !fs.existsSync(change.copy);
+    });
+
+    changes.forEach(function(change) {
+      grunt.file.copy(change.file, change.copy);
+    });
+
+    if (changes.length) {
+      grunt.log.writeln("Updated Sandbox files for:");
+      grunt.log.writeln('\t' + changes.map((chg) => chg.copy).join('\n\t'));
+    } else {
+      grunt.log.writeln("No sandbox updates necessary");
+    }
+
+  });
+};

build/version.js

@@ -0,0 +1,19 @@
+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 prereleaseType = npm_config_argv['remain'][0];
+var approvedTypes = {
+  'major': 1,
+  'minor': 1,
+  'patch': 1
+}
+
+if (prereleaseType in approvedTypes) {
+  sh.exec('npm run changelog');
+}

component.json

@@ -1,22 +0,0 @@
-{
-  "name": "video.js",
-  "description": "An HTML5 and Flash video player with a common API and skin for both.",
-  "version": "5.14.0",
-  "keywords": [
-    "videojs",
-    "html5",
-    "flash",
-    "video",
-    "player"
-  ],
-  "scripts": ["dist/video-js/video.dev.js"],
-  "styles": ["dist/video-js/video-js.css"],
-  "files": ["dist/video-js/video-js.swf"],
-  "fonts": [
-    "dist/video-js/font/vjs.eot",
-    "dist/video-js/font/vjs.svg",
-    "dist/video-js/font/vjs.ttf",
-    "dist/video-js/font/vjs.woff"
-  ],
-  "main": "dist/video-js/video.dev.js"
-}

contrib.json

@@ -1,442 +0,0 @@
-{
-  "meta": {
-    "org": "videojs",
-    "name": "video.js",
-    "requirements": [
-      {
-        "name": "git",
-        "info": "http://git-scm.com"
-      },
-      {
-        "name": "node.js",
-        "info": "http://nodejs.org"
-      }
-    ],
-    "urls": {
-      "repo_api": "https://api.github.com/repos/videojs/video.js",
-      "repo_ui": "https://github.com/videojs/video.js"
-    },
-    "branches": {
-      "development": "master",
-      "release": "stable"
-    }
-  },
-
-  "install": {
-    "desc": "Fork, download, and setup the project",
-    "steps": [
-      { "prompt": "confirm", "desc": "You will now be taken to Github where you will choose an account to fork the project under. Remember which account you choose." },
-      { "exec": "open https://github.com/{{meta.org}}/{{meta.name}}/fork" },
-      { "prompt": "text", "desc": "Which account did you choose? (no '@')", "id": "owner" },
-      { "exec": "git clone https://github.com/{{ owner }}/{{ meta.name }}.git" },
-      { "exec": "cd {{ meta.name }}", "desc": "Change to the project directory" },
-      { "include": "setup" }
-    ]
-  },
-
-  "setup": {
-    "desc": "Set up version control and install dependencies",
-    "steps": [
-      [ "git fetch origin",                      "Get all git branches" ],
-      [ "git checkout -b stable origin/stable",  "Create the stable branch for patches" ],
-      [ "git remote add upstream https://github.com/{{meta.org}}/{{meta.name}}.git",  "Add the upstream project as a remote for pulling changes" ],
-      [ "git fetch upstream",                    "Get all upstream branches and changes" ],
-      { "include": "update all" },
-      [ "grunt", "Build the library" ]
-    ]
-  },
-
-  "update": {
-    "all": {
-      "steps": [
-        { "include": "update stable" },
-        { "include": "update master" },
-        [ "npm install", "Download dependencies"]
-      ]
-    },
-    "local": {
-      "master": {
-        "steps": [
-          [ "git checkout master",      "Switch to the development branch" ],
-          [ "git pull upstream master", "Get any changes to master in the main project" ]
-        ]
-      },
-      "stable": {
-        "steps": [
-          [ "git checkout stable",      "Switch to the release branch" ],
-          [ "git pull upstream stable", "Get any changes to stable in the main project" ]
-        ]
-      },
-      "patch": {
-        "steps": [
-          [ "git checkout patch",      "Switch to the patch branch" ],
-          [ "git pull upstream patch", "Get any changes to patch in the main project" ]
-        ]
-      }
-    },
-    "remote": {
-      "master": {
-        "steps": [
-          { "include": "update local master" },
-          [ "git push origin master",   "Push any changes to your copy of the main project" ]
-        ]
-      },
-      "stable": {
-        "steps": [
-          { "include": "update local stable" },
-          [ "git push origin stable",   "Push any changes to your copy of the main project" ]
-        ]
-      },
-      "patch": {
-        "steps": [
-          { "include": "update local patch" },
-          [ "git push origin patch",   "Push any changes to your copy of the main project" ]
-        ]
-      }
-    },
-
-    "master": {
-      "steps": [
-        { "include": "update remote master" }
-      ]
-    },
-    "stable": {
-      "steps": [
-        { "include": "update remote stable" }
-      ]
-    },
-    "patch": {
-      "steps": [
-        { "include": "update remote patch" }
-      ]
-    }
-  },
-
-  "test": "grunt test" ,
-  "watch": "grunt watch",
-  "server": "grunt connect",
-
-  "feature": {
-    "desc": "Create a new feature or general enhancement",
-    "baseBranch": "master",
-    "start": {
-      "desc": "Start a new feature",
-      "steps": [
-        { "include": "update {{meta.branches.development}}" },
-        { "include": "branch start" }
-      ]
-    },
-    "save": {
-      "desc": "Save changes to your feature",
-      "steps": [{ "include": "branch save" }]
-    },
-    "submit": {
-      "desc": "Submit a pull request for a feature when it's finished",
-      "steps": [{ "include": "pull_request submit" }]
-    },
-    "delete": {
-      "desc": "Delete the current feature branch",
-      "steps": [{ "include": "branch delete" }]
-    },
-    "review": {
-      "desc": "Review a submitted feature",
-      "steps": [{ "include": "pull_request review" }]
-    },
-    "modify": {
-      "desc": "Modify a submitted feature that you are reviewing",
-      "steps": [{ "include": "pull_request modify" }]
-    },
-    "accept": {
-      "desc": "Merge a submitted feature",
-      "steps": [
-        { "include": "update {{meta.branches.development}}" },
-        { "include": "pull_request accept" }
-      ]
-    }
-  },
-
-  "patch": {
-    "desc": "Create an urgent fix for the latest stable version",
-    "baseBranch": "stable",
-    "start": {
-      "desc": "Start a new patch",
-      "finished": "Make your changes and then run `contrib patch submit`",
-      "steps": [
-        { "include": "update {{meta.branches.release}}" },
-        { "include": "branch start" }
-      ]
-    },
-    "save": {
-      "desc": "Save changes to your feature",
-      "steps": [{ "include": "branch save" }]
-    },
-    "submit": {
-      "desc": "Submit a pull request for a patch when it's finished",
-      "steps": [{ "include": "pull_request submit" }]
-    },
-    "delete": {
-      "desc": "Delete the current patch branch",
-      "steps": [{ "include": "branch delete" }]
-    },
-    "review": {
-      "desc": "Review a submitted patch",
-      "steps": [{ "include": "pull_request review" }]
-    },
-    "modify": {
-      "desc": "Modify a submitted patch that you are reviewing",
-      "steps": [{ "include": "pull_request modify" }]
-    },
-    "accept": {
-      "desc": "Merge a submitted patch",
-      "steps": [
-        { "include": "update {{meta.branches.release}}" },
-        { "include": "pull_request accept" },
-        [ "git checkout master",                    "Checkout the developmet branch" ],
-        [ "git merge stable",                       "Merge the patch changes" ],
-        [ "git push upstream master",               "Push the development changes" ]
-      ]
-    }
-  },
-
-  "report": {
-    "desc": "Submit a bug report",
-    "steps": [
-      { "prompt": "text", "desc": "Create a title that is descriptive of the problem", "id": "title" },
-      { "prompt": "text", "desc": "What did you do? (steps to reproduce)",             "id": "reproduce" },
-      { "prompt": "text", "desc": "What did you expect to happen?",                    "id": "expected" },
-      { "prompt": "text", "desc": "What actually happened?",                           "id": "actual" },
-      { "prompt": "text", "desc": "What version of video.js are you using?",           "id": "version" },
-      { "prompt": "text", "desc": "Are you using any video.js plugins?",               "id": "plugins" },
-      { "prompt": "text", "desc": "What browsers/platforms did you experience this in (e.g. Win 7, IE10; Android 4, Chrome;)?", "id": "browsers" },
-      { "prompt": "text", "desc": "Is there a URL to a live example, or a jsbin (e.g. http://jsbin.com/axedog/9999/edit)?",     "id": "example" },
-      { "prompt": "text", "desc": "Are there any other details you'd like to provide?",                                         "id": "details" },
-      { "open": "{{meta.urls.repo_ui}}/issues/new?title={{title}}&body=**Steps to reproduce:**\n> {{reproduce}}\n\n**What was expected:**\n> {{expected}}\n\n**What Happened:**\n> {{actual}}\n\n**Video.js Version:**\n> {{version}}\n\n**Plugins:**\n> {{plugins}}\n\n**Browsers experienced on:**\n> {{browsers}}\n\n**Example:**\n> {{example}}\n\n**Other details:**\n> {{details}}" }
-    ],
-    "finished": "Thanks for submitting a bug report! One of our contributors will address it as soon as possible."
-  },
-
-  "request": {
-    "desc": "Submit a feature/enhancement request",
-    "steps": [
-      { "prompt": "text", "desc": "Create a title that is descriptive of the enhancement", "id": "title" },
-      { "prompt": "text", "desc": "Describe the feature/enhancement (be as detailed as possible so it's clear who, why, and how it would be used)", "id": "describe" },
-      { "prompt": "text", "desc": "Is there any existing documentation or related specifications?", "id": "docs" },
-      { "prompt": "text", "desc": "Are there any existing examples?", "id": "examples" },
-      { "prompt": "confirm", "desc": "You will be redirected to Github where you can submit this issue, OK?" },
-      { "open": "{{meta.urls.repo_ui}}/issues/new?title={{ title }}&body=**Describe the feature/enhancement:**\n> {{ describe }}\n\n**Existing docs/specs:**\n> {{ docs }}\n\n**Existing examples:**\n> {{ examples }}" }
-    ],
-    "finished": "Thanks for submitting a feature request! One of our contributors will address it as soon as possible."
-  },
-
-  "release": {
-    "desc": "Create and publish releases",
-
-    "patch": {
-      "release_type": "patch",
-      "description": "Create a patch release from the release branch (stable)",
-      "steps": [{ "include": "release run" }]
-    },
-    "minor": {
-      "description": "Create a minor release from the development branch (master)",
-      "release_type": "minor",
-      "steps": [
-        { "include": "update local master" },
-        { "include": "update local stable" },
-        [ "git merge master",                          "Copy the latest development changes to the release branch" ],
-        { "include": "release run" },
-        [ "git checkout master",                       "Checkout the developmet branch" ],
-        [ "git merge stable",                          "Merge package changes into the dev brach" ],
-        [ "git push upstream master",                  "Push the dev branch changes to the repo" ]
-      ]
-    },
-
-    "next": {
-      "patch": {
-        "description": "Create a patch release and tag it @next on npm",
-        "release_type": "patch",
-        "steps": [{ "include": "release run_next" }]
-      },
-      "minor": {
-        "description": "Create a minor release and tag it @next on npm",
-        "release_type": "minor",
-        "steps": [{ "include": "release run_next" }]
-      },
-      "major": {
-        "description": "Create a major release and tag it @next on npm",
-        "release_type": "major",
-        "steps": [{ "include": "release run_next" }]
-      }
-    },
-
-    "prerelease": {
-      "release_type": "prerelease",
-      "steps": [{ "include": "release run_next" }]
-    },
-
-    "run_next": {
-      "steps": [
-        { "include": "branch check" },
-        { "include": "update local master" },
-        [ "git checkout -b temp-release-branch master","Create a temporary branch for the dist" ],
-        [ "grunt version:{{release_type}}",            "Bump package versions" ],
-        [ "./build/bin/version",                       "Return the current VJS Version from the package.json file", "version" ],
-        [ "npm run changelog",                         "Update the changelog with the new release" ],
-        [ "git commit -am 'v{{version}}'",             "Add and commit the package changes" ],
-        [ "git checkout master",                       "Checkout the developmet branch" ],
-        [ "git merge temp-release-branch",             "Merge package changes into the dev brach" ],
-        [ "git push upstream master",                  "Push the dev branch changes to the repo" ],
-        [ "git checkout temp-release-branch",          "Checkout the temp branch again" ],
-        [ "grunt dist",                                "Build the dist" ],
-        [ "git add dist --force",                      "Add the (otherwise ignored) release files" ],
-        [ "git commit -m 'v{{version}} dist'",         "Commit the dist changes" ],
-        [ "git tag -a v{{version}} -m 'v{{version}}'", "Tag the release" ],
-        [ "git push upstream --tags",                  "Push the new tag to the repo" ],
-        [ "grunt github-release:prerelease",           "Create a new pre-release on Github" ],
-        [ "npm publish --tag next",                    "Publish to npm as 'next'" ],
-        [ "git checkout master",                       "Checkout the developmet branch" ],
-        [ "git branch -D temp-release-branch",         "Delete the temp release branch" ]
-      ]
-    },
-
-    "run": {
-      "steps": [
-        { "include": "branch check" },
-        { "include": "update local stable" },
-        [ "npm install",                               "Ensure dependency updates have been installed" ],
-        [ "grunt test",                                "Run tests" ],
-        [ "grunt version:{{release_type}}",            "Bump package versions" ],
-        [ "./build/bin/version",                       "Return the current VJS Version from the package.json file", "version" ],
-        [ "npm run changelog",                         "Update the changelog with the new release" ],
-        [ "git commit -am 'v{{version}}'",             "Add and commit the package changes" ],
-        [ "git push upstream stable",                  "Push the release branch changes to the repo" ],
-        [ "git checkout -b temp-release-branch stable","Create a temporary branch for the dist" ],
-        [ "grunt dist",                                "Build the dist" ],
-        [ "git add dist --force",                      "Add the (otherwise ignored) release files" ],
-        [ "git commit -m 'v{{version}} dist'",         "Commit the dist changes" ],
-        [ "git tag -a v{{version}} -m 'v{{version}}'", "Tag the release" ],
-        [ "git push upstream --tags",                  "Push the new tag to the repo" ],
-        [ "npm publish",                               "Publish to npm" ],
-        [ "grunt github-release:release",              "Create a new release on Github" ],
-        [ "git checkout stable",                       "Checkout the developmet branch" ],
-        [ "git branch -D temp-release-branch",         "Delete the temp release branch" ]
-      ]
-    }
-  },
-
-  "branch": {
-    "private": true,
-
-    "start": {
-      "steps": [
-        { "prompt": "text", "id": "name",                     "desc": "Name the branch" },
-        { "exec": "git checkout -b {{name}} {{baseBranch}}",  "desc": "Create the branch" },
-        { "exec": "git push -u origin {{name}}",              "desc": "Push the branch to your remote copy of the project" }
-      ]
-    },
-    "save": {
-      "desc": "Commit and push changes made to files in the project",
-      "steps": [
-        { "include": "branch confirm" },
-        { "prompt": "text", "id": "message",         "desc": "Briefly describe the changes made" },
-        { "exec": "git add .",                       "desc": "Add the changes" },
-        { "exec": "git commit -m '{{message}}'",     "desc": "Commit the changes" },
-        { "exec": "git push origin {{branch_name}}", "desc": "Push the changes to your remote copy of the project" }
-      ]
-    },
-    "check": {
-      "private": true,
-      "desc": "Check for unsaved changes",
-      "steps": [
-        { "exec": "git diff --exit-code",          "desc": "Ensure there's no unadded changes",     "fail": "Make sure all changes have been saved (added and committed) or stashed" },
-        { "exec": "git diff --cached --exit-code", "desc": "Ensure there's no uncommitted changes", "fail": "Make sure all changes have been saved (added and committed) or stashed" }
-      ]
-    },
-    "name": {
-      "private": true,
-      "steps": [
-        { "exec": "git rev-parse --abbrev-ref HEAD", "desc": "Get the current branch", "id": "branch_name" }
-      ]
-    },
-    "confirm": {
-      "private": true,
-      "steps": [
-        { "include": "branch name" },
-        { "prompt": "confirm", "desc": "Are you sure *{{branch_name}}* is the correct branch?" }
-      ]
-    },
-    "delete": {
-      "desc": "Delete the current branch",
-      "steps": [
-        { "include": "branch confirm" },
-        { "exec": "git checkout master",              "desc": "Exit the branch being deleted" },
-        { "exec": "git branch -D {{branch_name}}",    "desc": "Delete the local copy of the branch" },
-        { "exec": "git push origin :{{branch_name}}", "desc": "Delete the remote copy of the branch" }
-      ]
-    }
-  },
-
-  "pull_request": {
-    "private": true,
-    "desc": "Pull request related commands",
-
-    "prepare": {
-      "private": true,
-      "steps": [
-        { "include": "branch check" },
-        { "include": "branch confirm" },
-        { "include": "test" },
-        { "prompt": "text", "desc": "Which github user or org are you submitting from?", "id": "user" }
-      ]
-    },
-    "submit": {
-      "desc": "Submit a pull request for when the change is finished",
-      "steps": [
-        { "include": "pull_request prepare" },
-        { "open": "{{meta.urls.repo_ui}}/compare/videojs:{{baseBranch}}...{{user}}:{{branch_name}}", "desc": "Open the github pull request page" }
-      ]
-    },
-    "review": {
-      "steps": [
-        { "prompt": "text", "desc": "What is the the pull request number?", "id": "prNum" },
-        { "get": "{{meta.urls.repo_api}}/pulls/{{prNum}}",   "desc": "Get the PR information", "id": "pr" },
-        [ "git fetch {{pr.head.repo.ssh_url}} {{pr.head.ref}}", "Get the pull request changes but don't merge them" ],
-        [ "git merge-base master FETCH_HEAD",                   "Get the common ancestor commit", "base" ],
-        [ "git checkout -b review-{{pr.user.login}}-{{pr.head.ref}} {{base}}", "Create a new local branch for the pull request that has a base of the common commit" ],
-        [ "git merge FETCH_HEAD",                               "Merge in the pull request changes" ],
-        [ "npm install",                                        "Install any new dependencies" ],
-        [ "grunt test",                                         "Build and run tests" ]
-      ]
-    },
-    "modify": {
-      "desc": "Submit a modification to a pull request that you are currently reviewing",
-      "steps": [
-        { "include": "pull_request prepare" },
-        { "prompt": "text", "desc": "What is the the pull request number?",                  "id": "prNum" },
-        { "get": "{{meta.urls.repo_api}}/pulls/{{prNum}}", "desc": "Get the PR information", "id": "pr" },
-        { "exec": "git push -u origin {{branch_name}}",                                "desc": "Push the changes to the remote repo" },
-        { "open": "https://github.com/{{user}}/video.js/compare/{{pr.head.label}}...{{user}}:{{branch_name}}", "desc": "Open the github pull request page" }
-      ]
-    },
-    "accept": {
-      "steps": [
-        { "prompt": "text", "id": "prNum",                             "desc": "What is the the pull request number?" },
-        { "get": "{{meta.urls.repo_api}}/pulls/{{prNum}}",             "desc": "Get the PR information", "id": "pr" },
-        { "get": "{{meta.urls.repo_api}}/pulls/{{prNum}}/commits",     "desc": "Get the PR commits to access author info", "id": "prCommits" },
-        [ "git checkout -b {{pr.user.login}}/{{pr.head.ref}} {{pr.base.ref}}", "Create a new branch for merging the changes" ],
-        [ "git fetch {{pr.head.repo.ssh_url}} {{pr.head.ref}}",                "Fetch the changes" ],
-        [ "git merge --no-commit --squash FETCH_HEAD",                         "Merge the changes in without committing so they can be squashed" ],
-        [ "grunt test",                                                        "Run tests to make sure they still pass" ],
-        { "prompt": "text", "id": "line",                              "desc": "Describe this change in one line" },
-        [ "grunt chg-add:'{{{line}}} ([view](https\\://github.com/videojs/video.js/pull/{{prNum}}))'", "Add a line to the changelog" ],
-        [ "git add CHANGELOG.md",                                              "Add the changlelog change to be committed" ],
-        [ "git commit -a --author='{{prCommits.[0].commit.author.name}} <{{prCommits.[0].commit.author.email}}>' -m '{{line}}. closes #{{prNum}}'", "Commit the changes" ],
-        { "prompt": "confirm",                                         "desc": "Does everything look ok?" },
-        [ "git checkout {{pr.base.ref}}",                                      "Check out the base branch" ],
-        [ "git merge {{pr.user.login}}/{{pr.head.ref}}",                       "Merge the changes" ],
-        [ "git push origin {{pr.base.ref}}",                                   "Push the changes to your remote copy of the project" ],
-        [ "git push upstream {{pr.base.ref}}",                                 "Push the changes to the main project" ],
-        [ "git branch -D {{pr.user.login}}/{{pr.head.ref}}",                   "Delete the local branch used for merging" ]
-      ]
-    }
-  }
-}

docs/examples/elephantsdream/index.html

@@ -1,34 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+
   <meta charset="utf-8" />
   <title>Video.js Text Descriptions, Chapters &amp; Captions Example</title>
 
-  <link href="../../video-js.css" rel="stylesheet" type="text/css">
-
-  <script src="../../video.js"></script>
-
-  <!-- Set the location of the flash SWF -->
-  <script>
-    videojs.setGlobalOptions({
-      flash: {
-        swf: '../../video-js.swf'
-      }
-    });
-  </script>
+  <link href="http://vjs.zencdn.net/5.19/video-js.css" rel="stylesheet">
+  <script src="http://vjs.zencdn.net/ie8/1.1/videojs-ie8.min.js"></script>
+  <script src="http://vjs.zencdn.net/5.19/video.js"></script>
 
 </head>
 <body>
-  <p style="background-color:#eee; border: 1px solid #777; padding: 10px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">This page demonstrates a text descriptions track (intended primarily for blind and visually impaired consumers of visual media)</p>
 
   <!-- NOTE: we have to disable native Text Track support for the HTML5 tech,
              since even HTML5 video players with native Text Track support
              don't currently support 'description' text tracks in any
-             useful way! -->
+             useful way! Currently this means that iOS will not display
+            ANY text tracks -->
   <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">
+      data-setup='{ "html5" : { "nativeTextTracks" : false } }'
+      poster="http://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="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>
@@ -42,5 +36,7 @@
 
     <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>
+
 </body>
+
 </html>

docs/examples/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Index of video.js examples</title>
+</head>
+<body>
+
+  <h1>Index of video.js examples</h1>
+  <ul>
+    <li><a href="simple-embed">Video.js HTML5 video player simple example</a></li>
+    <li><a href="elephantsdream">Elephants Dream video with text descriptions, chapters &amp; captions example</a></li>
+  </ul>
+
+</body>
+
+</html>

docs/examples/simple-embed/index.html

@@ -1,15 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
 
     <title>Video.js | HTML5 Video Player</title>
-    <link href="http://vjs.zencdn.net/5.0.2/video-js.css" rel="stylesheet">
-    <script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
-    <script src="http://vjs.zencdn.net/5.0.2/video.js"></script>
+    <link href="http://vjs.zencdn.net/5.19/video-js.css" rel="stylesheet">
+    <script src="http://vjs.zencdn.net/ie8/1.1/videojs-ie8.min.js"></script>
+    <script src="http://vjs.zencdn.net/5.19/video.js"></script>
 
 </head>
-
 <body>
 
   <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
@@ -22,6 +20,7 @@
     <!-- 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>
+
 </body>
 
 </html>

docs/guides/audio-tracks.md

@@ -1,12 +1,37 @@
 # Audio Tracks
-Audio tracks are a feature of HTML5 video for providing alternate audio track selections to the user, so that a track other than the main track can be played. Video.js offers a cross-browser implementation of audio tracks.
+
+Audio tracks are a feature of HTML5 video for providing alternate audio track selections
+to the user, so that a track other than the main track can be played. Video.js offers a
+cross-browser implementation of audio tracks.
+
+## Table of Contents
+
+* [Caveats](#caveats)
+* [Working with Audio Tracks](#working-with-audio-tracks)
+  * [Add an Audio Track to the Player](#add-an-audio-track-to-the-player)
+  * [Listen for a Video Track Becoming Enabled](#listen-for-a-video-track-becoming-enabled)
+  * [Removing an Audio Track from the Player](#removing-an-audio-track-from-the-player)
+* [API](#api)
+  * [videojs.AudioTrack](#videojsaudiotrack)
+    * [id](#id)
+    * [kind](#kind)
+    * [label](#label)
+    * [language](#language)
+    * [enabled](#enabled)
 
 ## Caveats
-- It is not possible to add audio tracks through HTML like you can with text 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 handles switching audio tracks to support track selection through the UI.
+
+* It is not possible to add audio tracks through HTML like you can with text 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][hls] handles switching
+  audio tracks to support track selection through the UI.
 
 ## Working with Audio Tracks
+
 ### Add an Audio Track to the Player
+
 ```js
 // Create a player.
 var player = videojs('my-player');
@@ -24,9 +49,12 @@ player.audioTracks().addTrack(track);
 ```
 
 ### Listen for a Video Track Becoming Enabled
-When a track is enabled or disabled on an `AudioTrackList`, a `change` event will be fired. You can listen for that event and do something with it.
 
-> NOTE: The initial `AudioTrack` selection (usually the main track that is selected) should not fire a `change` event.
+When a track is enabled or disabled on an `AudioTrackList`, a `change` event will be
+fired. You can listen for that event and do something with it.
+
+> NOTE: The initial `AudioTrack` selection (usually the main track that is selected)
+>       should not fire a `change` event.
 
 ```js
 // Get the current player's AudioTrackList object.
@@ -48,7 +76,9 @@ audioTrackList.addEventListener('change', function() {
 ```
 
 ### Removing an Audio Track from the Player
-Assuming a player already exists and has an audio track that you want to remove, you might do something like the following:
+
+Assuming a player already exists and has an audio track that you want to remove, you
+might do something like the following:
 
 ```js
 // Get the track we created in an earlier example.
@@ -59,53 +89,73 @@ 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:
 
-- `Player#audioTracks`
-- `AudioTrackList`
-- `AudioTrack`
+For more complete information, refer to the
+[Video.js API docs](http://docs.videojs.com/), specifically:
+
+* `Player#audioTracks`
+* `AudioTrackList`
+* `AudioTrack`
 
 ### `videojs.AudioTrack`
-This class is based on [the `AudioTrack` standard][spec-audiotrack] and can be used to create new audio track objects.
+
+This class is based on [the `AudioTrack` standard][spec-audiotrack] and can be used to
+create new audio track objects.
 
 Each property below is available as an option to the `AudioTrack` constructor.
 
 #### `id`
+
 > [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-id)
 
 A unique identifier for this track. Video.js will generate one if not given.
 
 #### `kind`
+
 > [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-kind)
 
 Video.js supports standard `kind` values for `AudioTracks`:
 
-- `"alternative"`: A possible alternative to the main track.
-- `"descriptions"`: An audio description of a video track.
-- `"main"`: The primary audio track for this video.
-- `"main-desc"`: The primary audio track, mixed with audio descriptions.
-- `"translation"`: A translated version of the main audio track.
-- `"commentary"`: Commentary on the primary audio track, e.g. a director's commentary.
-- `""` (default): No explicit kind, or the kind given by the track's metadata is not recognized by the user agent.
+* `"alternative"`: A possible alternative to the main track.
+* `"descriptions"`: An audio description of a video track.
+* `"main"`: The primary audio track for this video.
+* `"main-desc"`: The primary audio track, mixed with audio descriptions.
+* `"translation"`: A translated version of the main audio track.
+* `"commentary"`: Commentary on the primary audio track, e.g. a director's commentary.
+* `""` (default): No explicit kind, or the kind given by the track's metadata is not
+  recognized by the user agent.
 
 #### `label`
+
 > [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-label)
 
-The label for the track that will be shown to the user. For example, in a menu that lists the different languages available as alternate audio tracks.
+The label for the track that will be shown to the user. For example, in a menu that lists
+the different languages available as alternate audio tracks.
 
 #### `language`
+
 > [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-language)
 
-The valid [BCP 47](https://tools.ietf.org/html/bcp47) code for the language of the audio track, e.g. `"en"` for English or `"es"` for Spanish.
+The valid [BCP 47](https://tools.ietf.org/html/bcp47) code for the language of the audio
+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)
+located in the Video.js root and refer to the [languages guide][languages-guide] for more
+information on languages in Video.js.
 
 #### `enabled`
+
 > [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-enabled)
 
 Whether or not this track should be playing.
 
-In Video.js, we only allow one track to be enabled at a time; so, if you enable more than one, the last one to be enabled will end up being the only one. While the spec allows for more than one track to be enabled, Safari and most implementations only allow one audio track to be enabled at a time.
+In Video.js, we only allow one track to be enabled at a time; so, if you enable more
+than one, the last one to be enabled will end up being the only one. While the spec
+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

@@ -1,29 +1,84 @@
 # Components
+
 The architecture of the Video.js player is centered around components. The `Player` class and all classes representing player controls and other UI elements inherit from the `Component` class. This architecture makes it easy to construct the user interface of the Video.js player in a tree-like structure that mirrors the DOM.
 
+## Table of Contents
+
+* [What is a Component?](#what-is-a-component)
+* [Creating a Component](#creating-a-component)
+* [Component Children](#component-children)
+  * [Basic Example](#basic-example)
+  * [Using Options](#using-options)
+* [Event Listening](#event-listening)
+  * [Using on](#using-on)
+  * [Using off](#using-off)
+  * [Using one](#using-one)
+  * [Using trigger](#using-trigger)
+* [Default Component Tree](#default-component-tree)
+* [Specific Component Details](#specific-component-details)
+  * [Volume Panel](#volume-panel)
+  * [Text Track Settings](#text-track-settings)
+
 ## What is a Component?
+
 A component is a JavaScript object that has the following features:
 
-- An associated DOM element.
-- 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.
+* 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
+
 Video.js components can be inherited and registered with Video.js to add new features and UI to the player.
 
 For a working example, [we have a JSBin](http://jsbin.com/vobacas/edit?html,css,js,output) demonstrating the creation of a component for displaying a title across the top of the player.
 
 In addition, there are a couple methods worth recognizing:
 
-- `videojs.getComponent(String name)`: Retrieves component constructors from Video.js.
-- `videojs.registerComponent(String name, Function Comp)`: Registers component constructors with Video.js.
-- `videojs.extend(Function component, Object properties)`: Provides prototype inheritance. Can be used to extend a component's constructor, returning a new constructor with the given properties.
+* `videojs.getComponent(String name)`: Retrieves component constructors from Video.js.
+* `videojs.registerComponent(String name, Function Comp)`: Registers component constructors with Video.js.
+* `videojs.extend(Function component, Object properties)`: Provides prototype inheritance. Can be used to extend a component's constructor, returning a new constructor with the given properties.
+
+Creation:
+
+```js
+// adding a button to the player
+var player = videojs('some-video-id');
+var Component = videojs.getComponent('Component');
+var button = new Component(player);
+
+console.log(button.el());
+```
+
+The above code will output
+
+```html
+<div class="video-js">
+  <div class="vjs-button">Button</div>
+</div>
+```
+
+Adding the new button to the player
+
+```js
+// adding a button to the player
+var player = videojs('some-video-id');
+var button = player.addChild('button');
+
+console.log(button.el());
+// will have the same html result as the previous example
+```
 
 ## Component Children
+
+Again, refer to [the component API docs][api] for complete details on methods available for managing component structures.
+
+### Basic Example
+
 When child component is added to a parent component, Video.js inserts the element of the child into the element of the parent. For example, adding a component like this:
 
 ```js
@@ -55,20 +110,189 @@ Results in a DOM that looks like this:
 </div>
 ```
 
-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.
+### Using Options
+
+Pass in options for child constructors and options for children of the child.
+
+```js
+var player = videojs('some-vid-id');
+var Component = videojs.getComponent('Component');
+var myComponent = new Component(player);
+var myButton = myComponent.addChild('MyButton', {
+  text: 'Press Me',
+  buttonChildExample: {
+    buttonChildOption: true
+  }
+});
+```
+
+Children can also be added via options when a component is initialized.
+
+> Note: Include a 'name' key which will be used if two child components of the same
+>       type that need different options.
+
+```js
+// MyComponent is from the above example
+var myComp = new MyComponent(player, {
+  children: ['button', {
+    name: 'button',
+    someOtherOption: true
+  }, {
+    name: 'button',
+    someOtherOption: false
+  }]
+});
+```
+
+## Event Listening
+
+### Using `on`
+
+```js
+var player = videojs('some-player-id');
+var Component = videojs.getComponent('Component');
+var myComponent = new Component(player);
+var myFunc = function() {
+  var myComponent = this;
+  console.log('myFunc called');
+};
+
+myComponent.on('eventType', myFunc);
+myComponent.trigger('eventType');
+// logs 'myFunc called'
+```
+
+The context of `myFunc` will be `myComponent` unless it is bound. You can add
+a listener to another element or component.
+
+```js
+var otherComponent = new Component(player);
+
+// myComponent/myFunc is from the above example
+myComponent.on(otherComponent.el(), 'eventName', myFunc);
+myComponent.on(otherComponent, 'eventName', myFunc);
+
+otherComponent.trigger('eventName');
+// logs 'myFunc called' twice
+```
+
+### Using `off`
+
+```js
+var player = videojs('some-player-id');
+var Component = videojs.getComponent('Component');
+var myComponent = new Component(player);
+var myFunc = function() {
+  var myComponent = this;
+  console.log('myFunc called');
+};
+myComponent.on('eventType', myFunc);
+myComponent.trigger('eventType');
+// logs 'myFunc called'
+
+myComponent.off('eventType', myFunc);
+myComponent.trigger('eventType');
+// does nothing
+```
+
+If myFunc gets excluded, _all_ listeners for the event type will get removed. If
+eventType gets excluded, _all_ listeners will get removed from the component.
+You can use `off` to remove listeners that get added to other elements or
+components using:
+
+ `myComponent.on(otherComponent...`
+
+In this case both the event type and listener function are **REQUIRED**.
+
+```js
+var otherComponent = new Component(player);
+
+// myComponent/myFunc is from the above example
+myComponent.on(otherComponent.el(), 'eventName', myFunc);
+myComponent.on(otherComponent, 'eventName', myFunc);
+
+otherComponent.trigger('eventName');
+// logs 'myFunc called' twice
+myComponent.off(ootherComponent.el(), 'eventName', myFunc);
+myComponent.off(otherComponent, 'eventName', myFunc);
+otherComponent.trigger('eventName');
+// does nothing
+```
+
+### Using `one`
+
+```js
+var player = videojs('some-player-id');
+var Component = videojs.getComponent('Component');
+var myComponent = new Component(player);
+var myFunc = function() {
+  var myComponent = this;
+  console.log('myFunc called');
+};
+myComponent.one('eventName', myFunc);
+myComponent.trigger('eventName');
+// logs 'myFunc called'
+
+myComponent.trigger('eventName');
+// does nothing
+```
+
+You can also add a listener to another element or component that will get
+triggered only once.
+
+```js
+var otherComponent = new Component(player);
+
+// myComponent/myFunc is from the above example
+myComponent.one(otherComponent.el(), 'eventName', myFunc);
+myComponent.one(otherComponent, 'eventName', myFunc);
+
+otherComponent.trigger('eventName');
+// logs 'myFunc called' twice
+
+otherComponent.trigger('eventName');
+// does nothing
+```
+
+### Using `trigger`
+
+```js
+var player = videojs('some-player-id');
+var Component = videojs.getComponent('Component');
+var myComponent = new Component(player);
+var myFunc = function(data) {
+  var myComponent = this;
+  console.log('myFunc called');
+  console.log(data);
+};
+myComponent.one('eventName', myFunc);
+myComponent.trigger('eventName');
+// logs 'myFunc called' and 'undefined'
+
+myComponent.trigger({'type':'eventName'});
+// logs 'myFunc called' and 'undefined'
+
+myComponent.trigger('eventName', {data: 'some data'});
+// logs 'myFunc called' and "{data: 'some data'}"
+
+myComponent.trigger({'type':'eventName'}, {data: 'some data'});
+// logs 'myFunc called' and "{data: 'some data'}"
+```
 
 ## Default Component Tree
+
 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)
@@ -92,22 +316,25 @@ Player
 ```
 
 ## Specific Component Details
-### Progress Control
-The progress control has a grandchild component, the mouse time display, which shows a time tooltip that follows the mouse cursor.
 
-By default, the progress control is sandwiched inside the control bar between the volume menu button and the remaining time display. Some skins attempt to move the it above the control bar and have it span the full width of the player. In these cases, it is less than ideal to have the tooltips leave the bounds of the player. This can be prevented by setting the `keepTooltipsInside` option on the progress control.
+### Volume Panel
+
+The `VolumePanel` includes the `MuteToggle` and the `VolumeControl` Components, which will be hidden if volume changes are not supported. There is one important option for the `VolumePanel` which can make your `VolumeControl` appear vertically over the `MuteToggle`. This can be set by passing `VolumePanel` `{inline: false}` as the default behavior is a horizontal `VolumeControl` with `{inline: true}`.
+
+Example of a vertical `VolumeControl`
 
 ```js
 let player = videojs('myplayer', {
   controlBar: {
-    progressControl: {
-      keepTooltipsInside: true
+    volumePanel: {
+      inline: false
     }
   }
 });
 ```
 
-> **Note:** This makes the tooltips use a real element instead of pseudo-elements so targeting them with CSS is different.
-
 ### 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

@@ -0,0 +1,112 @@
+# Debugging
+
+## Table of Contents
+
+* [Logging](#logging)
+  * [API Overview](#api-overview)
+  * [Log Safely](#log-safely)
+  * [Log Objects Usefully](#log-objects-usefully)
+  * [Log Levels](#log-levels)
+  * [Available Log Levels](#available-log-levels)
+  * [History](#history)
+
+## Logging
+
+Video.js includes `videojs.log`, a lightweight wrapper around a subset of [the `console` API][console]. The available methods are `videojs.log`, `videojs.log.warn`, and `videojs.log.error`.
+
+### API Overview
+
+Most of these methods should be fairly self-explanatory, but for complete details, see [the API docs][api].
+
+| Method                          | Alias Of        | Matching Level(s) |
+| ------------------------------- | --------------- | ----------------- |
+| `videojs.log()`                 | `console.log`   | all               |
+| `videojs.log.warn()`            | `console.warn`  | all, warn         |
+| `videojs.log.error()`           | `console.error` | all, warn, error  |
+| `videojs.log.level()`           | n/a             | n/a               |
+| `videojs.log.history()`         | n/a             | n/a               |
+| `videojs.log.history.clear()`   | n/a             | n/a               |
+| `videojs.log.history.disable()` | n/a             | n/a               |
+| `videojs.log.history.enable()`  | n/a             | n/a               |
+
+For descriptions of these features, please refer to the sections below.
+
+### Log Safely
+
+Unlike the `console`, it's safe to leave `videojs.log` calls in your code. They won't throw errors when the `console` doesn't exist.
+
+### Log Objects Usefully
+
+Similar to the `console`, any number of mixed-type values can be passed to `videojs.log` methods:
+
+```js
+videojs.log('this is a string', {butThis: 'is an object'});
+```
+
+However, certain browser consoles (namely, IE10 and lower) do not support non-string values. Video.js improves on this situation by passing objects through `JSON.stringify` before logging them in IE10 and below. In other words, instead of the above producing this:
+
+```txt
+VIDEOJS: this is a string [object Object]
+```
+
+it will produce this:
+
+```txt
+VIDEOJS: this is a string {"butThis": "is an object"}
+```
+
+### Log Levels
+
+Unlike the `console`, `videojs.log` includes the concept of logging levels. These levels toggle logging methods on or off.
+
+Levels are exposed through the `videojs.log.level` method. This method acts as both a getter and setter for the current logging level. With no arguments, it returns the current logging level:
+
+```js
+videojs.log.level(); // "all"
+```
+
+By passing a string, the logging level can be changed to one of the available logging levels:
+
+```js
+videojs.log.level('error'); // show only error messages and suppress others
+videojs.log('foo'); // does nothing
+videojs.log.warn('foo'); // does nothing
+videojs.log.error('foo'); // logs "foo" as an error
+```
+
+### Available Log Levels
+
+* **all** (default): enables all logging methods
+* **error**: only show `log.error` messages
+* **off**: disable all logging methods
+* **warn**: only show `log.warn` _and_ `log.error` messages
+
+### History
+
+> **Note:** In Video.js 5, `videojs.log.history` was an array. As of Video.js 6, it is a function which returns an array. This change was made to provide a richer, safer logging history API.
+
+By default, the `videojs.log` module tracks a history of _everything_ passed to it regardless of logging level:
+
+```js
+videojs.log.history(); // an array of everything that's been logged up to now
+```
+
+This will work even when logging is set to **off**.
+
+This can be useful, but it can also be a source of memory leaks. For example, logged objects will be retained in history even if references are removed everywhere else!
+
+To avoid this problem, history can be disabled or enabled via method calls (using the `disable` and `enable` methods respectively). Disabling history is as easy as:
+
+```js
+videojs.log.history.disable();
+```
+
+Finally, the history (if enabled) can be cleared at any time via:
+
+```js
+videojs.log.history.clear();
+```
+
+[api]: http://docs.videojs.com/
+
+[console]: https://developer.mozilla.org/en-US/docs/Web/API/Console

docs/guides/event-target.md

@@ -0,0 +1,118 @@
+# Event Target
+
+## Table of Contents
+
+* [Overview](#overview)
+* [on() and addEventListener()](#on-and-addeventlistener)
+* [off() and removeEventListener()](#off-and-removeeventlistener)
+* [one()](#one)
+* [trigger() and dispatchEvent()](#trigger-and-dispatchevent)
+
+## Overview
+
+Events in Video.js are setup so that they mimic the DOM API that is used on object, but also have helpful shorthand functions with the same functionality.
+
+## `on()` and `addEventListener()`
+
+This function is used to add an event listener to an EventTarget.
+
+```js
+var foo = new EventTarget();
+var handleBar = function() {
+  console.log('bar was triggered');
+};
+
+foo.on('bar', handleBar);
+
+// This causes any `event listeners` for the `bar` event to get called
+// see {@link EventTarget#trigger} for more information
+foo.trigger('bar');
+// logs 'bar was triggered'
+```
+
+## `off()` and `removeEventListener()`
+
+This function is used to remove an listener function from an EventTarget.
+
+```js
+var foo = new EventTarget();
+var handleBar = function() {
+  console.log('bar was triggered');
+};
+
+// adds an `event listener` for the `bar` event
+// see {@link EventTarget#on} for more info
+foo.on('bar', handleBar);
+
+// runs all `event listeners` for the `bar` event
+// see {@link EventTarget#trigger} for more info
+foo.trigger('bar');
+// logs 'bar was triggered'
+
+foo.off('bar', handleBar);
+foo.trigger('bar');
+// does nothing
+```
+
+## `one()`
+
+This function is used to only have an event listener called once and never again.
+
+Using `on()` and `off()` to mimic `one()` (not recommended)
+
+```js
+var foo = new EventTarget();
+var handleBar = function() {
+  console.log('bar was triggered');
+  // after the first trigger remove this handler
+  foo.off('bar', handleBar);
+};
+
+foo.on('bar', handleBar);
+foo.trigger('bar');
+// logs 'bar was triggered'
+
+foo.trigger('bar');
+// does nothing
+```
+
+Using `one()`
+
+```js
+var foo = new EventTarget();
+var handleBar = function() {
+  console.log('bar was triggered');
+};
+
+// removed after the first trigger
+foo.one('bar', handleBar);
+foo.trigger('bar');
+// logs 'bar was triggered'
+
+foo.trigger('bar');
+// does nothing
+```
+
+## `trigger()` and `dispatchEvent()`
+
+This function is used to trigger an event on an EventTarget which will cause all listeners to run.
+
+> Note: if 'click' is in `EventTarget.allowedEvents_`, trigger will attempt to call the
+>       `onClick` function if it exists.
+
+```js
+var foo = new EventTarget();
+var handleBar = function() {
+  console.log('bar was triggered');
+};
+
+foo.on('bar', handleBar);
+foo.trigger('bar');
+// logs 'bar was triggered'
+
+foo.trigger('bar');
+// logs 'bar was triggered'
+
+foo.trigger('foo');
+// does nothing
+```

docs/guides/faq.md

@@ -1,179 +1,364 @@
 # FAQ
 
-## Q: What is video.js?
-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).
-  * Unifies the native video api across browsers (polyfilling support for features
-    if necessary)
-  * Offers an extendable and themable UI
-  * Takes care of accessibility for the user (in-progress)
-  * Has a set of core plugins that offer support for tons of additional video formats.
-    * [videojs-contrib-hls][hls]
-    * [videojs-contrib-dash][dash]
-  * Support for DRM video via a core plugin
-    * [videojs-contrib-eme][eme]
-  * Lots of plugins which offer support for all kinds of features. See the [plugin list on videojs.com][plugin-list]
+## Table of Contents
 
-## Q: How do I install video.js?
-Currently video.js can be installed using bower, 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: What is Video.js?](#q-what-is-videojs)
+* [Q: How do I install Video.js?](#q-how-do-i-install-videojs)
+* [Q: Is Video.js on bower?](#q-is-videojs-on-bower)
+* [Q: What do Video.js version numbers mean?](#q-what-do-videojs-version-numbers-mean)
+* [Q: How can I troubleshoot playback issues?](#q-how-can-i-troubleshoot-playback-issues)
+* [Q: A video does not play in a specific browser. Why?](#q-a-video-does-not-play-in-a-specific-browser-why)
+* [Q: Why does the entire video download before playback? Why does the video load for a long time?](#q-why-does-the-entire-video-download-before-playback-why-does-the-video-load-for-a-long-time)
+* [Q: I see an error thrown that mentions vdata12345. What is that?](#q-i-see-an-error-thrown-that-mentions-vdata12345-what-is-that)
+* [Q: I think I found a bug with Video.js or I want to add a feature. What should I do?](#q-i-think-i-found-a-bug-with-videojs-or-i-want-to-add-a-feature-what-should-i-do)
+  * [if you think that you can fix the issue or add the feature](#if-you-think-that-you-can-fix-the-issue-or-add-the-feature)
+  * [If you don't think you can fix the issue or add the feature](#if-you-dont-think-you-can-fix-the-issue-or-add-the-feature)
+* [Q: What is a reduced test case?](#q-what-is-a-reduced-test-case)
+* [Q: What media formats does Video.js support?](#q-what-media-formats-does-videojs-support)
+* [Q: How does Video.js choose which source to use?](#q-how-does-videojs-choose-which-source-to-use)
+* [Q: How to I autoplay the video?](#q-how-to-i-autoplay-the-video)
+  * [Q: How can I autoplay a video on a mobile device?](#q-how-can-i-autoplay-a-video-on-a-mobile-device)
+* [Q: How can I play RTMP video in Video.js?](#q-how-can-i-play-rtmp-video-in-videojs)
+* [Q: How can I hide the links to my video/subtitles/audio/tracks?](#q-how-can-i-hide-the-links-to-my-videosubtitlesaudiotracks)
+* [Q: Can I turn off Video.js logging?](#q-can-i-turn-off-videojs-logging)
+* [Q: What is a plugin?](#q-what-is-a-plugin)
+* [Q: How do I make a plugin for Video.js?](#q-how-do-i-make-a-plugin-for-videojs)
+* [Q: Where can I find a list of Video.js plugins?](#q-where-can-i-find-a-list-of-videojs-plugins)
+* [Q: How can I get my plugin listed on the website?](#q-how-can-i-get-my-plugin-listed-on-the-website)
+* [Q: Where can I find a list of Video.js skins?](#q-where-can-i-find-a-list-of-videojs-skins)
+* [Q: Does Video.js work as an audio only player?](#q-does-videojs-work-as-an-audio-only-player)
+* [Q: Does Video.js support audio tracks?](#q-does-videojs-support-audio-tracks)
+* [Q: Does Video.js support video tracks?](#q-does-videojs-support-video-tracks)
+* [Q: Does Video.js support text tracks (captions, subtitles, etc)?](#q-does-videojs-support-text-tracks-captions-subtitles-etc)
+* [Q: Does Video.js support HLS (HTTP Live streaming) video?](#q-does-videojs-support-hls-http-live-streaming-video)
+* [Q: Does Video.js support MPEG Dash video?](#q-does-videojs-support-mpeg-dash-video)
+* [Q: Does Video.js support live video?](#q-does-videojs-support-live-video)
+* [Q: Can Video.js wrap around YouTube videos?](#q-can-videojs-wrap-around-youtube-videos)
+* [Q: Can Video.js wrap around Vimeo videos?](#q-can-videojs-wrap-around-vimeo-videos)
+* [Q: Does Video.js support DRM video?](#q-does-videojs-support-drm-video)
+* [Q: Does Video.js have any support for advertisement integrations?](#q-does-videojs-have-any-support-for-advertisement-integrations)
+* [Q: Can Video.js be required in node.js?](#q-can-videojs-be-required-in-nodejs)
+* [Q: Does Video.js work with webpack?](#q-does-videojs-work-with-webpack)
+* [Q: Does Video.js work with react?](#q-does-videojs-work-with-react)
 
-## Q: Is video.js on bower?
-Yes! See the [install guide][install-guide] for more information.
+## Q: What is Video.js?
 
-## Q: What do video.js version numbers mean?
-video.js follows [semver][semver] which means that the API should not change
+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][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
+* Ensures accessibility for keyboard and screen reader users
+* Has a set of core plugins that offer support for additional video formats:
+  * [videojs-contrib-hls][hls]
+  * [videojs-contrib-dash][dash]
+* Supports  DRM video via a core plugin:
+  * [videojs-contrib-eme][eme]
+* Is extensible with lots of plugins offering support for all kinds of features. See the [plugin list on videojs.com][plugin-list]
+
+## Q: How do I install Video.js?
+
+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 [setup guide][install-guide].
+
+## Q: Is Video.js on bower?
+
+Versions prior to Video.js 6 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?
+
+Video.js follows [semver][semver] which means that the API should not change
 out from under a user unless there is a major version increase.
 
 ## Q: How can I troubleshoot playback issues?
+
 See the [troubleshooting guide][troubleshooting]. If troubleshooting does not
-solve your issue, please submit a [pull request or an issue][pr-issue-question].
+solve your issue, please ask in [Slack][slack] or submit an [issue][pr-issue-question].
+
+When seeking help about a playback issue the problem is often specific to the video file used, the way the video is hosted or the browser, so make sure to include all of that information and a [reduced test case](#q-what-is-a-reduced-test-case).
 
 ## Q: A video does not play in a specific browser. Why?
+
 See the [troubleshooting guide][troubleshooting]. If troubleshooting does not
-solve your issue, please submit a [pull request or an issue][pr-issue-question].
+solve your issue, please ask in [Slack][slack] or submit an [issue][pr-issue-question].
 
 ## Q: Why does the entire video download before playback? Why does the video load for a long time?
+
 See the [troubleshooting guide][troubleshooting]. If troubleshooting does not
-solve your issue, please submit a [pull request or an issue][pr-issue-question].
+solve your issue, please ask in [Slack][slack] or submit an [issue][pr-issue-question].
 
 ## Q: I see an error thrown that mentions `vdata12345`. What is that?
-See the [troubleshooting guide][troubleshooting]. If troubleshooting does not
-solve your issue, please submit a [pull request or an issue][pr-issue-question].
 
-## Q: I think I found a bug with video.js or I want to add a feature. What should I do?
-### if you think that you can fix the issue or add the feature
-Submit a pull request to the [video.js repo][vjs-prs].
+See the [troubleshooting guide][troubleshooting]. If troubleshooting does not
+solve your issue, please ask in [Slack][slack] or submit an [issue][pr-issue-question].
+
+## Q: I think I found a bug with Video.js or I want to add a feature. What should I do?
+
+### If you think that you can fix the issue or add the feature
+
+A pull request would be very welcome in the [Video.js repo][vjs-prs].
 Make sure to follow the [contributing guide][contributing-prs] and
 the [pull request template][pr-template].
 
 ### If you don't think you can fix the issue or add the feature
-Open an [issue on the video.js repo][vjs-issues]. Make
+
+Open an [issue on the Video.js repo][vjs-issues]. Make
 sure that you follow the [issue template][issue-template] and the
 [contributing guide][contributing-issues] so that we can better assist you
 with your issue.
 
 ## Q: What is a reduced test case?
+
 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: https://css-tricks.com/reduced-test-cases/
 
-## Q: What media formats does video.js support?
+It's important to add a reduced case. Even if the problem seems obvious it may not be to
+others. Having a example to refer to also makes the difference between somebody being able
+to take a look and immediately see what's wrong, and needing to take time to recreate what
+they think you are describing.
+
+We have a [starter example][starter-example] for reduced test cases. To learn more
+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 does Video.js choose which source to use?
+
+When an array of sources is available, Video.js test each source in the order given. For each source, each tech in the [`techOrder`][techorder] will be checked to see if it can play it whether directly or via source handler (such as videojs-contrib-hls). The first match will be chosen.
+
+## Q: How to I autoplay the video?
+
+Video.js supports the standard html5 `autoplay` attribute on the video element.
+It also supports it as an option to Video.js or as a method invocation on the player.
+
+```html
+<video autoplay controls class="video-js">
+```
+
+```js
+var player = videojs('my-video', {
+  autoplay: true
+});
+
+// or
+
+player.autoplay(true);
+```
+
+### Q: How can I autoplay a video on a mobile device?
+
+Most mobile devices have blocked autoplaying videos until recently.
+For mobile devices that don't support autoplaying, autoplay isn't supported by Video.js.
+For those devices that support autoplaying, like iOS10 and Chrome for Android 53+,
+you must mute the video or have a video without audio tracks to be able to play it.
+For example:
+
+```html
+<video muted autoplay playsinline>
+```
+
+Will make an inline, muted, autoplaying video on an iPhone with iOS10.
+
+## Q: How can I play RTMP video in Video.js?
+
+RTMP requires Flash to play back. You'll need both a browser that supports Flash and the Flash tech.
+
+In Video.js version 6, the Flash tech is not included by default and is available as a separate [videojs-flash package][flash]. In previous versions it was builtin to Video.js.
+
+The RTMP source should be set with an appropriate type -- `rtmp/mp4` or `rtmp/flv`.
+Be aware of that Video.js splits the connection url and stream name with the `&` character, for example: `rtmp://example.com/live&foo` or `rtmp://example.com/fms&mp4:path/to/file.mp4`.
+
+If the server requires query parameters for authentication, these should be added to the connection part URL, for example `rtmp://example.com/live?token=1234&foo`.
+
+Bear in mind that mobile browsers do not support Flash, and modern desktop browsers make it increasingly difficult to use Flash or disable it by default for your end users. Consider moving to a modern format such as HLS or DASH.
 
 ## Q: How can I hide the links to my video/subtitles/audio/tracks?
+
 It's impossible to hide the network requests a browser makes and difficult to
 sufficiently obfuscate URLs in the source. Techniques such as token authentication may
-help but are outside of the scope of video.js.
+help but are outside of the scope of Video.js.
 
 For content that must be highly secure [videojs-contrib-eme][eme] adds DRM support.
 
+## Q: Can I turn off Video.js logging?
+
+Yes! This can be achieved by adding the following code _after_ including Video.js, but _before_ creating any player(s):
+
+```js
+videojs.log.level('off');
+```
+
+For more information, including which logging levels are available, check out the [debugging guide][debug-guide].
+
 ## Q: What is a plugin?
+
 A plugin is a group of reusable functionality that can be re-used by others. For instance a plugin could add
-a button to video.js that makes the video replay 10 times in a row before it stops playback for good. If such
+a button to Video.js that makes the video replay 10 times in a row before it stops playback for good. If such
 a plugin existed and was published users could include it on their page to share that functionality.
 
-## Q: How do I make a plugin for video.js?
-See the [plugin guide][plugin-guide] for information on making a plugin for video.js.
+## Q: How do I make a plugin for Video.js?
 
-<!-- TODO: Once these is a button guide, add this back in
-## Q: How do I add a button to video.js?
-See the [button guide][button-guide] for information on adding a button to video.js.
--->
+See the [plugin guide][plugin-guide] for information on making a plugin for Video.js.
 
-## Q: Where can I find a list of video.js plugins?
-The official [list of plugins on videojs.com][plugin-list].
+## Q: How do I add a button to Video.js?
+See the [components guide][components-guide] for an example of adding a button to Video.js.
+
+## Q: Where can I find a list of Video.js plugins?
+
+A list of plugins published to npm with the `videojs-plugin` keyword is maintained [on videojs.com][plugin-list].
 
 ## Q: How can I get my plugin listed on the website?
+
 Add the 'videojs-plugin' [keyword to your array in package.json][npm-keywords]
 and publish your package to npm. If you use the [plugin generator][generator] this will be done automatically for you. See
 the [plugins guide][plugin-guide] for more information.
 
-## Q: Where can I find a list of video.js skins?
-See the [video.js github wiki][skins-list].
+## Q: Where can I find a list of Video.js skins?
 
-## Q: Does video.js work as an audio only player?
-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.
+See the [Video.js GitHub wiki][skins-list].
+
+## Q: Does Video.js work as an audio only player?
+
+Yes! It can be used to play audio only files in a `<video>` or `<audio>` tag.
+Note that audio-only sources do not work with the Flash playback tech.
+
+## Q: Does Video.js support audio tracks?
 
-## Q: Does video.js support audio tracks?
 Yes! See the [audio tracks guide][audio-tracks] for information on using audio tracks.
 
-## Q: Does video.js support video tracks?
-The code for video tracks exists but it has not been tested. See the [video tracks guide][video-tracks]
+## Q: Does Video.js support video tracks?
+
+Alternate video tracks support is in development. See [video tracks guide][video-tracks]
 for more information on using video tracks.
 
-## Q: Does video.js support text tracks (captions, subtitles, etc)?
+## Q: Does Video.js support text tracks (captions, subtitles, etc)?
+
 Yes! See the [text tracks guide][text-tracks] for information on using text tracks.
 
-## Q: Does video.js support HLS (HTTP Live streaming) video?
-video.js supports HLS video if the native HTML5 element supports HLS (e.g. Safari, Edge,
-Chrome for Android, and iOS). For browsers without native support see the [videojs-contrib-hls][hls]
+## Q: Does Video.js support HLS (HTTP Live streaming) video?
+
+Video.js supports HLS video if the native HTML5 element supports HLS (e.g. Safari, Edge,
+Chrome for Android, and iOS). For browsers without native support the [videojs-contrib-hls][hls]
 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]
-adds support for MPEG DASH video.
+Note that for non-native playback of HLS it is essential that the server hosting the video sets [CORS headers][cors].
 
-## 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
-if you add it to your page with video.js.
+## Q: Does Video.js support MPEG DASH video?
 
-## Q: Can video.js wrap around YouTube videos?
-No. There is an official plugin that adds support. It is called [videojs-youtube][youtube].
+MPEG DASH support is provided byt the [videojs-contrib-dash][dash]
+package.
 
-## Q: Can video.js wrap around Vimeo videos?
-No. There is an official plugin that adds support. It is called [videojs-vimeo][vimeo].
+Like HLS, DASH streams require [CORS headers][cors].
 
-## Q: Does video.js support DRM video?
-No. There is an official plugin that adds support. It is called [videojs-contrib-eme][eme].
+## Q: Does Video.js support live video?
 
-## Q: Does video.js have any support for advertisement integrations?
-No. There is an official plugin that adds support. It is called [videojs-contrib-ads][ads].
+Yes! Common formats for live are HLS or historically RTMP.
+HLS is supported via [videojs-contrib-hls][hls]. and RTMP via [videojs-flash][flash].
 
-## Q: Can video.js be required in node.js?
-Yes! Please [submit an issue or open a pull request][pr-issue-question] if this does not work.
+## Q: Can Video.js play YouTube videos?
 
-## Q: Does video.js work with webpack?
-Yes! Please [submit an issue or open a pull request][pr-issue-question] if this does not work.
+There is an official plugin that adds support, [videojs-youtube][youtube].
 
-<!-- guides -->
-[plugin-guide]: /docs/guides/plugins.md
-[install-guide]: http://videojs.com/getting-started/
-[troubleshooting]: /docs/guides/troubleshooting.md
-[video-tracks]: /docs/guides/video-tracks.md
-[audio-tracks]: /docs/guides/audio-tracks.md
-[text-tracks]:  /docs/guides/text-tracks.md
-[pr-issue-question]: /docs/guides/faq.md#q-i-think-i-found-a-bug-with-videojs-or-i-want-to-add-a-feature-what-should-i-do
+## Q: Can Video.js play Vimeo videos?
+
+There is an official plugin that adds support, [videojs-vimeo][vimeo].
+
+## Q: Does Video.js support DRM video?
+
+There is an official plugin that adds support, [videojs-contrib-eme][eme].
+
+## Q: Does Video.js have any support for advertisement integrations?
+
+There is an official plugin that adds core advertising support, [videojs-contrib-ads][ads]. Further plugins build on this which handle the communication with the ad server and display of the ad, for instance [Google's IMA plugin][google-ima].
+
+## Q: Can Video.js be required in node.js?
+
+Yes! Video.js is [published on NPM][node].
+
+## Q: Does Video.js work with webpack?
+
+Yes! See the [Webpack and Video.js configuration guide][webpack-guide].
+
+## Q: Does Video.js work with react?
+
+Yes! See [ReactJS integration example][react-guide].
 
-<!-- official projects -->
-[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
 [ads]: https://github.com/videojs/videojs-contrib-ads
 
-<!-- website/github -->
-[pr-template]: /.github/PULL_REQUEST_TEMPATLE.md
-[issue-template]: /.github/ISSUE_TEMPLATE.md
+[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
+
+[components-guide]: /docs/guides/components.md
+
+[cors]: https://enable-cors.org
+
+[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
+
+[google-ima]: https://github.com/googleads/videojs-ima
+
+[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
+
+[node]: https://www.npmjs.com/package/video.js
+
+[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
-[contributing-issues]: /CONTRIBUTING.md#filing-issues
-[contributing-prs]: /CONTRIBUTING.md#contributing-code
+
+[slack]: https://videojs.slack.com
+
+[starter-example]: http://jsbin.com/axedog/edit?html,output
+
+[techorder]: [cors]: /docs/guides/options.md#techorder
+
+[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
 
-<!-- external -->
-[npm-keywords]: https://docs.npmjs.com/files/package.json#keywords
-[semver]: http://semver.org/
-[starter-example]: http://jsbin.com/axedog/edit?html,output
+[webpack-guide]: /docs/guides/webpack.md
+
+[youtube]: https://github.com/videojs/videojs-youtube

docs/guides/hooks.md

@@ -1,55 +1,74 @@
 # Hooks
-Hooks exist so that users can "hook" on to certain video.js player lifecycle
 
+Hooks exist so that users can "hook" on to certain Video.js player lifecycle
+
+## Table of Contents
+
+* [Current Hooks](#current-hooks)
+  * [beforesetup](#beforesetup)
+  * [setup](#setup)
+* [Usage](#usage)
+  * [Adding](#adding)
+  * [Getting](#getting)
+  * [Removing](#removing)
 
 ## Current Hooks
-Currently, the following hooks are avialable:
+
+Currently, the following hooks are available:
 
 ### beforesetup
+
 `beforesetup` is called just before the player is created. This allows:
-* modification of the options passed to the video.js function (`videojs('some-id, options)`)
+
+* modification of the options passed to the Video.js function (`videojs('some-id, options)`)
 * modification of the dom video element that will be used for the player
 
 `beforesetup` hook functions should:
+
 * take two arguments
-    1. videoEl: dom video element that video.js is going to use to create a player
-    2. options: options that video.js was intialized with and will later pass to the player during creation
-* return options that will merge and override options that video.js with intialized with
+  1. videoEl: dom video element that Video.js is going to use to create a player
+  1. options: options that Video.js was intialized with and will later pass to the player during creation
+* return options that will merge and override options that Video.js with intialized with
 
 Example: adding beforesetup hook
+
 ```js
-    var beforeSetup = function(videoEl, options) {
-        // videoEl.id will be some-id here, since that is what video.js
-        // was created with
+var beforeSetup = function(videoEl, options) {
+  // videoEl.id will be some-id here, since that is what Video.js
+  // was created with
 
-        videoEl.className += ' some-super-class';
+  videoEl.className += ' some-super-class';
 
-        // autoplay will be true here, since we passed in as such
-        (options.autoplay) {
-            options.autoplay = false
-        }
+  // autoplay will be true here, since we passed in as such
+  (options.autoplay) {
+    options.autoplay = false
+  }
 
-        // options that are returned here will be merged with old options
-        // in this example options will now be
-        // {autoplay: false, controls: true}
-        return options;
-    };
+  // options that are returned here will be merged with old options
+  // in this example options will now be
+  // {autoplay: false, controls: true}
+  return options;
+};
 
-    videojs.hook('beforesetup', beforeSetup);
-    videojs('some-id', {autoplay: true, controls: true});
+videojs.hook('beforesetup', beforeSetup);
+videojs('some-id', {autoplay: true, controls: true});
 ```
 
 ### setup
+
 `setup` is called just after the player is created. This allows:
-* plugin or custom functionalify to intialize on the player
+
+* plugin or custom functionality to intialize on the player
 * changes to the player object itself
 
 `setup` hook functions:
+
 * Take one argument
-    * player: the player that video.js created
+  * player: the player that Video.js created
 * Don't have to return anything
 
-Example: adding setup hook
+Example: adding a setup hook
+
 ```js
     var setup = function(player) {
         // initialize the foo plugin
@@ -57,7 +76,7 @@ Example: adding setup hook
     };
     var foo = function() {};
 
-    videojs.plugin('foo', foo);
+    videojs.registerPlugin('foo', foo);
     videojs.hook('setup', setup);
     var player = videojs('some-id', {autoplay: true, controls: true});
 ```
@@ -65,56 +84,63 @@ Example: adding setup hook
 ## Usage
 
 ### Adding
-In order to use hooks you must first include video.js in the page or script that you are using. Then you add hooks using `videojs.hook(<name>, function)` before running the `videojs()` function.
+
+In order to use hooks you must first include Video.js in the page or script that you are using. Then you add hooks using `videojs.hook(<name>, function)` before running the `videojs()` function.
 
 Example: adding hooks
+
 ```js
-    videojs.hook('beforesetup', function(videoEl, options) {
-        // videoEl will be the element with id=vid1
-        // options will contain {autoplay: false}
-    });
-    videojs.hook('setup', function(player) {
-        // player will be the same player that is defined below
-        // as `var player`
-    });
-    var player = videojs('vid1', {autoplay: false});
+videojs.hook('beforesetup', function(videoEl, options) {
+  // videoEl will be the element with id=vid1
+  // options will contain {autoplay: false}
+});
+videojs.hook('setup', function(player) {
+  // player will be the same player that is defined below
+  // as `var player`
+});
+
+var player = videojs('vid1', {autoplay: false});
 ```
 
-After adding your hooks they will automatically be run at the correct time in the video.js lifecycle.
+After adding your hooks they will automatically be run at the correct time in the Video.js lifecycle.
 
 ### Getting
-To access the array of hooks that currently exists and will be run on the video.js object you can use the `videojs.hooks` function.
 
-Example: getting all hooks attached to video.js
+To access the array of hooks that currently exists and will be run on the Video.js object you can use the `videojs.hooks` function.
+
+Example: getting all hooks attached to Video.js
+
 ```js
-    var beforeSetupHooks = videojs.hooks('beforesetup');
-    var setupHooks = videojs.hooks('setup');
+var beforeSetupHooks = videojs.hooks('beforesetup');
+var setupHooks = videojs.hooks('setup');
 ```
 
 ### Removing
-To stop hooks from being executed during the video.js lifecycle you will remove them using `videojs.removeHook`.
+
+To stop hooks from being executed during the Video.js lifecycle you will remove them using `videojs.removeHook`.
 
 Example: remove a hook that was defined by you
+
 ```js
-    var beforeSetup = function(videoEl, options) {};
+var beforeSetup = function(videoEl, options) {};
 
-    // add the hook
-    videojs.hook('beforesetup', beforeSetup);
+// add the hook
+videojs.hook('beforesetup', beforeSetup);
 
-    // remove that same hook
-    videojs.removeHook('beforesetup', beforeSetup);
+// remove that same hook
+videojs.removeHook('beforesetup', beforeSetup);
 ```
 
 You can also use `videojs.hooks` in conjunction with `videojs.removeHook` but it may have unexpected results if used during an asynchronous callbacks as other plugins/functionality may have added hooks.
 
 Example: using `videojs.hooks` and `videojs.removeHook` to remove a hook
+
 ```js
-    // add the hook
-    videojs.hook('setup', function(videoEl, options) {});
+// add the hook
+videojs.hook('setup', function(videoEl, options) {});
 
-    var setupHooks = videojs.hooks('setup');
+var setupHooks = videojs.hooks('setup');
 
-    // remove the hook you just added
-    videojs.removeHook('setup', setupHooks[setupHooks.length - 1]);
+// remove the hook you just added
+videojs.removeHook('setup', setupHooks[setupHooks.length - 1]);
 ```
-

docs/guides/languages.md

@@ -1,20 +1,43 @@
 # Languages
-Multiple language support allows for users of non-English locales to natively interact with the Video.js player.
 
-For an up-to-date list of the languages Video.js supports, see the [languages folder (`lang`)][lang-supported]. These JSON files are converted to JavaScript during the Video.js build process.
+Video.js includes localization support to present text in a language other than the default English where appropriate.
+
+For an up-to-date list of the languages Video.js supports, see the [languages folder (`lang`)][lang-supported].
+Some translations may be less complete than others - see the [translations needed doc][translations-needed] for a table of strings that are missing from the translations available.  Contributions are welcome to update those that are incomplete.
+
+## Table of Contents
+
+* [Using Video.js Languages](#using-videojs-languages)
+* [Contributing to Video.js Translations](#contributing-to-videojs-translations)
+  * [JSON Format](#json-format)
+  * [File Naming](#file-naming)
+  * [Updating an Existing Translation](#updating-an-existing-translation)
+  * [Writing a New Translation](#writing-a-new-translation)
+* [Advanced Language Usage](#advanced-language-usage)
+  * [Adding Languages via the API](#adding-languages-via-the-api)
+  * [Per-Player Languages](#per-player-languages)
+  * [Setting Default Player Language](#setting-default-player-language)
+  * [Determining Player Language](#determining-player-language)
+    * [Internal Language Selection](#internal-language-selection)
+* [References](#references)
 
 ## Using Video.js Languages
-Video.js ships with multiple translations (in `dist/lang/`) in JavaScript files. Each of these files can be included in a web page to provide support for that language in _all_ Video.js players:
 
-```
+Video.js ships with multiple translations (in `dist/lang/`) in JavaScript files.
+Add the lang script for each language you need to support.
+Each of these files can be included in a web page to provide support for that language in _all_ Video.js players:
+
+```html
 <script src="//example.com/path/to/video.min.js"></script>
 <script src="//example.com/path/to/lang/es.js"></script>
 ```
 
 ## Contributing to Video.js Translations
-We welcome new translations and improvements to existing ones! Please see the [contributing document](../../CONTRIBUTING.md) to get started contributing to Video.js and continue reading for specifics on how to contribute to translations of Video.js...
+
+We welcome new translations and improvements to existing ones! Please see the [contributing document](../../CONTRIBUTING.md) to get started contributing to Video.js and continue reading for specifics on how to contribute to translations of Video.js.
 
 ### JSON Format
+
 Video.js uses a JSON object to describe a language, where the keys are English and the values are the target language. For example, a Spanish translation might look like this:
 
 ```JSON
@@ -29,23 +52,23 @@ Video.js uses a JSON object to describe a language, where the keys are English a
 ```
 
 ### File Naming
-Translations are always found in the `lang/` directory.
 
-Each file's name should be the [standard language code][lang-codes] that is most appropriate. For example, "es" for Spanish or "zh-CN" for Chinese.
+Translations are found in the `lang/` directory.
 
-Finally, each file's extension is always `.json`.
+Each file's name should be the [standard language code][lang-codes] that is most appropriate, with a `.json` extension. For example, "es.json" for Spanish or "zh-CN.json" for simplified Chinese.
 
 ### 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
+
 The process for writing an entirely new translation is virtually identical to the process for [updating an existing translation](#updating-an-existing-translation) except that the new translation JSON file needs to be created.
 
 The template for new language files is the English file ([lang/en.json][lang-en]). This file is always up-to-date with strings that need translations.
@@ -53,23 +76,19 @@ The template for new language files is the English file ([lang/en.json][lang-en]
 The first step to writing a new translation is to copy the English file:
 
 ```sh
-$ cp lang/en.json lang/${NEW_LANG_CODE}.json
+cp lang/en.json lang/${NEW_LANG_CODE}.json
 ```
 
 Otherwise, the process is the same as [updating an existing translation](#updating-an-existing-translation).
 
-## Advanced Language Usage
-The instructions above for [using Video.js languages](#using-videojs-languages) should be sufficient for the majority of use-cases. However, languages can be provided at runtime.
-
-In each case, these custom language definitions _take precedence over any Video.js-provided languages!_
-
 ### Adding Languages via the API
+
 In addition to the stand-alone scripts provided by Video.js, the API supports manual definition of new languages via the `addLanguage` method. It takes two arguments: the [standard language code][lang-codes] and a [language definition object](#json-format).
 
 ```js
 videojs.addLanguage('es', {
-  'Play': 'Reproducción',
-  'Pause': 'Pausa',
+  Play: 'Reproducción',
+  Pause: 'Pausa',
   'Current Time': 'Tiempo reproducido',
   'Duration Time': 'Duración total',
   'Remaining Time': 'Tiempo restante',
@@ -77,53 +96,63 @@ 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):
+`addLanguage()` will overwrite existing translations if the object includes strings previously translated. However text that has already been localised will not be updated after generation.
+
+### Per-Player Translations
+
+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.
 videojs('my-player', {
   languages: {
-    es: {...}
+    es: {
+      Play: 'Reproducir'
+    }
   }
 });
 ```
 
-### Setting Default Player Language
+### Setting Player Language
 
-Player instances can also have a default language via [the `language` option](options.md#language):
+The language used by a player instance may be set via [the `language` option](/docs/guides/options.md#language):
 
 ```js
-// Set the default language to Spanish for this player.
+// Set the language to Spanish for this player.
 videojs('my-player', {
   language: 'es'
 });
 ```
 
-Additionally, the `language` method of the player can be used to set the language after instantiation (e.g., `language('es')`). However, this is not recommended as it does not update the UI in place. _Setting the language via options is always preferred._
+The `language` method of the player _can_ be used to set the language after instantiation with `language('es')`. However, this is generally not useful as it does not update text that is already in place.
 
 ### Determining Player Language
 
 The player language is set to one of the following in descending priority:
 
-- The language [specified in options](#setting-default-player-language)
-- The language specified by the closest element with a `lang` attribute. This could be the player itself or a parent element. Usually, the document language is specified on the `<html>` tag.
-- Browser language preference; the first language if more than one is configured
-- English
+* The language [specified in options](#setting-default-player-language)
+* The language specified by a `lang` attribute on the player element.
+* The language specified by the closest parent element with a `lang` attribute, up to and including the `<html>` element.
+* The browser language preference; the first language if more than one is configured
+* English
 
 #### Internal Language Selection
-- Language codes are considered case-insensitively (e.g. `en-US` == `en-us`).
-- If there is no match for a language code with a subcode (e.g. `en-us`), a match for the primary code (e.g. `en`) is used if available.
+
+* Language codes are considered case-insensitively (e.g. `en-US` == `en-us`).
+* If there is no match for a language code with a subcode (e.g. `en-us`), a match for the primary code (e.g. `en`) is used if available.
 
 ## 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.
+For all existing/supported languages, please see the [languages folder (`lang/`)][lang-supported] folder located in the project root.
 
+[lang-en]: /lang/en.json
+
+[lang-supported]: /lang
 
-[lang-en]: https://github.com/videojs/video.js/tree/master/lang/en.json
-[lang-supported]: https://github.com/videojs/video.js/tree/master/lang
 [lang-codes]: http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
+
+[translations-needed]: https://github.com/videojs/video.js/blob/master/docs/translations-needed.md

docs/guides/modal-dialog.md

@@ -0,0 +1,78 @@
+# Using the Modal Dialog Component
+
+The `ModalDialog` component is part of Video.js core and provides a baked-in UI for full-player overlays.
+
+## Table of Contents
+
+* [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)
+
+## Creating a ModalDialog
+
+Aside from the [built-in Video.js component-creation methods][creating-component], the player includes a `createModal()` helper method.
+
+We'll demonstrate both approaches in this document by creating a modal that opens when the player becomes paused and resumes playback when it is closed.
+
+### Example Using `createModal()`
+
+The `createModal()` method is intended for creating one-off modals that need to open for some temporary purpose. Therefore, they open themselves immediately upon creation and, by default, dispose themselves immediately upon closing.
+
+```js
+var player = videojs('my-player');
+
+player.on('pause', function() {
+
+  // Modals are temporary by default. They dispose themselves when they are
+  // closed; so, we can create a new one each time the player is paused and
+  // not worry about leaving extra nodes hanging around.
+  var modal = player.createModal('This is a modal!');
+
+  // When the modal closes, resume playback.
+  modal.on('modalclose', function() {
+    player.play();
+  });
+});
+```
+
+The `createModal()` method also takes a second argument - an object containing options for the modal. Refer to [the API documentation][api-doc] for a full set of options.
+
+### Example Using the `ModalDialog` Constructor
+
+Unlike when using `createModal()`, a modal created with any of the [common component creation methods][creating-component] _does not_ open by default. This makes this approach better suited to modals that are expected to live in the DOM indefinitely.
+
+```js
+var player = videojs('my-player');
+var ModalDialog = videojs.getComponent('ModalDialog');
+
+var modal = new ModalDialog(player, {
+
+  // We don't want this modal to go away when it closes.
+  temporary: false
+});
+
+player.addChild(modal);
+
+player.on('pause', function() {
+  modal.open();
+});
+
+player.on('play', function() {
+  modal.close();
+});
+```
+
+Both of these examples are equivalent when it comes to the user's experience. Implementors should use whichever better suits their use-case.
+
+## Styling Modals Independently
+
+A common need for modals is to style them independently from one another. The recommended approach for this is to add a custom class to your modal and target that using CSS:
+
+```js
+modal.addClass('vjs-my-fancy-modal');
+```
+
+[api-doc]: http://docs.videojs.com/ModalDialog.html
+
+[creating-component]: /docs/guides/components.md#creating-a-component

docs/guides/options.md

@@ -1,45 +1,56 @@
 # 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).
 
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+## Table of Contents
 
-
-- [Standard `<video>` Element Options](#standard-video-element-options)
-  - [`autoplay`](#autoplay)
-  - [`controls`](#controls)
-  - [`height`](#height)
-  - [`loop`](#loop)
-  - [`muted`](#muted)
-  - [`poster`](#poster)
-  - [`preload`](#preload)
-  - [`src`](#src)
-  - [`width`](#width)
-- [Video.js-specific Options](#videojs-specific-options)
-  - [`aspectRatio`](#aspectratio)
-  - [`children`](#children)
-  - [`fluid`](#fluid)
-  - [`inactivityTimeout`](#inactivitytimeout)
-  - [`language`](#language)
-  - [`languages`](#languages)
-  - [`notSupportedMessage`](#notsupportedmessage)
-  - [`plugins`](#plugins)
-  - [`sourceOrder`](#sourceorder)
-  - [`sources`](#sources)
-  - [`techOrder`](#techorder)
-- [Component Options](#component-options)
-  - [`children`](#children-1)
-  - [`${componentName}`](#componentname)
-- [Tech Options](#tech-options)
-  - [`${techName}`](#techname)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+* [Standard &lt;video> Element Options](#standard-video-element-options)
+  * [autoplay](#autoplay)
+  * [controls](#controls)
+  * [height](#height)
+  * [loop](#loop)
+  * [muted](#muted)
+  * [poster](#poster)
+  * [preload](#preload)
+    * ['auto'](#auto)
+    * ['metadata'](#metadata)
+    * ['none'](#none)
+  * [src](#src)
+  * [width](#width)
+* [Video.js-specific Options](#videojs-specific-options)
+  * [aspectRatio](#aspectratio)
+  * [children](#children)
+  * [fluid](#fluid)
+  * [inactivityTimeout](#inactivitytimeout)
+  * [language](#language)
+  * [languages](#languages)
+  * [nativeControlsForTouch](#nativecontrolsfortouch)
+  * [notSupportedMessage](#notsupportedmessage)
+  * [playbackRates](#playbackrates)
+  * [plugins](#plugins)
+  * [sourceOrder](#sourceorder)
+  * [sources](#sources)
+  * [techOrder](#techorder)
+  * [vtt.js](#vttjs)
+* [Component Options](#component-options)
+  * [children](#children-1)
+  * [${componentName}](#componentname)
+* [Tech Options](#tech-options)
+  * [${techName}](#techname)
+  * [flash](#flash)
+    * [swf](#swf)
+  * [html5](#html5)
+    * [nativeControlsForTouch](#nativecontrolsfortouch-1)
+    * [nativeAudioTracks](#nativeaudiotracks)
+    * [nativeTextTracks](#nativetexttracks)
+    * [nativeVideoTracks](#nativevideotracks)
 
 ## 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 above](#setting-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`
+
 > Type: `boolean`
 
 If `true`/present as an attribute, begins playback when the player is ready.
@@ -47,70 +58,85 @@ If `true`/present as an attribute, begins playback when the player is ready.
 > **Note:** As of iOS 10, Apple offers `autoplay` support in Safari. For details, refer to ["New <video> Policies for iOS"][ios-10-updates].
 
 ### `controls`
+
 > Type: `boolean`
 
 Determines whether or not the player has controls that the user can interact with. Without controls the only way to start the video playing is with the `autoplay` attribute or through the Player API.
 
 ### `height`
+
 > Type: `string|number`
 
 Sets the display height of the video player in pixels.
 
 ### `loop`
+
 > Type: `boolean`
 
 Causes the video to start over as soon as it ends.
 
 ### `muted`
+
 > Type: `boolean`
 
 Will silence any audio by default.
 
 ### `poster`
+
 > Type: `string`
 
 A URL to an image that displays before the video begins playing. This is often a frame of the video or a custom title screen. As soon as the user hits "play" the image will go away.
 
 ### `preload`
+
 > Type: `string`
 
 Suggests to the browser whether or not the video data should begin downloading as soon as the `<video>` element is loaded. Supported values are:
 
 #### `'auto'`
+
 Start loading the video immediately (if the browser supports it). Some mobile devices will not preload the video in order to protect their users' bandwidth/data usage. This is why the value is called 'auto' and not something more conclusive like `'true'`.
 
 _This tends to be the most common and recommended value as it allows the browser to choose the best behavior._
 
 #### `'metadata'`
+
 Load only the meta data of the video, which includes information like the duration and dimensions of the video. Sometimes, the meta data will be loaded by downloading a few frames of video.
 
 #### `'none'`
+
 Don't preload any data. The browser will wait until the user hits "play" to begin downloading.
 
 ### `src`
+
 > Type: `string`
 
 The source URL to a video source to embed.
 
 ### `width`
+
 > Type: `string|number`
 
 Sets the display height of the video player in pixels.
 
 ## Video.js-specific Options
+
 Each option is `undefined` by default unless otherwise specified.
 
 ### `aspectRatio`
+
 > Type: `string`
 
 Puts the player in [fluid](#fluid) mode and the value is used when calculating the dynamic size of the player. The value should represent a ratio - two numbers separated by a colon (e.g. `"16:9"` or `"4:3"`).
 
 ### `children`
+
 > Type: `Array|Object`
 
 This option is inherited from the [`Component` base class](#component-options).
 
 ### `fluid`
+
 > Type: `boolean`
 
 When `true`, the Video.js player will have a fluid size. In other words, it will scale to fit its container.
@@ -118,6 +144,7 @@ When `true`, the Video.js player will have a fluid size. In other words, it will
 Also, if the `<video>` element has the `"vjs-fluid"`, this option is automatically set to `true`.
 
 ### `inactivityTimeout`
+
 > Type: `number`
 
 Video.js indicates that the user is interacting with the player by way of the `"vjs-user-active"` and `"vjs-user-inactive"` classes and the `"useractive"` event.
@@ -125,32 +152,55 @@ Video.js indicates that the user is interacting with the player by way of the `"
 The `inactivityTimeout` determines how many milliseconds of inactivity is required before declaring the user inactive. A value of `0` indicates that there is no `inactivityTimeout` and the user will never be considered inactive.
 
 ### `language`
+
 > Type: `string`, Default: browser default or `'en'`
 
 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`
+
 > Type: `Object`
 
 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!
 
 ### `nativeControlsForTouch`
+
 > Type: `boolean`
 
 Explicitly set a default value for [the associated tech option](#nativecontrolsfortouch).
 
 ### `notSupportedMessage`
+
 > Type: `string`
 
 Allows overriding the default message that is displayed when Video.js cannot play back a media source.
 
+### `playbackRates`
+
+> Type: `Array`
+
+An array of numbers strictly greater than 0, where 1 means regular speed
+(100%), 0.5 means half-speed (50%), 2 means double-speed (200%), etc.
+If specified, Video.js displays a control (of class `vjs-playback-rate`)
+allowing the user to choose playback speed from among the array of choices.
+The choices are presented in the specified order from bottom to top.
+
+For example:
+
+```js
+videojs('my-player', {
+  playbackRates: [0.5, 1, 1.5, 2]
+});
+```
+
 ### `plugins`
+
 > Type: `Object`
 
 This supports having plugins be initialized automatically with custom options when the player is initialized - rather than requiring you to initialize them manually.
@@ -175,51 +225,10 @@ 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.
-
-### `sourceOrder`
-> Type: `boolean`, Default: `false`
-
-> **Note:** In video.js 6.0, this option will default to `true`.
-
-Tells Video.js to prefer the order of [`sources`](#sources) over [`techOrder`](#techOrder) in selecting a source and playback tech.
-
-Given the following example:
-
-```js
-videojs('my-player', {
-  sourceOrder: true,
-  sources: [{
-    src: '//path/to/video.flv',
-    type: 'video/x-flv'
-  }, {
-    src: '//path/to/video.mp4',
-    type: 'video/mp4'
-  }, {
-    src: '//path/to/video.webm',
-    type: 'video/webm'
-  }],
-  techOrder: ['html5', 'flash']
-});
-```
-
-Normally, the fact that HTML5 comes before Flash in the `techOrder` would mean Video.js would look for a compatible _source_ for HTML5 and would pick either the MP4 or WebM video (depending on browser support) only falling back to Flash if no compatible source for HTML5 was found.
-
-However, because the `sourceOrder` is `true`, Video.js flips that process around. It will look for a compatible _tech_ for each source in order. Presumably, it would first find a match between the FLV (since it's first in the source order) and the Flash tech.
-
-In summary, the default algorithm is:
-
-- for each tech:
-  - for each source:
-    - if tech can play source, use this tech/source combo
-
-With `sourceOrder: true`, the algorithm becomes:
-
-- for each source:
-  - for each tech:
-    - if tech can play source, use this tech/source combo
+See [the plugins guide][plugins] for more information on Video.js plugins.
 
 ### `sources`
+
 > Type: `Array`
 
 An array of objects that mirror the native `<video>` element's capability to have a series of child `<source>` elements. This should be an array of objects with the `src` and `type` properties. For example:
@@ -246,24 +255,27 @@ Using `<source>` elements will have the same effect:
 ```
 
 ### `techOrder`
-> Type: `Array`, Default: `['html5', 'flash']`
 
-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.
+> Type: `Array`, Default: `['html5']`
+
+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`
+
 > Type: `string`
 
 Allows overriding the default URL to vtt.js, which may be loaded asynchronously to polyfill support for `WebVTT`.
 
-This option will be used in the "novtt" build of video.js (i.e. `video.novtt.js`). Otherwise, vtt.js is bundled with video.js.
+This option will be used in the "novtt" build of Video.js (i.e. `video.novtt.js`). Otherwise, vtt.js is bundled with Video.js.
 
 ## Component Options
 
 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`
+
 > Type: `Array|Object`
 
 If an `Array` - which is the default - this is used to determine which children (by component name) and in which order they are created on a player (or other component):
@@ -287,13 +299,14 @@ The `children` options can also be passed as an `Object`. In this case, it is us
 videojs('my-player', {
   children: {
     controlBar: {
-      fullscreenControl: false
+      fullscreenToggle: false
     }
   }
 });
 ```
 
 ### `${componentName}`
+
 > Type: `Object`
 
 Components can be given custom options via the _lower-camel-case variant of the component name_ (e.g. `controlBar` for `ControlBar`). These can be nested in a representation of grandchild relationships. For example, to disable the fullscreen control:
@@ -301,18 +314,24 @@ Components can be given custom options via the _lower-camel-case variant of the
 ```js
 videojs('my-player', {
   controlBar: {
-    fullscreenControl: false
+    fullscreenToggle: false
   }
 });
 ```
 
 ## Tech Options
+
 ### `${techName}`
+
 > Type: `Object`
 
 Video.js playback technologies (i.e. "techs") can be given custom options as part of the options passed to the `videojs` function. They should be passed under the _lower-case variant of the tech name_ (e.g. `"flash"` or `"html5"`).
 
-This is not used in most implementations, but one case where it may be is dictating where the Video.js SWF file is located for the `Flash` tech:
+### `flash`
+
+#### `swf`
+
+Specifies where the Video.js SWF file is located for the `Flash` tech:
 
 ```js
 videojs('my-player', {
@@ -322,23 +341,46 @@ videojs('my-player', {
 });
 ```
 
-However, this is a case where changing the global defaults is more useful:
+However, changing the global defaults is generally more appropriate:
 
 ```js
 videojs.options.flash.swf = '//path/to/videojs.swf'
 ```
 
+### `html5`
+
 #### `nativeControlsForTouch`
+
 > Type: `boolean`
 
 Only supported by the `Html5` tech, this option can be set to `true` to force native controls for touch devices.
 
+#### `nativeAudioTracks`
+
+> Type: `boolean`
+
+Can be set to `false` to disable native audio track support. Most commonly used with [videojs-contrib-hls][videojs-contrib-hls].
+
 #### `nativeTextTracks`
+
 > Type: `boolean`
 
 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`.
 
+#### `nativeVideoTracks`
+
+> Type: `boolean`
+
+Can be set to `false` to disable native video track support. Most commonly used with [videojs-contrib-hls][videojs-contrib-hls].
+
+[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
+
 [video-attrs]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes
+
+[videojs-contrib-hls]: https://github.com/videojs/videojs-contrib-hls

docs/guides/player-workflows.md

@@ -1,11 +1,39 @@
 # 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
+
+* [Accessing a player that has already been created on a page](#accessing-a-player-that-has-already-been-created-on-a-page)
+* [Removing Players](#removing-players)
+  * [dispose()](#dispose)
+  * [Signs of an Undisposed Player](#signs-of-an-undisposed-player)
+* [Showing and Hiding a Player](#showing-and-hiding-a-player)
+* [Changing the volume of a player](#changing-the-volume-of-a-player)
+* [Making the player fullscreen](#making-the-player-fullscreen)
+* [Using Playback information functions](#using-playback-information-functions)
+* [Dealing with the source or the poster on the player](#dealing-with-the-source-or-the-poster-on-the-player)
+* [Accesing the Tech on the player](#accesing-the-tech-on-the-player)
+* [Using Video.js with...](#using-videojs-with)
+  * [jQuery](#jquery)
+  * [React](#react)
+  * [Ember](#ember)
+  * [Angular](#angular)
+
+## Accessing a player that has already been created on a page
+
+After an instance has been created it can be accessed globally in two ways:
+
+1. By calling `videojs('example_video_id');`
+1. By using it directly via  `videojs.players.example_video_id;`
 
 ## Removing Players
+
 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)
-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:
+### [`dispose()`](http://docs.videojs.com/Player.html#dispose)
+
+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');
@@ -26,15 +54,16 @@ Additionally, these actions are recursively applied to _all_ the player's child
 > **Note**: Do _not_ remove players via standard DOM removal methods: this will leave listeners and other objects in memory that you might not be able to clean up!
 
 ### Signs of an Undisposed Player
+
 Seeing an error such as:
 
-```
+```console
 TypeError: this.el_.vjs_getProperty is not a function
 ```
 
 or
 
-```
+```console
 TypeError: Cannot read property 'vdata1234567890' of null
 ```
 
@@ -61,10 +90,284 @@ modal.on('hide', function() {
 });
 ```
 
+## Changing the volume of a player
+
+Volume for a player can be changed through the `volume` function on a player. The volume function accepts a number from 0-1. Calling it without an argument will return the current volume.
+
+Example
+
+```js
+var myPlayer = videojs('some-player-id');
+
+myPlayer.src('http://www.example.com/path/to/video.mp4');
+myPlayer.ready(function() {
+  // get
+  var howLoudIsIt = myPlayer.volume();
+  // set
+  myPlayer.volume(0.5); // Set volume to half
+});
+```
+
+Volume can also be muted (without actually changing the volume value) using the `muted` function. Calling it without an argument will return the current status of muted on the player.
+
+```js
+var myPlayer = videojs('some-player-id');
+
+myPlayer.src('http://www.example.com/path/to/video.mp4');
+myPlayer.ready(function() {
+  // get, should be false
+  console.log(myPlayer.muted());
+  // set to true
+  myPlayer.muted(true);
+  // get should be true
+  console.log(myPlayer.muted());
+});
+```
+
+## Making the player fullscreen
+
+To check if the player is currently fullscreen call the `isFullscreen` function on a player like so.
+
+```js
+var myPlayer = videojs('some-player-id');
+
+myPlayer.src('http://www.example.com/path/to/video.mp4');
+myPlayer.ready(function() {
+  // get, should be false
+  console.log(myPlayer.isFullscreen());
+
+  // set, tell the player it's in fullscreen
+  myPlayer.isFullscreen(true);
+
+  // get, should be true
+  console.log(myPlayer.isFullscreen());
+});
+```
+
+To request that the player enter fullscreen call `requestFullscreen`.
+
+```js
+var myPlayer = videojs('some-player-id');
+
+myPlayer.src('http://www.example.com/path/to/video.mp4');
+myPlayer.ready(function() {
+  myPlayer.requestFullscreen();
+});
+```
+
+To exit fullscreen call `exitFullscreen`
+
+```js
+var myPlayer = videojs('some-player-id');
+
+myPlayer.src('http://www.example.com/path/to/video.mp4');
+myPlayer.ready(function() {
+  myPlayer.requestFullscreen();
+  myPlayer.exitFullscreen();
+});
+```
+
+## Using Playback information functions
+
+`play` can be used to start playback on a player that has a source.
+
+```js
+var myPlayer = videojs('some-player-id');
+
+myPlayer.src('http://www.example.com/path/to/video.mp4');
+myPlayer.ready(function() {
+  myPlayer.play();
+});
+```
+
+`pause` can be used to pause playback on a player that is playing.
+
+```js
+var myPlayer = videojs('some-player-id');
+
+myPlayer.src('http://www.example.com/path/to/video.mp4');
+myPlayer.ready(function() {
+  myPlayer.play();
+  myPlayer.pause();
+});
+```
+
+`paused` can be used to determine if a player is currently paused.
+
+```js
+var myPlayer = videojs('some-player-id');
+
+myPlayer.src('http://www.example.com/path/to/video.mp4');
+
+myPlayer.ready(function() {
+  // true
+  console.log(myPlayer.paused());
+  // false
+  console.log(!myPlayer.paused());
+
+  myPlayer.play();
+  // false
+  console.log(myPlayer.paused());
+  // true
+  console.log(!myPlayer.paused());
+
+  myPlayer.pause();
+  // true
+  console.log(myPlayer.paused());
+  // false
+  console.log(!myPlayer.paused());
+});
+```
+
+`currentTime` will give you the currentTime (in seconds) that playback is currently occuring at.
+
+```js
+var myPlayer = videojs('some-player-id');
+
+myPlayer.src('http://www.example.com/path/to/video.mp4');
+myPlayer.ready(function() {
+  // set current time to 2 minutes into the video
+  myPlayer.currentTime(120);
+
+  // get the current time, should be 120 seconds
+  var whereYouAt = myPlayer.currentTime();
+});
+```
+
+`duration` will give you the total duration of the video that is playing
+
+```js
+var myPlayer = videojs('some-player-id');
+
+myPlayer.src('http://www.example.com/path/to/video.mp4');
+myPlayer.ready(function() {
+  var lengthOfVideo = myPlayer.duration();
+});
+```
+
+`remainingTime` will give you the seconds that are remaing in the video.
+
+```js
+var myPlayer = videojs('some-player-id');
+myPlayer.src('http://www.example.com/path/to/video.mp4');
+myPlayer.ready(function() {
+   myPlayer.currentTime(10);
+
+   // should be 10 seconds less than duration
+   console.log(myPlayer.remainingTime());
+});
+```
+
+`buffered` will give you a timeRange object representing the current ranges of time that are ready to be played at a future time.
+
+```js
+var myPlayer = videojs('some-player-id');
+
+myPlayer.src('http://www.example.com/path/to/video.mp4');
+myPlayer.ready(function() {
+  var bufferedTimeRange = myPlayer.buffered();
+
+  // number of different ranges of time have been buffered.
+  // Usually 1
+  var numberOfRanges = bufferedTimeRange.length,
+
+  // Time in seconds when the first range starts.
+  // Usually 0
+  var firstRangeStart = bufferedTimeRange.start(0),
+
+  // Time in seconds when the first range ends
+  var firstRangeEnd = bufferedTimeRange.end(0),
+
+  // Length in seconds of the first time range
+  var firstRangeLength = firstRangeEnd - firstRangeStart;
+});
+```
+
+`bufferedPercent` will give you the the current percentage of the video that is buffered.
+
+```js
+var myPlayer = videojs('some-player-id');
+
+myPlayer.src('http://www.example.com/path/to/video.mp4');
+myPlayer.ready(function() {
+  // example 0.11 aka 11%
+  var howMuchIsDownloaded = myPlayer.bufferedPercent();
+});
+```
+
+## Dealing with the source or the poster on the player
+
+Passing a source to the player via the API. (this can also be done using options)
+
+```js
+var myPlayer = videojs('some-player-id');
+
+myPlayer.src('http://www.example.com/path/to/video.mp4');
+```
+
+**Source Object (or element):** A javascript object containing information
+about the source file. Use this method if you want the player to determine if
+it can support the file using the type information.
+
+```js
+var myPlayer = videojs('some-player-id');
+
+myPlayer.src({type: "video/mp4", src: "http://www.example.com/path/to/video.mp4"});
+```
+
+**Array of Source Objects:** To provide multiple versions of the source so
+that it can be played using HTML5 across browsers you can use an array of
+source objects. Video.js will detect which version is supported and load that
+file.
+
+```js
+var myPlayer = videojs('some-player-id');
+
+myPlayer.src([
+  {type: "video/mp4", src: "http://www.example.com/path/to/video.mp4"},
+  {type: "video/webm", src: "http://www.example.com/path/to/video.webm"},
+  {type: "video/ogg", src: "http://www.example.com/path/to/video.ogv"}
+]);
+```
+
+Changing or setting the poster via the API. (this can also be done with options)
+
+```js
+var myPlayer = videojs('example_video_1');
+
+// set
+myPlayer.poster('http://example.com/myImage.jpg');
+
+// get
+console.log(myPlayer.poster());
+// 'http://example.com/myImage.jpg'
+```
+
+## Accesing the Tech on the player
+
+The tech on the player can only be accesed by pasing `{IWillNotUseThisInPlugins: true}` into the `tech()`
+function on the player.
+
+```js
+var myPlayer = videojs('some-player-id');
+
+myPlayer.src('http://www.example.com/path/to/video.mp4');
+myPlayer.ready(function() {
+   // tech() will error with no argument
+   var tech = myPlayer.tech({IWillNotUseThisInPlugins: true});
+});
+```
+
 ## Using Video.js with...
+
 Coming soon...
 
 ### jQuery
+
 ### React
+
+See [ReactJS integration example](/docs/guides/react.md)
+
 ### Ember
+
 ### Angular

docs/guides/plugins.md

@@ -1,59 +1,363 @@
-Plugins
-=======
-If you've built something cool with Video.js, you can easily share it with the rest of the world by creating a plugin. Although, you can roll your own, you can also use [generator-videojs-plugin](https://github.com/dmlap/generator-videojs-plugin), a [Yeoman](http://yeoman.io) generator that provides scaffolding for video.js plugins including:
-* [Grunt](http://gruntjs.com) for build management
-* [npm](https://www.npmjs.org) for dependency management
-* [QUnit](http://qunitjs.com) for testing
+# 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]!
 
+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:
 
-Step 1: Write Some Javascript
------------------------------
-You may have already done this step. Code up something interesting and then wrap it in a function. At the most basic level, that's all a video.js plugin is. By convention, plugins take a hash of options as their first argument:
+* [generator-videojs-plugin][generator]
+
+  A [Yeoman][yeoman] generator for scaffolding a Video.js plugin project. Additionally, it offers a set of [conventions for plugin authorship][standards] that, if followed, make authorship, contribution, and usage consistent and predictable.
+
+  In short, the generator sets up plugin authors to focus on writing their plugin - not messing with tools.
+
+## Writing a Basic Plugin
+
+If you've written a Video.js plugin before, the basic plugin concept should be familiar. It's similar to a jQuery plugin in that the core idea is that you're adding a method to the player.
+
+### Write a JavaScript Function
+
+A basic plugin is a plain JavaScript function:
 
 ```js
-    function examplePlugin(options) {
-      this.on('play', function(e) {
-        console.log('playback has started!');
-      });
-    };
+function examplePlugin(options) {
+
+  if (options.customClass) {
+    this.addClass(options.customClass);
+  }
+
+  this.on('playing', function() {
+    videojs.log('playback began!');
+  });
+}
 ```
 
-When it's activated, `this` will be the Video.js player your plugin is attached to. You can use anything you'd like in the [Video.js API](./api.md) when you're writing a plugin: change the `src`, mess up the DOM, or listen for and emit your own events.
+By convention, plugins are passed an `options` object; however, you can realistically accept whatever arguments you want. This example plugin will add a custom class (whatever is passed in as `options.customClass`) and, whenever playback begins, it will log a message to the browser console.
 
-Step 2: Registering A Plugin
--------------------------------
-It's time to give the rest of the world the opportunity to be awed by your genius. When your plugin is loaded, it needs to let Video.js know this amazing new functionality is now available:
+> **Note:** The value of `this` in the plugin function is the player instance; so, you have access to [its complete API][api-player].
+
+### Register a Basic Plugin
+
+Now that we have a function that does something with a player, all that's left is to register the plugin with Video.js:
 
 ```js
-    videojs.plugin('examplePlugin', examplePlugin);
+videojs.registerPlugin('examplePlugin', examplePlugin);
 ```
 
-From this point on, your plugin will be added to the Video.js prototype and will show up as a property on every instance created. Make sure you choose a unique name that doesn't clash with any of the properties already in Video.js. Which leads us to...
+After that, any player will automatically have an `examplePlugin` method on its prototype!
 
-Step 3: Using A Plugin
-----------------------
-There are two ways to initialize a plugin. If you're creating your video tag dynamically, you can specify the plugins you'd like to initialize with it and any options you want to pass to them:
+> **Note:** The only stipulation with the name of the plugin is that it cannot conflict with any existing plugin or player method.
+
+## Writing an Advanced Plugin
+
+Video.js 6 introduced advanced plugins: these are plugins that share a similar API with basic plugins, but are class-based and offer a range of extra features out of the box.
+
+While reading the following sections, you may want to refer to the [Plugin API docs][api-plugin] for more detail.
+
+### Write a JavaScript Class/Constructor
+
+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):
 
 ```js
-    videojs('vidId', {
-      plugins: {
-        examplePlugin: {
-          exampleOption: true
-        }
-      }
+const Plugin = videojs.getPlugin('plugin');
+
+class ExamplePlugin extends Plugin {
+
+  constructor(player, options) {
+    super(player, options);
+
+    if (options.customClass) {
+      player.addClass(options.customClass);
+    }
+
+    player.on('playing', function() {
+      videojs.log('playback began!');
     });
+  }
+}
 ```
 
-If you've already initialized your video tag, you can activate a plugin at any time by calling its setup function directly:
+Or with ES5:
 
 ```js
-    var video = videojs('cool-vid');
-    video.examplePlugin({ exampleOption: true });
+var Plugin = videojs.getPlugin('plugin');
+
+var ExamplePlugin = videojs.extend(Plugin, {
+
+  constructor: function(player, options) {
+    Plugin.call(this, player, options);
+
+    if (options.customClass) {
+      player.addClass(options.customClass);
+    }
+
+    player.on('playing', function() {
+      videojs.log('playback began!');
+    });
+  }
+});
 ```
 
-That's it. Head on over to the [Video.js wiki](https://github.com/videojs/video.js/wiki/Plugins) and add your plugin to the list so everyone else can check it out.
+For now, this example advanced plugin does the exact same thing as the basic plugin described above - not to worry, we will make it more interesting as we continue!
 
-## How should I use the Video.js icons in my plugin?
+### Register an Advanced Plugin
 
-If you'd like to use any of the icons available in the [Video.js icon set](http://videojs.github.io/font/), please target them via the CSS class names instead of codepoints. The codepoints *may* change between versions of the font, so using the class names ensures that your plugin will stay up to date with any font changes.
+The registration process for advanced plugins is identical to [the process for basic plugins](#register-a-basic-plugin).
+
+```js
+videojs.registerPlugin('examplePlugin', ExamplePlugin);
+```
+
+> **Note:** Because ES6 classes are syntactic sugar on top of existing constructor function and prototype architecture in JavaScript, in all cases `registerPlugin`'s second argument is a function.
+
+### Key Differences from Basic Plugins
+
+Advanced plugins have two key differences from basic plugins that are important to understand before describing their advanced features.
+
+#### The Value of `this`
+
+With basic plugins, the value of `this` in the plugin function will be the _player_.
+
+With advanced plugins, the value of `this` is the _instance of the plugin class_. The player is passed to the plugin constructor as its first argument (and is automatically applied to the plugin instance as the `player` property) and any further arguments are passed after that.
+
+#### The Player Plugin Name Property
+
+Both basic plugins and advanced plugins are set up by calling a method on a player with a name matching the plugin (e.g., `player.examplePlugin()`).
+
+However, with advanced plugins, this method acts like a factory function and it is _replaced_ for the current player by a new function which returns the plugin instance:
+
+```js
+// `examplePlugin` has not been called, so it is a factory function.
+player.examplePlugin();
+
+// `examplePlugin` is now a function that returns the same instance of
+// `ExamplePlugin` that was generated by the previous call.
+player.examplePlugin().someMethodName();
+```
+
+With basic plugins, the method does not change - it is always the same function. It is up to the authors of basic plugins to deal with multiple calls to their plugin function.
+
+### Features of Advanced Plugins
+
+Up to this point, our example advanced plugin is functionally identical to our example basic plugin. However, advanced plugins bring with them a great deal of benefit that is not built into basic plugins.
+
+#### Events
+
+Like components, advanced plugins offer an implementation of events. This includes:
+
+* The ability to listen for events on the plugin instance using `on` or `one`:
+
+  ```js
+  player.examplePlugin().on('example-event', function() {
+    videojs.log('example plugin received an example-event');
+  });
+  ```
+
+* The ability to `trigger` custom events on a plugin instance:
+
+  ```js
+  player.examplePlugin().trigger('example-event');
+  ```
+
+* The ability to stop listening to custom events on a plugin instance using `off`:
+
+  ```js
+  player.examplePlugin().off('example-event');
+  ```
+
+By offering a built-in events system, advanced plugins offer a wider range of options for code structure with a pattern familiar to most web developers.
+
+##### Extra Event Data
+
+All events triggered by plugins include an additional data object as a second argument. This object has three properties:
+
+- `name`: The name of the plugin (e.g. `"examplePlugin"`) as a string.
+- `plugin`: The plugin constructor (e.g. `ExamplePlugin`).
+- `instance`: The plugin constructor instance.
+
+#### Statefulness
+
+A new concept introduced for advanced plugins is _statefulness_. This is similar to React components' `state` property and `setState` method.
+
+Advanced plugin instances each have a `state` property, which is a plain JavaScript object - it can contain any keys and values the plugin author wants.
+
+A default `state` can be provided by adding a static property to a plugin constructor:
+
+```js
+ExamplePlugin.defaultState = {
+  customClass: 'default-custom-class'
+};
+```
+
+When the `state` is updated via the `setState` method, the plugin instance fires a `"statechanged"` event, but _only if something changed!_ This event can be used as a signal to update the DOM or perform some other action. The event object passed to listeners for this event includes, an object describing the changes that occurred on the `state` property:
+
+```js
+player.examplePlugin().on('statechanged', function(e) {
+  if (e.changes && e.changes.customClass) {
+    this.player
+      .removeClass(e.changes.customClass.from)
+      .addClass(e.changes.customClass.to);
+  }
+});
+
+player.examplePlugin().setState({customClass: 'another-custom-class'});
+```
+
+#### Lifecycle
+
+Like components, advanced plugins have a lifecycle. They can be created with their factory function and they can be destroyed using their `dispose` method:
+
+```js
+// set up a example plugin instance
+player.examplePlugin();
+
+// dispose of it anytime thereafter
+player.examplePlugin().dispose();
+```
+
+The `dispose` method has several effects:
+
+* Triggers a `"dispose"` event on the plugin instance.
+* Cleans up all event listeners on the plugin instance, which helps avoid errors caused by events being triggered after an object is cleaned up.
+* Removes plugin state and references to the player to avoid memory leaks.
+* Reverts the player's named property (e.g. `player.examplePlugin`) _back_ to the original factory function, so the plugin can be set up again.
+
+In addition, if the player is disposed, the disposal of all its advanced plugin instances will be triggered as well.
+
+#### Version
+
+Adding a version number to a plugin is done by defining a `VERSION` property on the plugin before registering it:
+
+```js
+ExamplePlugin.VERSION = '1.0.1';
+
+videojs.registerPlugin('examplePlugin', ExamplePlugin);
+```
+
+Retrieve it using `videojs.getPluginVersion`:
+
+```js
+var version = videojs.getPluginVersion('examplePlugin');
+console.log(version);  // 1.0.1
+```
+
+Note that the [plugin generator](https://github.com/videojs/generator-videojs-plugin) already takes care of adding a version number for you.
+
+### Advanced Example Advanced Plugin
+
+What follows is a complete ES6 advanced plugin that logs a custom message when the player's state changes between playing and paused. It uses all the described advanced features:
+
+```js
+import videojs from 'video.js';
+
+const Plugin = videojs.getPlugin('plugin');
+
+class Advanced extends Plugin {
+
+  constructor(player, options) {
+    super(player, options);
+
+    // Whenever the player emits a playing or paused event, we update the
+    // state if necessary.
+    this.on(player, ['playing', 'paused'], this.updateState);
+    this.on('statechanged', this.logState);
+  }
+
+  dispose() {
+    super.dispose();
+    videojs.log('the advanced plugin is being disposed');
+  }
+
+  updateState() {
+    this.setState({playing: !this.player.paused()});
+  }
+
+  logState(changed) {
+    videojs.log(`the player is now ${this.state.playing ? 'playing' : 'paused'}`);
+  }
+}
+
+videojs.registerPlugin('advanced', Advanced);
+
+const player = videojs('example-player');
+
+player.advanced();
+
+// This will begin playback, which will trigger a "playing" event, which will
+// update the state of the plugin, which will cause a message to be logged.
+player.play();
+
+// This will pause playback, which will trigger a "paused" event, which will
+// update the state of the plugin, which will cause a message to be logged.
+player.pause();
+
+player.advanced().dispose();
+
+// This will begin playback, but the plugin has been disposed, so it will not
+// log any messages.
+player.play();
+```
+
+This example may be a bit pointless in reality, but it demonstrates the sort of flexibility offered by advanced plugins over basic plugins.
+
+## Setting up a Plugin
+
+There are two ways to set up (or initialize) a plugin on a player. Both ways work identically for both basic and advanced plugins.
+
+The first way is during creation of the player. Using the `plugins` option, a plugin can be automatically set up on a player:
+
+```js
+videojs('example-player', {
+  plugins: {
+    examplePlugin: {
+      customClass: 'example-class'
+    }
+  }
+});
+```
+
+Otherwise, a plugin can be manually set up:
+
+```js
+var player = videojs('example-player');
+player.examplePlugin({customClass: 'example-class'});
+```
+
+These two methods are functionally identical - use whichever you prefer!
+
+### Plugin Setup Events
+
+Occasionally, a use-case arises where some code needs to wait for a plugin to be initialized. As of Video.js 6, this can be achieved by listening for `pluginsetup` events on the player.
+
+For any given plugin initialization, there are four events to be aware of:
+
+- `beforepluginsetup`: Triggered immediately before any plugin is initialized.
+- `beforepluginsetup:examplePlugin` Triggered immediately before the `examplePlugin` is initialized.
+- `pluginsetup`: Triggered after any plugin is initialized.
+- `pluginsetup:examplePlugin`: Triggered after he `examplePlugin` is initialized.
+
+These events work for both basic and advanced plugins. They are triggered on the player and each includes an object of [extra event data](#extra-event-data) as a second argument to its listeners.
+
+## References
+
+* [Player API][api-player]
+* [Plugin API][api-plugin]
+* [Plugin Generator][generator]
+* [Plugin Conventions][standards]
+
+[components]: /docs/guides/components.md
+
+[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
+
+[spellbook]: https://github.com/videojs/spellbook
+
+[standards]: https://github.com/videojs/generator-videojs-plugin/blob/master/docs/standards.md
+
+[yeoman]: http://yeoman.io

docs/guides/react.md

@@ -0,0 +1,147 @@
+# Video.js and ReactJS integration
+
+Here's a basic ReactJS player implementation.
+
+It just instantiates the Video.js player on `componentDidMount` and destroys it on `componentWillUnmount`.
+
+```jsx
+import React from 'react';
+import videojs from 'video.js'
+
+export default class VideoPlayer extends React.Component {
+  componentDidMount() {
+    // instantiate Video.js
+    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
+      console.log('onPlayerReady', this)
+    });
+  }
+
+  // destroy player on unmount
+  componentWillUnmount() {
+    if (this.player) {
+      this.player.dispose()
+    }
+  }
+
+  // wrap the player in a div with a `data-vjs-player` attribute
+  // so videojs won't create additional wrapper in the DOM
+  // see https://github.com/videojs/video.js/pull/3856
+  render() {
+    return (
+      <div data-vjs-player>
+        <video ref={ node => this.videoNode = node } className="video-js"></video>
+      </div>
+    )
+  }
+}
+```
+
+You can then use it like this: (see [options guide][options] for option information)
+
+```jsx
+const videoJsOptions = {
+  autoplay: true,
+  controls: true,
+  sources: [{
+    src: '/path/to/video.mp4',
+    type: 'video/mp4'
+  }]
+}
+
+return <VideoPlayer { ...videoJsOptions } />
+```
+
+Don't forget to include the Video.js CSS, located at `video.js/dist/video-js.css`.
+
+[options]: /docs/guides/options.md
+
+
+## Using a React Component as a Video JS Component
+
+```jsx
+/**
+ * EpisodeList.js
+ *
+ * This is just a plain ol' React component.
+ * the vjsComponent methods, player methods etc. are available via
+ * the vjsComponent prop (`this.props.vjsComponent`)
+ */
+import React, { Component, PropTypes } from 'react';
+
+class EpisodeList extends Component {
+  render() {
+    return (
+      <div>
+        <h1>{this.props.body}</h1>
+      </div>
+    );
+  }
+}
+
+
+/**
+ * vjsEpisodeList.js
+ *
+ * Here is where we register a Video JS Component and
+ * mount the React component to it when the player is ready.
+ */
+import EpisodeList from './EpisodeList';
+import ReactDOM from 'react-dom';
+import videojs from 'video.js';
+
+const vjsComponent = videojs.getComponent('Component');
+
+class vjsEpisodeList extends vjsComponent {
+
+  constructor(player, options) {
+    super(player, options);
+
+    /* Bind the current class context to the mount method */
+    this.mount = this.mount.bind(this);
+
+    /* When player is ready, call method to mount React component */
+    player.ready(() => {
+      this.mount();
+    });
+  }
+
+  /**
+   * We will render out the React EpisodeList component into the DOM element
+   * generated automatically by the VideoJS createEl() method.
+   *
+   * We fetch that generated element using `this.el()`, a method provided by the
+   * vjsComponent class that this class is extending.
+   */
+  mount() {
+    ReactDOM.render(<EpisodeList vjsComponent={this} body="Episodes" />, this.el() );
+  }
+}
+
+/**
+ * Make sure to register the vjsComponent so Video JS knows it exists
+ */
+vjsComponent.registerComponent('vjsEpisodeList', vjsEpisodeList);
+
+export default vjsEpisodeList;
+
+
+/**
+ * VideoPlayer.js
+ * Check the above example for how to integrate the rest of this class.
+ */
+
+// ...
+  componentDidMount() {
+    // instantiate Video.js
+    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
+      console.log('onPlayerReady', this)
+    });
+
+    /**
+     * Fetch the controlBar component and add the new vjsEpisodeList component as a child
+     * You can pass options here if desired in the second object.
+     */
+    this.player.getChild('controlBar').addChild('vjsEpisodeList', {});
+  }
+// ...
+```

docs/guides/setup.md

@@ -1,27 +1,27 @@
 # Video.js Setup
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
+## Table of Contents
 
-- [Getting Video.js](#getting-videojs)
-- [Creating a Player](#creating-a-player)
-  - [Automatic Setup](#automatic-setup)
-  - [Manual Setup](#manual-setup)
-- [Options](#options)
-  - [Global Defaults](#global-defaults)
-  - [A Note on `<video>` Tag Attributes](#a-note-on-video-tag-attributes)
-- [Player Readiness](#player-readiness)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+* [Getting Video.js](#getting-videojs)
+* [Creating a Player](#creating-a-player)
+  * [Automatic Setup](#automatic-setup)
+  * [Manual Setup](#manual-setup)
+* [Options](#options)
+  * [Global Defaults](#global-defaults)
+  * [A Note on &lt;video> Tag Attributes](#a-note-on-video-tag-attributes)
+* [Player Readiness](#player-readiness)
+* [Advanced Player Workflows](#advanced-player-workflows)
 
 ## 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.
 
 Please refer to the [Getting Started][getting-started] document for details.
 
 ## Creating a Player
+
 > **Note:** Video.js works with `<video>` _and_ `<audio>` elements, but for simplicity we'll refer only to `<video>` elements going forward.
 
 Once you have Video.js [loaded on your page][getting-started], you're ready to create a player!
@@ -38,6 +38,7 @@ Video.js supports all attributes of the `<video>` element (such as `controls`, `
 ```
 
 ### Automatic Setup
+
 By default, when your web page finishes loading, Video.js will scan for media elements that have the `data-setup` attribute. The `data-setup` attribute is used to pass options to Video.js. A minimal example looks like this:
 
 ```html
@@ -50,6 +51,7 @@ By default, when your web page finishes loading, Video.js will scan for media el
 > **Note:** You _must_ use single-quotes with `data-setup` as it is expected to contain JSON.
 
 ### Manual Setup
+
 On the modern web, a `<video>` element often does not exist when the page finishes loading. In these cases, automatic setup is not possible, but manual setup is available via [the `videojs` function][videojs].
 
 One way to call this function is by providing it a string matching a `<video>` element's `id` attribute:
@@ -79,7 +81,8 @@ 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]:
 
@@ -93,6 +96,8 @@ Alternatively, you can use the `data-setup` attribute to pass options as [JSON][
 <video data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'...>
 ```
 
+> **Note:** You _must_ use single-quotes around the value of `data-setup` as it contains a JSON string which must use double quotes.
+
 Finally, if you're not using the `data-setup` attribute to trigger the player setup, you can pass in an object of player options as the second argument to the `videojs` function:
 
 ```js
@@ -103,7 +108,10 @@ videojs('my-player', {
 });
 ```
 
+> **Note:** Do not use both `data-setup` and an options object.
+
 ### Global Defaults
+
 Default options for all players can be found at `videojs.options` and can be changed directly. For example, to set `{autoplay: true}` for all future players:
 
 ```js
@@ -133,6 +141,7 @@ These are correct:
 ```
 
 ## Player Readiness
+
 Because Video.js techs have the potential to be loaded asynchronously, it isn't always safe to interact with a player immediately upon setup. For this reason, Video.js players have a concept of "readiness" which will be familiar to anyone who has used jQuery before.
 
 Essentially, any number of ready callbacks can be defined for a Video.js player. There are three ways to pass these callbacks. In each example, we'll add an identical class to the player:
@@ -166,16 +175,26 @@ player.on('ready', function() {
 });
 ```
 
-In each case, the callback is called asynchronously - _even if the player is already ready!_
+In each case, the callback is called asynchronously.
+
+An important distinction between the above methods is that adding an listener for `ready` with `on()` _must_ be done before the player is ready. With `player.ready()`, the function is called immediately if the player is already ready.
 
 ## 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
+
 [getting-started]: http://videojs.com/getting-started/
+
 [json]: http://json.org/example.html
+
 [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
+
 [w3c-video]: http://www.w3.org/TR/html5/embedded-content-0.html#the-video-element

docs/guides/skins.md

@@ -1,30 +1,49 @@
 # Skins
+
+## Table of Contents
+
+* [Default Skin](#default-skin)
+* [Additional <style> Elements](#additional-style-elements)
+  * [Disabling Additional <style> Elements](#disabling-additional-style-elements)
+    * [Effect on Player#width() and Player#height()](#effect-on-playerwidth-and-playerheight)
+* [Icons](#icons)
+* [Creating a Skin](#creating-a-skin)
+  * [Add a Custom Class to the Player](#add-a-custom-class-to-the-player)
+  * [Customize Styles](#customize-styles)
+
 ## Default Skin
+
 When you include the Video.js CSS file (`video-js.min.css`), the default Video.js skin is applied. That means that customizing the look of a Video.js player is a matter of taking advantage of the cascading aspect of CSS to override styles.
 
 ## Additional `<style>` Elements
+
 In addition to the Video.js CSS file, there are some styles generated automatically by JavaScript and included in the `<head>` as `<style>` elements.
 
-- The `"vjs-styles-defaults"` element sets default dimensions for all Video.js players on the page.
-- A `"vjs-styles-dimensions"` element is created for _each_ player on the page and is used to adjust its size. This styling is handled in this manner to allow you to override it with custom CSS without relying on scripting or `!important` to overcome inline styles.
+* The `"vjs-styles-defaults"` element sets default dimensions for all Video.js players on the page.
+* A `"vjs-styles-dimensions"` element is created for _each_ player on the page and is used to adjust its size. This styling is handled in this manner to allow you to override it with custom CSS without relying on scripting or `!important` to overcome inline styles.
 
 ### Disabling Additional `<style>` Elements
+
 In some cases, particularly with web applications using frameworks that may manage the `<head>` element (e.g. React, Ember, Angular, etc), these `<style>` elements are not desirable. They can be suppressed by setting `window.VIDEOJS_NO_DYNAMIC_STYLE = true` before including Video.js.
 
 _This disables all CSS-based player sizing. Players will have no `height` or `width` by default!_ Even dimensional attributes, such as `width="600" height="300"` will be _ignored_. When using this global, you will need to set their own dimensions in a way that makes sense for their website or web app.
 
 #### Effect on `Player#width()` and `Player#height()`
+
 When `VIDEOJS_NO_DYNAMIC_STYLE` is set, `Player#width()` and `Player#height()` will apply any width and height that is set directly to the `<video>` element (or whichever element the current tech uses).
 
 ## Icons
+
 Video.js ships with a number of icons built into the skin via an icon font.
 
 You can view all of the icons available in the default skin by renaming [`sandbox/icons.html.example`](https://github.com/videojs/video.js/blob/master/sandbox/icons.html.example) to `sandbox/icons.html`, building Video.js with `npm run build`, and opening `sandbox/icons.html` in your browser of choice.
 
 ## Creating a Skin
+
 The recommended process for creating a skin is to override the styles provided by the default skin. In this way, you don't need to start from scratch.
 
 ### Add a Custom Class to the Player
+
 The most convenient way to create a hook in the player for your skin is to add a class to it. You can do this by adding a class to the initial `<video>` element:
 
 ```html
@@ -42,6 +61,7 @@ player.addClass('vjs-matrix');
 > **Note:** The `vjs-` prefix is a convention for all classes that are contained in a Video.js player.
 
 ### Customize Styles
+
 The first step in overriding default styles with custom ones is to determine which selectors and properties need overriding. As an example, let's say we don't like the default color of controls (white) and we want to change them to a bright green (say, `#00ff00`).
 
 To do this, we'll use your browser's developer tools to inspect the player and figure out which selectors we need to use to adjust those styles - and we'll add our custom `.vjs-matrix` selector to ensure our final selectors are specific enough to override the default skin.

docs/guides/tech.md

@@ -1,15 +1,17 @@
-Playback Technology ("Tech")
-============================
-Playback Technology refers to the specific browser or plugin technology used to play the video or audio. When using HTML5, the playback technology is the video or audio element. When using Flash, the playback technology is the specific Flash player used, e.g. Flowplayer, YouTube Player, video-js.swf, etc. (not just "Flash"). This could also include Silverlight, Quicktime, or any other plugin that will play back video in the browser, as long as there is an API wrapper written for it.
+# Playback Technology ("Tech")
 
-Essentially we're using HTML5 and plugins only as video decoders, and using HTML and JavaScript to create a consistent API and skinning experience across all of them.
+Playback Technology refers to the specific browser or plugin technology used to play the video or audio. When using HTML5, the playback technology is the video or audio element. When using Flash from [videojs-flash][flash], the playback technology is the video-js.swf Flash object. When using the [videojs-youtube][youtube] tech, the playback technology is the You Tube player. The tech also includes an API wrapper to translate between the Video.js controls and API to the specific playback technology used.
 
-Building an API Wrapper
------------------------
-We'll write a more complete guide on writing a wrapper soon, but for now the best resource is the [Video.js](https://github.com/zencoder/video-js/tree/master/src) source where you can see how both the HTML5 and video-js.swf API wrappers were created.
+Essentially we're using html5 and plugins only as video decoders, and using HTML and JavaScript to create a consistent API and skinning experience across all of them.
+
+In addition to techs there are source handlers. Source handlers add the capability to play additional source types to techs. For example, the [videojs-contrib-hls][hls] source handler enables the HTML5 and Flash techs to play HLS.
+
+## Building an API Wrapper
+
+We'll write a more complete guide on writing a wrapper soon, but for now the best resource is the [Video.js](https://github.com/videojs/video.js/tree/master/src/js/tech) source where you can see how the HTML5 API wrapper is created.
+
+## Required Methods
 
-Required Methods
-----------------
 canPlayType
 play
 pause
@@ -19,8 +21,8 @@ duration
 buffered
 supportsFullScreen
 
-Required Events
----------------
+## Required Events
+
 loadstart
 play
 pause
@@ -30,76 +32,112 @@ volumechange
 durationchange
 error
 
-Optional Events (include if supported)
---------------------------------------
+## Optional Events (include if supported)
+
 timeupdate
 progress
 enterFullScreen
 exitFullScreen
 
-Adding Playback Technology
-==================
-When adding additional Tech to a video player, make sure to add the supported tech to the video object.
+## Adding Playback Technology
 
-### Tag Method: ###
-    <video data-setup='{"techOrder": ["html5", "flash", "other supported tech"]}'
+When additional techs are added they are automatically added to the `techOrder`. You can modify the `techOrder` to change the priority of each tech.
 
-### Object Method: ###
-    videojs("videoID", {
-      techOrder: ["html5", "flash", "other supported tech"]
-    });
+### Tag Method:
 
-Technology Ordering
-==================
-By default Video.js performs "Tech-first" ordering when it searches for a source/tech combination to play videos. This means that if you have two sources and two techs, video.js will try to play each video with the first tech in the `techOrder` option property before moving on to try the next playback technology.
+```html
+<video data-setup='{"techOrder": ["html5", "flash", "other supported tech"]}'>
+```
 
-Tech-first ordering can present a problem if you have a `sourceHandler` that supports both `Html5` and `Flash` techs such as videojs-contrib-hls.
+### Object Method:
 
-For example, given the following video element:
+```js
+videojs("videoID", {
+  techOrder: ["html5", "flash", "other supported tech"]
+});
+```
 
-  <video data-setup='{"techOrder": ["html5", "flash"]}'>
-    <source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL">
-    <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
-  </video>
+## Technology Ordering
 
-There is a good chance that the mp4 source will be selected on platforms that do not have media source extensions. Video.js will try all sources against the first playback technology, in this case `Html5`, and select the first source that can play - in this case MP4.
+When Video.js is given an array of sources, which to use is determined by finding the first supported source / tech combination. Each tech will be queried in the order specified in `techOrder` whether it can play the first source. The first match wins. If no tech can play the first source, then the next will be tested. It's important to set the `type` of each source correctly for this test to be accurate.
 
-In "Tech-first" mode, the tests run something like this:
-  Can video.m3u8 play with Html5? No...
-  Can video.mp4 play with Html5? Yes! Use the second source.
+For example, given the following video element, assuming the [videojs-flash][flash] tech and [videojs-contrib-hls][hls] source handler are available:
 
-Video.js now provides another method of selecting the source - "Source-first" ordering. In this mode, Video.js tries the first source against every tech in `techOrder` before moving onto the next source.
+```html
+<!-- "techOrder": ["html5", "flash"] -->
+<video
+  <source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL">
+  <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
+</video>
+```
 
-With a player setup as follows:
+The HLS source will be tested first. The first tech is html5.
+* Safari can play HLS in a standard HTML5 video element, so HLS will be played using the html5 tech
+* Chrome can't play HLS in the standard HTML5 video element on its own, but the videojs-contrib-hls source handler _can_ play HLS via [Media Source Extensions][mse] in HTML5. So HLS will be played in the html5 tech
+* IE 10 can't play HLS natively, and doesn't support Media Source Extensions. As the source cannot be played in HTML5, the Flash tech can be tested. The videojs-contrib-hls source handler can play HLS in the Flash tech, so HLS will be played in the Flash tech.
 
-  <video data-setup='{"techOrder": ["html5", "flash"], "sourceOrder": true}'>
-    <source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL">
-    <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
-  </video>
+Now take the same sources again with videojs-contrib-hls but without videojs-flash:
 
-The Flash-based HLS support will be tried before falling back to the MP4 source.
+```html
+<!-- "techOrder": ["html5"] -->
+<video
+  <source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL">
+  <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
+</video>
+```
 
-In "Source-first" mode, the tests run something like this:
-  Can video.m3u8 play with Html5? No...
-  Can video.m3u8 play with Flash? Yes! Use the first source.
+* Safari will play HLS in the html5 tech
+* Chrome will play HLS in the html5 tech by means of videojs-contrib-hls
+* IE 10 can't play HLS in either the html5 or Flash tech. Next the MP4 source will be tested. MP4 can be played by HTML5, so that source-tech pair will be used.
 
-Flash Technology
-==================
-The Flash playback tech is a part of the default `techOrder`. You may notice undesirable playback behavior in browsers that are subject to using this playback tech, in particular when scrubbing and seeking within a video. This behavior is a result of Flash's progressive video playback.
+This time, we have videojs-flash but not videojs-contrib-hls:
+
+```html
+<!-- "techOrder": ["html5", "flash"] -->
+<video
+  <source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL">
+  <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
+</video>
+```
+
+* Safari will play HLS in the html5 tech
+* Chrome can't play HLS in the html5 or flash tech, so will play MP4 in the html5 tech.
+* IE 10 also can't play HLS in either the html5 or Flash tech and will also play MP4 in the html5 tech.
+
+## Flash Technology
+
+The Flash playback tech was previously included in Video.js core and was included in the default `techOrder`. As of version 6, the Flash tech was moved to a separate [videojs-flash plugin][flash] which you would need to include if you still need to use Flash.
+
+It's increasingly likely that end users don't have Flash or their browser has either disabled it or puts a click-to-play or other barrier to using it, so it's strongly recommended to use an alternative such as HLS.
+
+### Enabling RTMP Streaming Playback
 
-Enabling Streaming Playback
---------------------------------
 In order to force the Flash tech to choose streaming playback, you need to provide a valid streaming source **before other valid Flash video sources**. This is necessary because of the source selection algorithm, where playback tech chooses the first possible source object with a valid type. Valid streaming `type` values include `rtmp/mp4` and `rtmp/flv`. The streaming `src` value requires valid connection and stream strings, separated by an `&`. An example of supplying a streaming source through your HTML markup might look like:
 
-    <source src="rtmp://your.streaming.provider.net/cfx/st/&mp4:path/to/video.mp4" type="rtmp/mp4">
-    <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
-    <source src="http://your.static.provider.net/path/to/video.webm" type="video/webm">
+```html
+<source src="rtmp://your.streaming.provider.net/cfx/st/&mp4:path/to/video.mp4" type="rtmp/mp4">
+<source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
+<source src="http://your.static.provider.net/path/to/video.webm" type="video/webm">
+```
 
 You may optionally use the last `/` as the separator between connection and stream strings, for example:
 
-    <source src="rtmp://your.streaming.provider.net/cfx/st/mp4:video.mp4" type="rtmp/mp4">
+```html
+<source src="rtmp://your.streaming.provider.net/cfx/st/mp4:video.mp4" type="rtmp/mp4">
+```
 
 All four RTMP protocols are valid in the `src` (RTMP, RTMPT, RTMPE, and RTMPS).
 
-### A note on sandboxing and security
+#### A note on sandboxing and security
+
 In some environments, such as Electron and NW.js apps, stricter policies are enforced, and `.swf` files won’t be able to communicate with the outside world out of the box. To stream media, you have to add them to a special manifest of trusted files. [nw-flash-trust](https://github.com/szwacz/nw-flash-trust) makes this job easy.
+
+Browsers also prevent the Flash tech from working when you load a page from the filesystem (with the `file:` protocol) and also in sandboxed iframes.
+
+[flash]: https://github.com/videojs/videojs-flash
+
+[hls]: https://github.com/videojs/videojs-contrib-hls
+
+[mse]: https://en.wikipedia.org/wiki/Media_Source_Extensions
+
+[youtube]: https://github.com/videojs/videojs-youtube

docs/guides/text-tracks.md

@@ -1,12 +1,36 @@
 # Text Tracks
+
 Text tracks are a feature of HTML5 video for displaying time-triggered text to the viewer. Video.js offers a cross-browser implementation of text tracks.
 
+## Table of Contents
+
+* [A Note on "Remote" Text Tracks](#a-note-on-remote-text-tracks)
+* [Creating the Text File](#creating-the-text-file)
+* [Adding Text Tracks to Video.js](#adding-text-tracks-to-videojs)
+  * [track Attributes](#track-attributes)
+    * [kind](#kind)
+    * [label](#label)
+    * [default](#default)
+    * [srclang](#srclang)
+  * [Text Tracks from Another Domain](#text-tracks-from-another-domain)
+* [Working with Text Tracks](#working-with-text-tracks)
+  * [Showing Tracks Programmatically](#showing-tracks-programmatically)
+  * [Listen for a Cue Becoming Active](#listen-for-a-cue-becoming-active)
+* [Emulated Text Tracks](#emulated-text-tracks)
+  * [Text Track Settings](#text-track-settings)
+* [Text Track Precedence](#text-track-precedence)
+* [API](#api)
+  * [Remote Text Tracks](#remote-text-tracks)
+  * [Text Tracks](#text-tracks-1)
+
 ## A Note on "Remote" Text Tracks
+
 Video.js refers to so-called "remote" text tracks. This is a convenient term for tracks that have an associated `<track>` element rather than those that do not.
 
 Either can be created programmatically, but _only remote text tracks can be removed from a player._ For that reason, we recommend _only_ using remote text tracks.
 
 ## Creating the Text File
+
 Timed text requires a text file in [WebVTT](http://dev.w3.org/html5/webvtt/) format. This format defines a list of "cues" that have a start time, an end time, and text to display. [Microsoft has a builder](https://dev.modern.ie/testdrive/demos/captionmaker/) that can help you get started on the file.
 
 > **Note:** When creating captions, there are additional [caption formatting techniques](http://www.theneitherworld.com/mcpoodle/SCC_TOOLS/DOCS/SCC_FORMAT.HTML#style) to make captions more meaningful, like brackets around sound effects (e.g. `[ birds chirping ]`).
@@ -14,6 +38,7 @@ Timed text requires a text file in [WebVTT](http://dev.w3.org/html5/webvtt/) for
 > For a more in depth style guide for captioning, see the [Captioning Key](http://www.dcmp.org/captioningkey/), but keep in mind not all features are supported by WebVTT or (more likely) the Video.js WebVTT implementation.
 
 ## Adding Text Tracks to Video.js
+
 Once you have your WebVTT files created, you can add them to your `video` element using the `track` tag. Similar to `source` elements, `track` elements should be added as children of the `video` element:
 
 ```html
@@ -33,23 +58,27 @@ Once you have your WebVTT files created, you can add them to your `video` elemen
 Video.js will automatically read `track` elements from the `video` element. Tracks (remote and non-remote) can also be added programmatically.
 
 ### `track` Attributes
+
 #### `kind`
+
 > [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#text-track-kind)
 
 One of the track types supported by Video.js:
 
-- `"subtitles"` (default): Translations of the dialogue in the video for when audio is available but not understood. Subtitles are shown over the video.
-- `"captions"`: Transcription of the dialogue, sound effects, musical cues, and other audio information for viewer who are deaf/hard of hearing, or the video is muted. Captions are also shown over the video.
-- `"chapters"`: Chapter titles that are used to create navigation within the video. Typically, these are in the form of a list of chapters that the viewer can use to navigate the video.
-- `"descriptions"`: Text descriptions of the action in the content for when the video portion isn't available or because the viewer is blind or not using a screen. Descriptions are read by a screen reader or turned into a separate audio track.
-- `"metadata"`: Tracks that have data meant for JavaScript to parse and do something with. These aren't shown to the user.
+* `"subtitles"` (default): Translations of the dialogue in the video for when audio is available but not understood. Subtitles are shown over the video.
+* `"captions"`: Transcription of the dialogue, sound effects, musical cues, and other audio information for viewer who are deaf/hard of hearing, or the video is muted. Captions are also shown over the video.
+* `"chapters"`: Chapter titles that are used to create navigation within the video. Typically, these are in the form of a list of chapters that the viewer can use to navigate the video.
+* `"descriptions"`: Text descriptions of the action in the content for when the video portion isn't available or because the viewer is blind or not using a screen. Descriptions are read by a screen reader or turned into a separate audio track.
+* `"metadata"`: Tracks that have data meant for JavaScript to parse and do something with. These aren't shown to the user.
 
 #### `label`
+
 > [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#text-track-label)
 
 Short descriptive text for the track that will used in the user interface. For example, in a menu for selecting a captions language.
 
 #### `default`
+
 > [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-track-default)
 
 The boolean `default` attribute can be used to indicate that a track's mode should start as `"showing"`. Otherwise, the viewer would need to select their language from a captions or subtitles menu.
@@ -57,13 +86,15 @@ The boolean `default` attribute can be used to indicate that a track's mode shou
 > **Note:** For chapters, `default` is required if you want the chapters menu to show.
 
 #### `srclang`
+
 > [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-track-srclang)
 
 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
+
 Because Video.js loads the text track file via JavaScript, the [same-origin policy](http://en.wikipedia.org/wiki/Same_origin_policy) applies. If you'd like to have a player served from one domain, but the text track served from another, you'll need to [enable CORS](http://enable-cors.org/) on the server that is serving your text tracks.
 
 In addition to enabling CORS, you will need to add the [`crossorigin` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) to the video element itself. This attribute has two possible values `"anonymous"` and `"use-credentials"`. Most users will want to use `"anonymous"` with cross-origin tracks:
@@ -78,7 +109,9 @@ In addition to enabling CORS, you will need to add the [`crossorigin` attribute]
 One thing to be aware of is that the video files themselves will _also_ need CORS headers. This is because some browsers apply the `crossorigin` attribute to the video source itself and not just the tracks. This is considered a [security concern by the spec](https://html.spec.whatwg.org/multipage/embedded-content.html#security-and-privacy-considerations).
 
 ## Working with Text Tracks
+
 ### Showing Tracks Programmatically
+
 Certain use cases call for turning captions on and off programmatically rather than forcing the user to do so themselves. This can be easily achieved by modifying the `mode` property of the text tracks.
 
 The `mode` can be one of three values `"disabled"`, `"hidden"`, and `"showing"`. When a text track's `mode` is `"disabled"`, the track does not show on screen as the video is playing.
@@ -100,6 +133,7 @@ for (var i = 0; i < tracks.length; i++) {
 ```
 
 ### Listen for a Cue Becoming Active
+
 One of the supported values for `mode` is `"hidden"`. This `mode` means that the track will update as the video is playing, but it won't be visible to the viewer. This is most useful for tracks where `kind="metadata"`.
 
 A common use case for metadata text tracks is to use them to trigger behaviors when their cues become active. For this purpose, tracks emit a `"cuechange"` event.
@@ -128,6 +162,7 @@ metadataTrack.addEventListener('cuechange', function() {
 ```
 
 ## Emulated Text Tracks
+
 By default, Video.js will use native text tracks and fall back to emulated text tracks if the native functionality is broken, incomplete, or non-existent. The Flash tech will always use the emulated text track functionality.
 
 The Video.js API and TextTrack objects were modeled after the W3C specification. Video.js uses [Mozilla's vtt.js](https://github.com/mozilla/vtt.js) library to parse and display emulated text tracks.
@@ -144,6 +179,7 @@ var player = videojs('myvideo', {
 ```
 
 ### Text Track Settings
+
 When using emulated text tracks, captions will have an additional item in the menu called "Caption Settings". This allows the user to alter how captions are styled on screen.
 
 This feature can be disabled by turning off the `TextTrackSettings` component and hiding the menu item.
@@ -163,41 +199,45 @@ var player = videojs('myvideo', {
 ```
 
 ## Text Track Precedence
+
 In general, `"descriptions"` tracks are of lower precedence than `"captions"` and `"subtitles"`. What this mean for developers using Video.js?
 
-- If you are using the `default` attribute, Video.js will choose the first track that is marked as `default` and turn it on. If there are multiple tracks marked `default`, it will turn on the first `"captions"` or `"subtitles"` track _before_ any `"descriptions"` tracks.
-  - This only applied to the emulated text track support, native text tracks behavior will change depending on the browser.
-- If a track is selected from the menu, Video.js will turn off all the other tracks of the same kind. While this suggests Video.js supports both `"subtitles"` and `"captions"` being turned on simultaneously, this is currently not the case; Video.js only supports one track being displayed at a time.
-  - This means that for emulated text tracks, Video.js will display the first enabled `"subtitles"` or `"captions"` track.
-  - When native text tracks are supported, other tracks of the same kind will still be disabled, but it is possible that multiple text tracks are shown.
-  - If a `"descriptions"` track is selected and subsequently a `"subtitles"` or `"captions"` track is selected, the `"descriptions"` track is disabled and its menu button is also disabled.
-- When enabling a track programmatically, Video.js performs minimal enforcement.
-  - For emulated text tracks, Video.js chooses the first track that's `"showing"` - again choosing `"subtitles"` or `"captions"` over `"descriptions"`.
-  - For native text tracks, this behavior depends on the browser. Some browsers will allow multiple text tracks, but others will disable all other tracks when a new one is selected.
+* If you are using the `default` attribute, Video.js will choose the first track that is marked as `default` and turn it on. If there are multiple tracks marked `default`, it will turn on the first `"captions"` or `"subtitles"` track _before_ any `"descriptions"` tracks.
+  * This only applied to the emulated text track support, native text tracks behavior will change depending on the browser.
+* If a track is selected from the menu, Video.js will turn off all the other tracks of the same kind. While this suggests Video.js supports both `"subtitles"` and `"captions"` being turned on simultaneously, this is currently not the case; Video.js only supports one track being displayed at a time.
+  * This means that for emulated text tracks, Video.js will display the first enabled `"subtitles"` or `"captions"` track.
+  * When native text tracks are supported, other tracks of the same kind will still be disabled, but it is possible that multiple text tracks are shown.
+  * If a `"descriptions"` track is selected and subsequently a `"subtitles"` or `"captions"` track is selected, the `"descriptions"` track is disabled and its menu button is also disabled.
+* When enabling a track programmatically, Video.js performs minimal enforcement.
+  * For emulated text tracks, Video.js chooses the first track that's `"showing"` - again choosing `"subtitles"` or `"captions"` over `"descriptions"`.
+  * For native text tracks, this behavior depends on the browser. Some browsers will allow multiple text tracks, but others will disable all other tracks when a new one is selected.
 
 ## 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
+
 As mentioned [above](#a-note-on-remote-text-tracks), remote text tracks represent the recommended API offered by Video.js as they can be removed.
 
-- `Player#remoteTextTracks()`
-- `Player#remoteTextTrackEls()`
-- `Player#addRemoteTextTrack(Object options)`
+* `Player#remoteTextTracks()`
+* `Player#remoteTextTrackEls()`
+* `Player#addRemoteTextTrack(Object options)`
 
   Available options are the same as the [available `track` attributes](#track-attributes). And `language` is a supported option as an alias for the `srclang` attribute - either works here.
 
-- `Player#removeRemoteTextTrack(HTMLTrackElement|TextTrack)`
+* `Player#removeRemoteTextTrack(HTMLTrackElement|TextTrack)`
 
 ### Text Tracks
+
 It is generally recommended that you use _remote_ text tracks rather than these purely programmatic text tracks for the majority of use-cases.
 
-- `Player#textTracks()`
-- `Player#addTextTrack(String kind, [String label [, String language]])`
+* `Player#textTracks()`
+* `Player#addTextTrack(String kind, [String label [, String language]])`
 
   > **Note:** Non-remote text tracks are intended for _purely programmatic usage_ of tracks and have the important limitation that they _cannot be removed once created_.
   >
   > The standard `addTextTrack` does **not** have a corresponding `removeTextTrack` method; so, we actually discourage the use of this method!
 
-- `TextTrackList()`
-- `TextTrack()`
+* `TextTrackList()`
+* `TextTrack()`

docs/guides/tracks.md

@@ -1,11 +1,21 @@
 # Tracks
+
 There are currently three types of tracks:
 
-## [Audio Tracks](./audio-tracks.md)
+## Table of Contents
+
+* [Audio Tracks](#audio-tracks)
+* [Video Tracks](#video-tracks)
+* [Text Tracks](#text-tracks)
+
+## [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

@@ -1,37 +1,59 @@
- Troubleshooting
+# Troubleshooting
+
+## Table of Contents
+
+* [Problems with media formats](#problems-with-media-formats)
+  * [Choosing a video format](#choosing-a-video-format)
+    * [I want to have a single source and don't care about live/adaptive streaming:](#i-want-to-have-a-single-source-and-dont-care-about-liveadaptive-streaming)
+    * [I need adaptive streaming or live streaming](#i-need-adaptive-streaming-or-live-streaming)
+  * [Make sure you are using formats that Video.js can play:](#make-sure-you-are-using-formats-that-videojs-can-play)
+  * [Make sure that the codec used in the file container is supported:](#make-sure-that-the-codec-used-in-the-file-container-is-supported)
+  * [If you are using Flash videos:](#if-you-are-using-flash-videos)
+* [Problems when hosting media](#problems-when-hosting-media)
+* [Problems with fullscreen](#problems-with-fullscreen)
+* [Problems with playback](#problems-with-playback)
+* [Video.js Errors](#videojs-errors)
+  * [vdata123456 errors](#vdata123456-errors)
 
 ## Problems with media formats
 
 ### Choosing a video format
+
 #### I want to have a single source and don't care about live/adaptive streaming:
+
 Most browsers now play MP4 with h264 video. If you want to have a single source, and neither live streaming
-nor adaptive streaming is a consideration, MP4 is a good choice.
+nor adaptive streaming is a consideration, MP4 with h264 video and acc audio is a good choice.
 
 #### I need adaptive streaming or live streaming
+
 Use HLS with [videojs-contrib-hls][hls] or
 Use Dash with [videojs-contrib-dash][dash].
 HLS is more convenient as mobile browsers have native support.
 
-### Make sure you are using formats that video.js can play:
+### Make sure you are using formats that Video.js can play:
+
 * Does your browser/OS support the type of media that you are trying to play?
-* Do you have a video.js plugin that will add support for a media format to video.js? For Example:
+* Do you have a Video.js plugin that will add support for a media format to Video.js? For example:
   * [videojs-youtube][youtube]
   * [videojs-contrib-hls][hls]
   * [videojs-contrib-dash][dash]
 * Verify that you are using the correct [mime-type/content-type][media-types] for your videos.
-  This is used to determine if video.js can play a certain type of media.
+  This is used to determine if Video.js can play a certain type of media.
+
+### Make sure that the codec used in the file container is supported:
 
-### Make sure that the codec for that is being used in the file container is supported:
 * MP4 in browsers typically only supports h264 video and MP3 or AAC audio
 * Some low end phones save video in 3GP format but give it an MP4 extension. These files will not play.
 
 ### If you are using Flash videos:
+
 * Make sure that Flash is installed
-* Make sure the Flash tech is included with video.js (in `video.js >= v6.0.0` it won't be, see [videojs-flash][flash])
+* Make sure the Flash tech is included with Video.js (in `video.js >= v6.0.0` it won't be by default, see [videojs-flash][flash])
 * Flash media include RTMP streams and FLV format media.
 * SWF is not a media format
 
 ## Problems when hosting media
+
 * Your server must support byte-range requests as Chrome and Safari rely on them:
   * Most servers support this by default.
   * If you are proxying the media files via a server side script (PHP), this script must implement ranges. PHP does not do this by default.
@@ -41,21 +63,25 @@ HLS is more convenient as mobile browsers have native support.
   * You are using [videojs-contrib-hls][hls], [videojs-contrib-dash][dash] and your media is served from a different domain than your page.
   * You are using [text tracks][text-tracks] (captions, subtitles, etc.) and they are being served from a different domain than your page.
 
-## Problems with Fullscreen
+## Problems with fullscreen
+
 * If your player is in an iframe, the parent iframes must have the following attributes for fullscreen to be allowed:
   * `allowfullscreen`
   * `webkitallowfullscreen`
   * `mozallowfullscreen`
 
 ## Problems with playback
-* Make sure that the media host supports byte-range requests, this could be breaking playback. See [Problems when Hosting media][hosting-media] for more info.
+
+* Make sure that the media host supports byte-range requests, this could be breaking playback. See [Problems when hosting media][hosting-media] for more info.
 * If your media is taking a long time to start playback or the entire mediadownloads before playback:
   * It is likely that metadata for the media has not been included at the start of the media. In MP4 terms this is called
     the "moov atom". Many encoders are configured to do this by default, others may require you to choose
     a "fast start" or "optimize for streaming" option.
 
-## video.js Errors
+## Video.js Errors
+
 ### vdata123456 errors
+
 This error is thrown when an element that is associated with a component is removed
 from the DOM but the event handlers associated with the element are not removed. This
 is almost always due to event listeners not being disposed when dispose is called on
@@ -63,18 +89,18 @@ a component.
 
 To fix this issue please make sure that all event listeners are cleaned up on dispose.
 
-<!-- same-page -->
-[hosting-problems]: #problems-when-hosting-media
+[hosting-media]: #problems-when-hosting-media
 
-<!-- guides -->
 [text-tracks]: /docs/guides/text-tracks.md
 
-<!-- official projects -->
 [hls]: https://github.com/videojs/videojs-contrib-hls
+
 [dash]: https://github.com/videojs/videojs-contrib-dash
+
 [youtube]: https://github.com/videojs/videojs-youtube
+
 [flash]: https://github.com/videojs/videojs-flash
 
-<!-- External links -->
 [media-types]: http://www.iana.org/assignments/media-types/media-types.xhtml#video
+
 [cors]: http://enable-cors.org/

docs/guides/video-tracks.md

@@ -1,14 +1,33 @@
 # Video Tracks
+
 > **Note:** While video tracks [are a standard][spec-videotrack], there are no compatible implementations at this time. This is an experimental technology!
 
 Video tracks are a feature of HTML5 video for providing alternate video tracks to the user, so they can change the type of video they want to watch. Video.js offers a cross-browser implementation of video tracks.
 
+## Table of Contents
+
+* [Caveats](#caveats)
+* [Working with Video Tracks](#working-with-video-tracks)
+  * [Add a Video Track to the Player](#add-a-video-track-to-the-player)
+  * [Listen for a Video Track Becoming Enabled](#listen-for-a-video-track-becoming-enabled)
+  * [Removing an Video Track from the Player](#removing-an-video-track-from-the-player)
+* [API](#api)
+  * [videojs.VideoTrack](#videojsvideotrack)
+    * [id](#id)
+    * [kind](#kind)
+    * [label](#label)
+    * [language](#language)
+    * [selected](#selected)
+
 ## Caveats
-- It is not possible to add video tracks through HTML like you can with text tracks. They must be added programmatically.
-- Video.js only stores track representations. Switching video tracks for playback is _not handled by Video.js_ and must be handled elsewhere.
+
+* It is not possible to add video tracks through HTML like you can with text tracks. They must be added programmatically.
+* Video.js only stores track representations. Switching video tracks for playback is _not handled by Video.js_ and must be handled elsewhere.
 
 ## Working with Video Tracks
+
 ### Add a Video Track to the Player
+
 ```js
 // Create a player.
 var player = videojs('my-player');
@@ -26,6 +45,7 @@ player.videoTracks().addTrack(track);
 ```
 
 ### Listen for a Video Track Becoming Enabled
+
 When a track is enabled or disabled on an `VideoTrackList`, a `change` event will be fired. You can listen for that event and do something with it.
 
 > NOTE: The initial `VideoTrack` selection (usually the main track that is selected) should not fire a `change` event.
@@ -50,6 +70,7 @@ videoTrackList.addEventListener('change', function() {
 ```
 
 ### Removing an Video Track from the Player
+
 Assuming a player already exists and has an video track that you want to remove, you might do something like the following:
 
 ```js
@@ -61,51 +82,57 @@ 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:
 
-- `Player#videoTracks`
-- `VideoTrackList`
-- `VideoTrack`
+For more complete information, refer to the [Video.js API docs](http://docs.videojs.com/), specifically:
+
+* `Player#videoTracks`
+* `VideoTrackList`
+* `VideoTrack`
 
 ### `videojs.VideoTrack`
+
 This class is based on [the `VideoTrack` standard][spec-videotrack] and can be used to create new video track objects.
 
 Each property below is available as an option to the `VideoTrack` constructor.
 
 #### `id`
+
 > [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-videotrack-id)
 
 A unique identifier for this track. Video.js will generate one if not given.
 
 #### `kind`
+
 > [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-videotrack-kind)
 
 Video.js supports standard `kind` values for `VideoTracks`:
 
-- `"alternative"`: A possible alternative to the main track.
-- `"captions"`: The main video track with burned in captions
-- `"main"`: The main video track.
-- `"sign"`: The main video track with added sign language overlay.
-- `"subtitles"`: The main video track with burned in subtitles.
-- `"commentary"`: The main video track with burned in commentary.
-- `""` (default): No explicit kind, or the kind given by the track's metadata is not recognized by the user agent.
+* `"alternative"`: A possible alternative to the main track.
+* `"captions"`: The main video track with burned in captions
+* `"main"`: The main video track.
+* `"sign"`: The main video track with added sign language overlay.
+* `"subtitles"`: The main video track with burned in subtitles.
+* `"commentary"`: The main video track with burned in commentary.
+* `""` (default): No explicit kind, or the kind given by the track's metadata is not recognized by the user agent.
 
 #### `label`
+
 > [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-videotrack-label)
 
 The label for the track that will be shown to the user. For example, in a menu that lists the different captions available as alternate video tracks.
 
 #### `language`
+
 > [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-videotrack-language)
 
 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`
+
 > [standard definition](https://html.spec.whatwg.org/multipage/embedded-content.html#dom-videotrack-selected)
 
 Whether or not this track should be playing. Only one video track may be selected at a time.
 
-
 [spec-videotrack]: https://html.spec.whatwg.org/multipage/embedded-content.html#videotrack

docs/guides/videojs.md

@@ -0,0 +1,179 @@
+# Usage examples for the functions on videojs
+
+## Table of Contents
+
+* [videojs()](#videojs)
+* [options](#options)
+* [getComponent()](#getcomponent)
+* [registerComponent()](#registercomponent)
+* [getTech()](#gettech)
+* [registerTech()](#registertech)
+* [extend()](#extend)
+* [mergeOptions()](#mergeoptions)
+* [bind()](#bind)
+* [registerPlugin()](#plugin)
+* [xhr()](#xhr)
+
+## `videojs()`
+
+```js
+var myPlayer = videojs('my_video_id');
+```
+
+## `options`
+
+```js
+videojs.options.autoplay = true
+// -> all players will autoplay by default
+```
+
+## `getComponent()`
+
+```js
+var VjsButton = videojs.getComponent('Button');
+// Create a new instance of the component
+var myButton = new VjsButton(myPlayer);
+```
+
+## `registerComponent()`
+
+```js
+// Get a component to subclass
+var VjsButton = videojs.getComponent('Button');
+// Subclass the component (see 'extend' doc for more info)
+var MySpecialButton = videojs.extend(VjsButton, {});
+// Register the new component
+videojs.registerComponent('MySpecialButton', MySpecialButton);
+// (optionally) add the new component as a default player child
+myPlayer.addChild('MySpecialButton');
+```
+
+## `getTech()`
+
+```js
+var Html5 = videojs.getTech('Html5');
+// Create a new instance of the component
+var html5 = new Html5(options);
+```
+
+## `registerTech()`
+
+```js
+// get the Html5 Tech
+var Html5 = videojs.getTech('Html5');
+var MyTech = videojs.extend(Html5, {});
+// Register the new Tech
+videojs.registerTech('MyTech', MyTech);
+var player = videojs('myplayer', {
+  techOrder: ['myTech', 'html5']
+});
+```
+
+## `extend()`
+
+```js
+// Create a basic javascript 'class'
+function MyClass(name) {
+  // Set a property at initialization
+  this.myName = name;
+}
+// Create an instance method
+MyClass.prototype.sayMyName = function() {
+  alert(this.myName);
+};
+// Subclass the exisitng class and change the name
+// when initializing
+var MySubClass = videojs.extend(MyClass, {
+  constructor: function(name) {
+    // Call the super class constructor for the subclass
+    MyClass.call(this, name)
+  }
+});
+// Create an instance of the new sub class
+var myInstance = new MySubClass('John');
+myInstance.sayMyName(); // -> should alert "John"
+```
+
+## `mergeOptions()`
+
+```js
+var defaultOptions = {
+  foo: true,
+  bar: {
+    a: true,
+    b: [1,2,3]
+  }
+};
+var newOptions = {
+  foo: false,
+  bar: {
+    b: [4,5,6]
+  }
+};
+var result = videojs.mergeOptions(defaultOptions, newOptions);
+// result.foo = false;
+// result.bar.a = true;
+// result.bar.b = [4,5,6];
+```
+
+## `bind()`
+
+```js
+var someClass = function() {};
+var someObj = new someClass();
+videojs.bind(someObj, function() {
+  // this will be the context of someObj here
+});
+```
+
+## `registerPlugin()`
+
+**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
+videojs.registerPlugin('myPlugin', function(myPluginOptions) {
+  myPluginOptions = myPluginOptions || {};
+
+  var player = this;
+  var alertText = myPluginOptions.text || 'Player is playing!'
+
+  player.on('play', function() {
+    alert(alertText);
+  });
+});
+// USAGE EXAMPLES
+// EXAMPLE 1: New player with plugin options, call plugin immediately
+var player1 = videojs('idOne', {
+  myPlugin: {
+    text: 'Custom text!'
+  }
+});
+// Click play
+// --> Should alert 'Custom text!'
+// EXAMPLE 3: New player, initialize plugin later
+var player3 = videojs('idThree');
+// Click play
+// --> NO ALERT
+// Click pause
+// Initialize plugin using the plugin function on the player instance
+player3.myPlugin({
+  text: 'Plugin added later!'
+});
+// Click play
+// --> Should alert 'Plugin added later!'
+```
+
+## `xhr()`
+
+```js
+videojs.xhr({
+  body: someJSONString,
+  uri: "/foo",
+  headers: {
+    "Content-Type": "application/json"
+  }
+}, function (err, resp, body) {
+  // check resp.statusCode
+});
+```

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,64 +1,95 @@
-# [Video.js][vjs] Documentation
+# [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.
 
-## Guides
+## Table of Contents
+
+* [Resolving Issues](#resolving-issues)
+  * [FAQ](#faq)
+  * [Troubleshooting](#troubleshooting)
+* [Guides](#guides)
+  * [Getting Started](#getting-started)
+    * [Setup](#setup)
+    * [Player Workflows](#player-workflows)
+    * [Options](#options)
+    * [Tracks](#tracks)
+  * [Customizing](#customizing)
+    * [Skins](#skins)
+    * [Plugins](#plugins)
+    * [Components](#components)
+    * [Tech](#tech)
+    * [Languages](#languages)
+    * [Hooks](#hooks)
+* [API Docs](#api-docs)
+
+## Resolving Issues
+
+### [FAQ](/docs/guides/faq.md)
+
+The frequently asked questions for Video.js.
+
+### [Troubleshooting](/docs/guides/troubleshooting.md)
+
+Troubleshooting help for Video.js.
+
+## [Guides](/docs/guides/)
 
 ### Getting Started
 
-#### [Setup][guides-setup]
+#### [Setup](/docs/guides/setup.md)
 
-The setup guide covers all methods of setting up Video.js players. After mastering the basics, see the [player workflows guide][guides-workflow].
+The setup guide covers all methods of setting up Video.js players.
 
-#### [Options][guides-options]
+#### [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](/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]
+#### [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]
+#### [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.
+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]
+#### [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](https://github.com/videojs/video.js/wiki/Plugins).
+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]
+#### [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]
+#### [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.
 
-## API Docs
+#### [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](/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.
+
+## [API Docs][api]
 
 You can refer to the [full list of API docs][api], but the most relevant API doc is for the [Player][api-player].
 
+[plugins-list]: http://videojs.com/plugins
 
-[api]: http://docs.videojs.com/docs/api/index.html
-[api-player]: http://docs.videojs.com/docs/api/player.html
-[guides]: ./guides/
-[guides-api]: ./guides/api.md
-[guides-audio]: ./guides/audio.md
-[guides-components]: ./guides/components.md
-[guides-glossary]: ./guides/glossary.md
-[guides-languages]: ./guides/languages.md
-[guides-options]: ./guides/options.md
-[guides-plugins]: ./guides/plugins.md
-[guides-removing]: ./guides/removing.md
-[guides-setup]: ./guides/setup.md
-[guides-skins]: ./guides/skins.md
-[guides-tech]: ./guides/tech.md
-[guides-text-tracks]: ./guides/text-tracks.md
-[guides-tracks]: ./guides/tracks.md
-[guides-video-tracks]: ./guides/video-tracks.md
-[guides-workflow]: ./guides/player-workflows.md
-[vjs]: http://videojs.com
+[skins-list]: https://github.com/videojs/video.js/wiki/Skins
+
+[api]: http://docs.videojs.com/
+
+[api-player]: http://docs.videojs.com/Player.html
+
+[vjs-website]: http://videojs.com

lang/ar.json

@@ -1,27 +1,27 @@
 {
   "Play": "تشغيل",
-  "Pause": "ايقاف",
+  "Pause": "إيقاف",
   "Current Time": "الوقت الحالي",
-  "Duration Time": "Dauer",
+  "Duration Time": "مدة",
   "Remaining Time": "الوقت المتبقي",
   "Stream Type": "نوع التيار",
   "LIVE": "مباشر",
   "Loaded": "تم التحميل",
   "Progress": "التقدم",
   "Fullscreen": "ملء الشاشة",
-  "Non-Fullscreen": "غير ملء الشاشة",
+  "Non-Fullscreen": "تعطيل ملء الشاشة",
   "Mute": "صامت",
   "Unmute": "غير الصامت",
   "Playback Rate": "معدل التشغيل",
   "Subtitles": "الترجمة",
-  "subtitles off": "ايقاف الترجمة",
+  "subtitles off": "إيقاف الترجمة",
   "Captions": "التعليقات",
-  "captions off": "ايقاف التعليقات",
+  "captions off": "إيقاف التعليقات",
   "Chapters": "فصول",
   "You aborted the media playback": "لقد ألغيت تشغيل الفيديو",
   "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 playback was aborted due to a corruption problem or because the media used features your browser did not support.": "تم ايقاف تشغيل الفيديو بسبب مشكلة فساد أو لأن الفيديو المستخدم يستخدم ميزات غير مدعومة من متصفحك.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "لا يمكن تحميل الفيديو بسبب فشل في الخادوم أو الشبكة ، أو فشل بسبب عدم إمكانية قراءة تنسيق الفيديو.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "تم إيقاف تشغيل الفيديو بسبب مشكلة فساد أو لأن الفيديو المستخدم يستخدم ميزات غير مدعومة من متصفحك.",
   "No compatible source was found for this media.": "فشل العثور على أي مصدر متوافق مع هذا الفيديو.",
   "Play Video": "تشغيل الفيديو",
   "Close": "أغلق",

lang/de.json

@@ -1,6 +1,7 @@
 {
   "Play": "Wiedergabe",
   "Pause": "Pause",
+  "Replay": "Erneut abspielen",
   "Current Time": "Aktueller Zeitpunkt",
   "Duration Time": "Dauer",
   "Remaining Time": "Verbleibende Zeit",
@@ -31,10 +32,53 @@
   ", opens captions settings dialog": ", öffnet Einstellungen für Untertitel",
   ", opens subtitles settings dialog": ", öffnet Einstellungen für Untertitel",
   ", selected": ", ausgewählt",
+  "captions settings": "Untertiteleinstellungen",
+  "subtitles settings": "Untertiteleinstellungen",
+  "descriptions settings": "Einstellungen für Beschreibungen",
   "Close Modal Dialog": "Modales Fenster schließen",
   "Descriptions": "Beschreibungen",
   "descriptions off": "Beschreibungen aus",
   "The media is encrypted and we do not have the keys to decrypt it.": "Die Entschlüsselungsschlüssel für den verschlüsselten Medieninhalt sind nicht verfügbar.",
   ", opens descriptions settings dialog": ", öffnet Einstellungen für Beschreibungen",
-  "Audio Track": "Tonspur"
+  "Audio Track": "Tonspur",
+  "Text": "Schrift",
+  "White": "Weiß",
+  "Black": "Schwarz",
+  "Red": "Rot",
+  "Green": "Grün",
+  "Blue": "Blau",
+  "Yellow": "Gelb",
+  "Magenta": "Magenta",
+  "Cyan": "Türkis",
+  "Background": "Hintergrund",
+  "Window": "Fenster",
+  "Transparent": "Durchsichtig",
+  "Semi-Transparent": "Halbdurchsichtig",
+  "Opaque": "Undurchsictig",
+  "Font Size": "Schriftgröße",
+  "Text Edge Style": "Textkantenstil",
+  "None": "Kein",
+  "Raised": "Erhoben",
+  "Depressed": "Gedrückt",
+  "Uniform": "Uniform",
+  "Dropshadow": "Schlagschatten",
+  "Font Family": "Schristfamilie",
+  "Proportional Sans-Serif": "Proportionale Sans-Serif",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Serif": "Proportionale Serif",
+  "Monospace Serif": "Monospace Serif",
+  "Casual": "Zwanglos",
+  "Script": "Schreibeschrift",
+  "Small Caps": "Small-Caps",
+  "Reset": "Zurücksetzen",
+  "restore all settings to the default values": "Alle Einstellungen auf die Standardwerte zurücksetzen",
+  "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.",
+  "End of dialog window.": "Ende des Dialogfensters.",
+  "Audio Player": "Audio-Player",
+  "Video Player": "Video-Player",
+  "Progress Bar": "Forschrittsbalken",
+  "progress bar timing: currentTime={1} duration={2}": "{1} von {2}",
+  "Volume Level": "Lautstärkestufe"
 }

lang/en.json

@@ -1,6 +1,9 @@
 {
+  "Audio Player": "Audio Player",
+  "Video Player": "Video Player",
   "Play": "Play",
   "Pause": "Pause",
+  "Replay": "Replay",
   "Current Time": "Current Time",
   "Duration Time": "Duration Time",
   "Remaining Time": "Remaining Time",
@@ -8,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",
@@ -18,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.",
@@ -30,11 +35,50 @@
   "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.",
   ", opens captions settings dialog": ", opens captions settings dialog",
   ", opens subtitles settings dialog": ", opens subtitles settings dialog",
   ", opens descriptions settings dialog": ", opens descriptions settings dialog",
-  ", selected": ", selected"
+  ", selected": ", selected",
+  "captions settings": "captions settings",
+  "subtitles settings": "subititles settings",
+  "descriptions settings": "descriptions settings",
+  "Text": "Text",
+  "White": "White",
+  "Black": "Black",
+  "Red": "Red",
+  "Green": "Green",
+  "Blue": "Blue",
+  "Yellow": "Yellow",
+  "Magenta": "Magenta",
+  "Cyan": "Cyan",
+  "Background": "Background",
+  "Window": "Window",
+  "Transparent": "Transparent",
+  "Semi-Transparent": "Semi-Transparent",
+  "Opaque": "Opaque",
+  "Font Size": "Font Size",
+  "Text Edge Style": "Text Edge Style",
+  "None": "None",
+  "Raised": "Raised",
+  "Depressed": "Depressed",
+  "Uniform": "Uniform",
+  "Dropshadow": "Dropshadow",
+  "Font Family": "Font Family",
+  "Proportional Sans-Serif": "Proportional Sans-Serif",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Serif": "Proportional Serif",
+  "Monospace Serif": "Monospace Serif",
+  "Casual": "Casual",
+  "Script": "Script",
+  "Small Caps": "Small Caps",
+  "Reset": "Reset",
+  "restore all settings to the default values": "restore 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.",
+  "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,6 +1,9 @@
 {
+  "Audio Player": "Lecteur audio",
+  "Video Player": "Lecteur vidéo",
   "Play": "Lecture",
   "Pause": "Pause",
+  "Replay": "Revoir",
   "Current Time": "Temps actuel",
   "Duration Time": "Durée",
   "Remaining Time": "Temps restant",
@@ -8,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",
@@ -18,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.",
@@ -30,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",
+  "restore all settings to the default values": "Restaurer 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/gl.json

@@ -0,0 +1,27 @@
+{
+  "Play": "Reprodución",
+  "Play Video": "Reprodución Vídeo",
+  "Pause": "Pausa",
+  "Current Time": "Tempo reproducido",
+  "Duration Time": "Duración total",
+  "Remaining Time": "Tempo restante",
+  "Stream Type": "Tipo de secuencia",
+  "LIVE": "DIRECTO",
+  "Loaded": "Cargado",
+  "Progress": "Progreso",
+  "Fullscreen": "Pantalla completa",
+  "Non-Fullscreen": "Pantalla non completa",
+  "Mute": "Silenciar",
+  "Unmute": "Non silenciado",
+  "Playback Rate": "Velocidade de reprodución",
+  "Subtitles": "Subtítulos",
+  "subtitles off": "Subtítulos desactivados",
+  "Captions": "Subtítulos con lenda",
+  "captions off": "Subtítulos con lenda desactivados",
+  "Chapters": "Capítulos",
+  "You aborted the media playback": "Interrompeches a reprodución do vídeo.",
+  "A network error caused the media download to fail part-way.": "Un erro de rede interrompeu a descarga do vídeo.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Non se puido cargar o vídeo debido a un fallo de rede ou do servidor ou porque o formato é incompatible.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "A reproducción de vídeo interrompeuse por un problema de corrupción de datos ou porque o vídeo precisa funcións que o teu navegador non ofrece.",
+  "No compatible source was found for this media.": "Non se atopou ningunha fonte compatible con este vídeo."
+}

lang/nl.json

@@ -1,37 +1,84 @@
 {
+  "Audio Player": "Audiospeler",
+  "Video Player": "Videospeler",
   "Play": "Afspelen",
-  "Pause": "Pauze",
+  "Pause": "Pauzeren",
+  "Replay": "Opnieuw afspelen",
   "Current Time": "Huidige tijd",
-  "Duration Time": "Looptijd",
+  "Duration Time": "Tijdsduur",
   "Remaining Time": "Resterende tijd",
   "Stream Type": "Streamtype",
   "LIVE": "LIVE",
   "Loaded": "Geladen",
-  "Progress": "Status",
+  "Progress": "Voortgang",
+  "Progress Bar": "Voortgangsbalk",
+  "progress bar timing: currentTime={1} duration={2}": "{1} van {2}",
   "Fullscreen": "Volledig scherm",
   "Non-Fullscreen": "Geen volledig scherm",
-  "Mute": "Geluid uit",
-  "Unmute": "Geluid aan",
-  "Playback Rate": "Weergavesnelheid",
+  "Mute": "Dempen",
+  "Unmute": "Niet dempen",
+  "Playback Rate": "Afspeelsnelheid",
   "Subtitles": "Ondertiteling",
   "subtitles off": "ondertiteling uit",
   "Captions": "Bijschriften",
   "captions off": "bijschriften uit",
   "Chapters": "Hoofdstukken",
   "Descriptions": "Beschrijvingen",
-  "descriptions off": "beschrijvingen off",
-  "You aborted the media playback": "U hebt de mediaweergave afgebroken.",
-  "A network error caused the media download to fail part-way.": "De mediadownload is mislukt door een netwerkfout.",
-  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "De media kon niet worden geladen, vanwege een server- of netwerkfout of doordat het formaat niet wordt ondersteund.",
-  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "De mediaweergave is afgebroken vanwege beschadigde data of het mediabestand gebruikt functies die niet door uw browser worden ondersteund.",
-  "No compatible source was found for this media.": "Voor deze media is geen ondersteunde bron gevonden.",
-  "Play Video": "Video Afspelen",
+  "descriptions off": "beschrijvingen uit",
+  "Audio Track": "Audiospoor",
+  "Volume Level": "Geluidsniveau",
+  "You aborted the media playback": "U heeft het afspelen van de media afgebroken",
+  "A network error caused the media download to fail part-way.": "Een netwerkfout heeft ervoor gezorgd dat het downloaden van de media halverwege is mislukt.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "De media kon niet worden geladen, dit komt doordat of de server of het netwerk mislukt of doordat het formaat niet wordt ondersteund.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Het afspelen van de media is afgebroken door een probleem met beschadeigde gegevens of doordat de media functies gebruikt die uw browser niet ondersteund.",
+  "No compatible source was found for this media.": "Er is geen geschikte bron voor deze media gevonden.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "De media is versleuteld en we hebben de sleutels niet om deze te ontsleutelen.",
+  "Play Video": "Video afspelen",
   "Close": "Sluiten",
-  "Modal Window": "Modal Venster",
-  "This is a modal window": "Dit is een modaal venster",
-  "This modal can be closed by pressing the Escape key or activating the close button.": "Dit modaal venster kan gesloten worden door op Escape te drukken of de 'sluiten' knop te activeren.",
-  ", opens captions settings dialog": ", opent bijschriften instellingen venster",
-  ", opens subtitles settings dialog": ", opent ondertiteling instellingen venster",
-  ", opens descriptions settings dialog": ", opent beschrijvingen instellingen venster",
-  ", selected": ", selected"
-}
+  "Close Modal Dialog": "Extra venster sluiten",
+  "Modal Window": "Extra venster",
+  "This is a modal window": "Dit is een extra venster",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Dit venster kan worden gesloten door op de Escape-toets te drukken of door de sluiten-knop te activeren.",
+  ", opens captions settings dialog": ", opent instellingen-venster voor bijschriften",
+  ", opens subtitles settings dialog": ", opent instellingen-venster voor ondertitelingen",
+  ", opens descriptions settings dialog": ", opent instellingen-venster voor beschrijvingen",
+  ", selected": ", geselecteerd",
+  "captions settings": "bijschriften-instellingen",
+  "subtitles settings": "ondertiteling-instellingen",
+  "descriptions settings": "beschrijvingen-instellingen",
+  "Text": "Tekst",
+  "White": "Wit",
+  "Black": "Zwart",
+  "Red": "Rood",
+  "Green": "Groen",
+  "Blue": "Blauw",
+  "Yellow": "Geel",
+  "Magenta": "Magenta",
+  "Cyan": "Cyaan",
+  "Background": "Achtergrond",
+  "Window": "Venster",
+  "Transparent": "Transparant",
+  "Semi-Transparent": "Semi-transparant",
+  "Opaque": "Ondoorzichtig",
+  "Font Size": "Lettergrootte",
+  "Text Edge Style": "Stijl tekstrand",
+  "None": "Geen",
+  "Raised": "Verhoogd",
+  "Depressed": "Ingedrukt",
+  "Uniform": "Uniform",
+  "Dropshadow": "Schaduw",
+  "Font Family": "Lettertype",
+  "Proportional Sans-Serif": "Proportioneel sans-serif",
+  "Monospace Sans-Serif": "Monospace sans-serif",
+  "Proportional Serif": "Proportioneel serif",
+  "Monospace Serif": "Monospace serif",
+  "Casual": "Luchtig",
+  "Script": "Script",
+  "Small Caps": "Kleine hoofdletters",
+  "Reset": "Herstellen",
+  "restore all settings to the default values": "alle instellingen naar de standaardwaarden herstellen",
+  "Done": "Klaar",
+  "Caption Settings Dialog": "Venster voor bijschriften-instellingen",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Begin van dialoogvenster. Escape zal annuleren en het venster sluiten.",
+  "End of dialog window.": "Einde van dialoogvenster."
+}

lang/pt-PT.json

@@ -0,0 +1,41 @@
+{
+  "Play": "Reproduzir",
+  "Pause": "Parar",
+  "Replay": "Reiniciar",
+  "Current Time": "Tempo Atual",
+  "Duration Time": "Duração",
+  "Remaining Time": "Tempo Restante",
+  "Stream Type": "Tipo de Stream",
+  "LIVE": "EM DIRETO",
+  "Loaded": "Carregado",
+  "Progress": "Progresso",
+  "Fullscreen": "Ecrã inteiro",
+  "Non-Fullscreen": "Ecrã normal",
+  "Mute": "Desativar som",
+  "Unmute": "Ativar som",
+  "Playback Rate": "Velocidade de reprodução",
+  "Subtitles": "Legendas",
+  "subtitles off": "desativar legendas",
+  "Captions": "Anotações",
+  "captions off": "desativar anotações",
+  "Chapters": "Capítulos",
+  "Close Modal Dialog": "Fechar Janela Modal",
+  "Descriptions": "Descrições",
+  "descriptions off": "desativar descrições",
+  "Audio Track": "Faixa Áudio",
+  "You aborted the media playback": "Parou a reprodução do vídeo.",
+  "A network error caused the media download to fail part-way.": "Um erro na rede fez o vídeo falhar parcialmente.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "O vídeo não pode ser carregado, ou porque houve um problema na rede ou no servidor, ou porque formato do vídeo não é compatível.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "A reprodução foi interrompida por um problema com o vídeo ou porque o formato não é compatível com o seu navegador.",
+  "No compatible source was found for this media.": "Não foi encontrada uma fonte de vídeo compatível.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "O vídeo está encriptado e não há uma chave para o desencriptar.",
+  "Play Video": "Reproduzir Vídeo",
+  "Close": "Fechar",
+  "Modal Window": "Janela Modal",
+  "This is a modal window": "Isto é uma janela modal",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Esta modal pode ser fechada pressionando a tecla ESC ou ativando o botão de fechar.",
+  ", opens captions settings dialog": ", abre janela com definições de legendas",
+  ", opens subtitles settings dialog": ", abre janela com definições de legendas",
+  ", opens descriptions settings dialog": ", abre janela com definições de descrições",
+  ", selected": ", seleccionado"
+}

lang/sk.json

@@ -0,0 +1,84 @@
+{
+  "Audio Player": "Zvukový prehrávač",
+  "Video Player": "Video prehrávač",
+  "Play": "Prehrať",
+  "Pause": "Pozastaviť",
+  "Replay": "Prehrať znova",
+  "Current Time": "Aktuálny čas",
+  "Duration Time": "Čas trvania",
+  "Remaining Time": "Zostávajúci čas",
+  "Stream Type": "Typ stopy",
+  "LIVE": "NAŽIVO",
+  "Loaded": "Načítané",
+  "Progress": "Priebeh",
+  "Progress Bar": "Ukazovateľ priebehu",
+  "progress bar timing: currentTime={1} duration={2}": "časovanie ukazovateľa priebehu: currentTime={1} duration={2}",
+  "Fullscreen": "Režim celej obrazovky",
+  "Non-Fullscreen": "Režim normálnej obrazovky",
+  "Mute": "Stlmiť",
+  "Unmute": "Zrušiť stlmenie",
+  "Playback Rate": "Rýchlosť prehrávania",
+  "Subtitles": "Titulky",
+  "subtitles off": "titulky vypnuté",
+  "Captions": "Popisky",
+  "captions off": "popisky vypnuté",
+  "Chapters": "Kapitoly",
+  "Descriptions": "Opisy",
+  "descriptions off": "opisy vypnuté",
+  "Audio Track": "Zvuková stopa",
+  "Volume Level": "Úroveň hlasitosti",
+  "You aborted the media playback": "Prerušili ste prehrávanie",
+  "A network error caused the media download to fail part-way.": "Sťahovanie súboru bolo zrušené pre chybu na sieti.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Súbor sa nepodarilo načítať pre chybu servera, sieťového pripojenia, alebo je formát súboru nepodporovaný.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Prehrávanie súboru bolo prerušené pre poškodené dáta, alebo súbor používa vlastnosti, ktoré váš prehliadač nepodporuje.",
+  "No compatible source was found for this media.": "Nebol nájdený žiaden kompatibilný zdroj pre tento súbor.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Súbor je zašifrovaný a nie je k dispozícii kľúč na rozšifrovanie.",
+  "Play Video": "Prehrať video",
+  "Close": "Zatvoriť",
+  "Close Modal Dialog": "Zatvoriť modálne okno",
+  "Modal Window": "Modálne okno",
+  "This is a modal window": "Toto je modálne okno",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Toto modálne okno je možné zatvoriť stlačením klávesy Escape, alebo aktivovaním tlačidla na zatvorenie.",
+  ", opens captions settings dialog": ", otvorí okno nastavení popiskov",
+  ", opens subtitles settings dialog": ", otvorí okno nastavení titulkov",
+  ", opens descriptions settings dialog": ", otvorí okno nastavení opisov",
+  ", selected": ", označené",
+  "captions settings": "nastavenia popiskov",
+  "subtitles settings": "nastavenia titulkov",
+  "descriptions settings": "nastavenia opisov",
+  "Text": "Text",
+  "White": "Biela",
+  "Black": "Čierna",
+  "Red": "Červená",
+  "Green": "Zelená",
+  "Blue": "Modrá",
+  "Yellow": "Žltá",
+  "Magenta": "Ružová",
+  "Cyan": "Tyrkysová",
+  "Background": "Pozadie",
+  "Window": "Okno",
+  "Transparent": "Priesvitné",
+  "Semi-Transparent": "Polopriesvitné",
+  "Opaque": "Plné",
+  "Font Size": "Veľkosť písma",
+  "Text Edge Style": "Typ okrajov písma",
+  "None": "Žiadne",
+  "Raised": "Zvýšené",
+  "Depressed": "Znížené",
+  "Uniform": "Pravidelné",
+  "Dropshadow": "S tieňom",
+  "Font Family": "Typ písma",
+  "Proportional Sans-Serif": "Proporčné bezpätkové",
+  "Monospace Sans-Serif": "Pravidelné, bezpätkové",
+  "Proportional Serif": "Proporčné pätkové",
+  "Monospace Serif": "Pravidelné pätkové",
+  "Casual": "Bežné",
+  "Script": "Písané",
+  "Small Caps": "Malé kapitálky",
+  "Reset": "Resetovať",
+  "restore all settings to the default values": "všetky nastavenia na základné hodnoty",
+  "Done": "Hotovo",
+  "Caption Settings Dialog": "Okno nastavení popiskov",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Začiatok okna. Klávesa Escape zruší a zavrie okno.",
+  "End of dialog window.": "Koniec okna."
+}

lang/tr.json

@@ -1,6 +1,7 @@
 {
   "Play": "Oynat",
   "Pause": "Duraklat",
+  "Replay": "Yeniden Oynat",
   "Current Time": "Süre",
   "Duration Time": "Toplam Süre",
   "Remaining Time": "Kalan Süre",
@@ -15,20 +16,61 @@
   "Playback Rate": "Oynatma Hızı",
   "Subtitles": "Altyazı",
   "subtitles off": "Altyazı Kapalı",
-  "Captions": "Ek Açıklamalar",
-  "captions off": "Ek Açıklamalar Kapalı",
+  "Captions": "Altyazı",
+  "captions off": "Altyazı Kapalı",
   "Chapters": "Bölümler",
+  "Close Modal Dialog": "Dialogu Kapat",
+  "Descriptions": "Açıklamalar",
+  "descriptions off": "Açıklamalar kapalı",
+  "Audio Track": "Ses Dosyası",
   "You aborted the media playback": "Video oynatmayı iptal ettiniz",
   "A network error caused the media download to fail part-way.": "Video indirilirken bağlantı sorunu oluştu.",
   "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Video oynatılamadı, ağ ya da sunucu hatası veya belirtilen format desteklenmiyor.",
   "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Tarayıcınız desteklemediği için videoda hata oluştu.",
   "No compatible source was found for this media.": "Video için kaynak bulunamadı.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Video, şifrelenmiş bir kaynaktan geliyor ve oynatmak için gerekli anahtar bulunamadı.",
   "Play Video": "Videoyu Oynat",
   "Close": "Kapat",
   "Modal Window": "Modal Penceresi",
   "This is a modal window": "Bu bir modal penceresidir",
   "This modal can be closed by pressing the Escape key or activating the close button.": "Bu modal ESC tuşuna basarak ya da kapata tıklanarak kapatılabilir.",
-  ", opens captions settings dialog": ", ek açıklama ayarları menüsünü açar",
+  ", opens captions settings dialog": ", altyazı ayarları menüsünü açar",
   ", opens subtitles settings dialog": ", altyazı ayarları menüsünü açar",
-  ", selected": ", seçildi"
+  ", opens descriptions settings dialog": ", açıklama ayarları menüsünü açar",
+  ", selected": ", seçildi",
+  "captions settings": "altyazı ayarları",
+  "subtitles settings": "altyazı ayarları",
+  "descriptions settings": "açıklama ayarları",
+  "Text": "Yazı",
+  "White": "Beyaz",
+  "Black": "Siyah",
+  "Red": "Kırmızı",
+  "Green": "Yeşil",
+  "Blue": "Mavi",
+  "Yellow": "Sarı",
+  "Magenta": "Macenta",
+  "Cyan": "Açık Mavi (Camgöbeği)",
+  "Background": "Arka plan",
+  "Window": "Pencere",
+  "Transparent": "Saydam",
+  "Semi-Transparent": "Yarı-Saydam",
+  "Opaque": "Mat",
+  "Font Size": "Yazı Boyutu",
+  "Text Edge Style": "Yazı Kenarlıkları",
+  "None": "Hiçbiri",
+  "Raised": "Kabartılmış",
+  "Depressed": "Yassı",
+  "Uniform": "Düz",
+  "Dropshadow": "Gölgeli",
+  "Font Family": "Yazı Tipi",
+  "Proportional Sans-Serif": "Orantılı Sans-Serif",
+  "Monospace Sans-Serif": "Eşaralıklı Sans-Serif",
+  "Proportional Serif": "Orantılı Serif",
+  "Monospace Serif": "Eşaralıklı Serif",
+  "Casual": "Gündelik",
+  "Script": "El Yazısı",
+  "Small Caps": "Küçük Boyutlu Büyük Harfli",
+  "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."
 }

lang/vi.json

@@ -1,6 +1,9 @@
 {
+  "Audio Player": "Trình phát Audio",
+  "Video Player": "Trình phát Video",
   "Play": "Phát",
   "Pause": "Tạm dừng",
+  "Replay": "Phát lại",
   "Current Time": "Thời gian hiện tại",
   "Duration Time": "Độ dài",
   "Remaining Time": "Thời gian còn lại",
@@ -8,19 +11,74 @@
   "LIVE": "TRỰC TIẾP",
   "Loaded": "Đã tải",
   "Progress": "Tiến trình",
+  "Progress Bar": "Thanh tiến trình",
+  "progress bar timing: currentTime={1} duration={2}": "{1} của {2}",
   "Fullscreen": "Toàn màn hình",
   "Non-Fullscreen": "Thoát toàn màn hình",
   "Mute": "Tắt tiếng",
   "Unmute": "Bật âm thanh",
-  "Playback Rate": "Tốc độ phát",
+  "Playback Rate": "Tỉ lệ phát lại",
   "Subtitles": "Phụ đề",
-  "subtitles off": "Tắt phụ đề",
+  "subtitles off": "tắt phụ đề",
   "Captions": "Chú thích",
-  "captions off": "Tắt chú thích",
+  "captions off": "tắt chú thích",
   "Chapters": "Chương",
-  "You aborted the media playback": "Bạn đã hủy việc phát media.",
+  "Descriptions": "Mô tả",
+  "descriptions off": "tắt mô tả",
+  "Audio Track": "Track âm thanh",
+  "Volume Level": "Mức âm lượng",
+  "You aborted the media playback": "Bạn đã hủy việc phát lại media.",
   "A network error caused the media download to fail part-way.": "Một lỗi mạng dẫn đến việc tải media bị lỗi.",
   "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Video không tải được, mạng hay server có lỗi hoặc định dạng không được hỗ trợ.",
   "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Phát media đã bị hủy do một sai lỗi hoặc media sử dụng những tính năng trình duyệt không hỗ trợ.",
-  "No compatible source was found for this media.": "Không có nguồn tương thích cho media này."
+  "No compatible source was found for this media.": "Không có nguồn tương thích cho media này.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "Media đã được mã hóa và chúng tôi không có để giải mã nó.",
+  "Play Video": "Phát Video",
+  "Close": "Đóng",
+  "Close Modal Dialog": "Đóng cửa sổ",
+  "Modal Window": "Cửa sổ",
+  "This is a modal window": "Đây là một cửa sổ",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Cửa sổ này có thể thoát bằng việc nhấn phím Esc hoặc kích hoạt nút đóng.",
+  ", opens captions settings dialog": ", mở hộp thoại cài đặt chú thích",
+  ", opens subtitles settings dialog": ", mở hộp thoại cài đặt phụ đề",
+  ", opens descriptions settings dialog": ", mở hộp thoại cài đặt mô tả",
+  ", selected": ", đã chọn",
+  "captions settings": "cài đặt chú thích",
+  "subtitles settings": "cài đặt phụ đề",
+  "descriptions settings": "cài đặt mô tả",
+  "Text": "Văn bản",
+  "White": "Trắng",
+  "Black": "Đen",
+  "Red": "Đỏ",
+  "Green": "Xanh lá cây",
+  "Blue": "Xanh da trời",
+  "Yellow": "Vàng",
+  "Magenta": "Đỏ tươi",
+  "Cyan": "Lam",
+  "Background": "Nền",
+  "Window": "Cửa sổ",
+  "Transparent": "Trong suốt",
+  "Semi-Transparent": "Bán trong suốt",
+  "Opaque": "Mờ",
+  "Font Size": "Kích cỡ phông chữ",
+  "Text Edge Style": "Dạng viền văn bản",
+  "None": "None",
+  "Raised": "Raised",
+  "Depressed": "Depressed",
+  "Uniform": "Uniform",
+  "Dropshadow": "Dropshadow",
+  "Font Family": "Phông chữ",
+  "Proportional Sans-Serif": "Proportional Sans-Serif",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Serif": "Proportional Serif",
+  "Monospace Serif": "Monospace Serif",
+  "Casual": "Casual",
+  "Script": "Script",
+  "Small Caps": "Small Caps",
+  "Reset": "Đặt lại",
+  "restore all settings to the default values": "khôi phục lại tất cả các cài đặt về giá trị mặc định",
+  "Done": "Xong",
+  "Caption Settings Dialog": "Hộp thoại cài đặt chú thích",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Bắt đầu cửa sổ hộp thoại. Esc sẽ thoát và đóng cửa sổ.",
+  "End of dialog window.": "Kết thúc cửa sổ hộp thoại."
 }

lang/zh-CN.json

@@ -12,16 +12,29 @@
   "Non-Fullscreen": "退出全屏",
   "Mute": "静音",
   "Unmute": "取消静音",
-  "Playback Rate": "播放码率",
+  "Playback Rate": "播放速度",
   "Subtitles": "字幕",
-  "subtitles off": "字幕关闭",
+  "subtitles off": "关闭字幕",
   "Captions": "内嵌字幕",
-  "captions off": "内嵌字幕关闭",
+  "captions off": "关闭内嵌字幕",
   "Chapters": "节目段落",
+  "Close Modal Dialog": "关闭弹窗",
+  "Descriptions": "描述",
+  "descriptions off": "关闭描述",
+  "Audio Track": "音轨",
   "You aborted the media playback": "视频播放被终止",
   "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 playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
   "No compatible source was found for this media.": "无法找到此视频兼容的源。",
-  "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": "播放视频",
+  "Close": "关闭",
+  "Modal Window": "弹窗",
+  "This is a modal window": "这是一个弹窗",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
+  ", opens captions settings dialog": ", 开启标题设置弹窗",
+  ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
+  ", opens descriptions settings dialog": ", 开启描述设置弹窗",
+  ", selected": ", 选择"
 }

package.json

@@ -1,8 +1,8 @@
 {
   "name": "video.js",
   "description": "An HTML5 and Flash video player with a common API and skin for both.",
-  "version": "5.14.0",
-  "main": "./es5/video.js",
+  "version": "6.3.3",
+  "main": "./dist/video.cjs.js",
   "style": "./dist/video-js.css",
   "copyright": "Copyright Brightcove, Inc. <https://www.brightcove.com/>",
   "license": "Apache-2.0",
@@ -18,14 +18,30 @@
   "scripts": {
     "changelog": "conventional-changelog -p videojs -i CHANGELOG.md -s",
     "build": "grunt dist",
+    "rollup-all": "npm run rollup && npm run rollup-minify",
+    "rollup": "babel-node build/rollup.js",
+    "rollup-minify": "babel-node build/rollup.js --minify",
+    "rollup-dev": "babel-node build/rollup.js --watch",
+    "watch": "npm run rollup-dev",
+    "assets": "node build/assets.js",
     "change": "grunt chg-add",
     "clean": "grunt clean",
     "grunt": "grunt",
     "lint": "vjsstandard",
-    "start": "grunt watchAll",
+    "start": "grunt dev",
     "test": "grunt test",
-    "toc": "doctoc",
-    "docs": "jsdoc -r src/js -d docs/api -c .jsdoc.json"
+    "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 && run-p docs:api build || in-install",
+    "publish": "node build/gh-release.js",
+    "prepush": "npm run lint -- --errors",
+    "version": "node build/version.js && git add CHANGELOG.md"
   },
   "repository": {
     "type": "git",
@@ -33,61 +49,66 @@
   },
   "dependencies": {
     "babel-runtime": "^6.9.2",
-    "global": "4.3.0",
+    "global": "4.3.2",
     "safe-json-parse": "4.0.0",
     "tsml": "1.0.1",
     "videojs-font": "2.0.0",
     "videojs-ie8": "1.1.2",
-    "videojs-swf": "5.1.0",
-    "videojs-vtt.js": "0.12.1",
-    "xhr": "2.2.0"
+    "videojs-vtt.js": "0.12.4",
+    "xhr": "2.4.0"
   },
   "devDependencies": {
+    "aliasify": "^2.1.0",
     "babel-cli": "^6.11.4",
-    "babel-plugin-inline-json": "^1.1.1",
-    "babel-plugin-transform-es3-member-expression-literals": "^6.8.0",
-    "babel-plugin-transform-es3-property-literals": "^6.8.0",
+    "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-transform-runtime": "^6.9.0",
     "babel-preset-es2015": "^6.14.0",
+    "babel-preset-es3": "^1.0.1",
     "babel-register": "^6.9.0",
     "babelify": "^7.3.0",
     "blanket": "^1.1.6",
+    "bluebird": "^3.5.0",
     "browserify-derequire": "^0.9.4",
-    "browserify-istanbul": "^0.2.1",
+    "browserify-istanbul": "^2.0.0",
     "browserify-versionify": "^1.0.4",
     "bundle-collapser": "^1.2.1",
     "chg": "^0.3.2",
+    "cli-table": "^0.3.1",
     "conventional-changelog-cli": "^1.2.0",
     "conventional-changelog-videojs": "^3.0.0",
-    "doctoc": "^1.2.0",
     "es5-shim": "^4.1.3",
     "es6-shim": "^0.35.1",
-    "ghooks": "^1.3.2",
-    "gkatsev-grunt-sass": "^1.1.1",
-    "grunt": "^0.4.4",
+    "filesize": "^3.5.6",
+    "gh-release": "^3.0.0",
+    "grunt": "^0.4.5",
     "grunt-accessibility": "^5.0.0",
-    "grunt-babel": "^6.0.0",
-    "grunt-banner": "^0.4.0",
-    "grunt-browserify": "3.5.1",
-    "grunt-cli": "~0.1.13",
+    "grunt-babel": "^7.0.0",
+    "grunt-banner": "^0.6.0",
+    "grunt-browserify": "5.2.0",
+    "grunt-cli": "~1.2.0",
     "grunt-concurrent": "^2.3.1",
-    "grunt-contrib-clean": "~0.4.0a",
-    "grunt-contrib-concat": "^0.5.1",
-    "grunt-contrib-connect": "~0.7.1",
-    "grunt-contrib-copy": "^0.8.0",
-    "grunt-contrib-cssmin": "~1.0.2",
+    "grunt-contrib-clean": "^1.0.0",
+    "grunt-contrib-concat": "^1.0.1",
+    "grunt-contrib-connect": "~1.0.2",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-cssmin": "~2.2.0",
     "grunt-contrib-uglify": "^2.0.0",
-    "grunt-contrib-watch": "~0.1.4",
+    "grunt-contrib-watch": "~1.0.0",
     "grunt-coveralls": "^1.0.0",
     "grunt-fastly": "^0.1.3",
     "grunt-github-releaser": "^0.1.17",
     "grunt-karma": "^2.0.0",
+    "grunt-sass": "^2.0.0",
     "grunt-shell": "^2.0.0",
-    "grunt-version": "~0.3.0",
+    "grunt-version": "~1.1.1",
     "grunt-videojs-languages": "0.0.4",
-    "grunt-zip": "0.10.2",
+    "grunt-zip": "0.17.1",
+    "humanize-duration": "^3.10.0",
+    "husky": "^0.14.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",
@@ -99,24 +120,49 @@
     "karma-qunit": "^1.2.0",
     "karma-safari-launcher": "^1.0.0",
     "karma-sinon": "^1.0.5",
+    "klaw-sync": "^3.0.0",
     "load-grunt-tasks": "^3.1.0",
     "lodash": "^4.16.6",
     "markdown-table": "^1.0.0",
+    "minimist": "^1.2.0",
     "npm-run": "^4.1.0",
+    "npm-run-all": "^4.0.2",
     "proxyquireify": "^3.0.0",
-    "qunitjs": "^1.23.1",
+    "qunitjs": "1.23.1",
+    "remark-cli": "^4.0.0",
+    "remark-lint": "^6.0.0",
+    "remark-parse": "^4.0.0",
+    "remark-stringify": "^4.0.0",
+    "remark-toc": "^4.0.0",
+    "remark-validate-links": "^7.0.0",
+    "replace": "^0.3.0",
+    "rollup": "^0.47.5",
+    "rollup-plugin-babel": "^2.7.1",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-filesize": "^1.2.1",
+    "rollup-plugin-ignore": "^1.0.3",
+    "rollup-plugin-json": "^2.1.1",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-progress": "^0.2.1",
+    "rollup-plugin-uglify": "^1.0.2",
+    "rollup-watch": "^4.0.0",
+    "shelljs": "^0.7.5",
     "sinon": "^1.16.1",
     "time-grunt": "^1.1.1",
-    "uglify-js": "~2.7.3",
+    "tui-jsdoc-template": "^1.1.0",
+    "uglify-js": "~2.8.8",
+    "unified": "^6.1.5",
     "videojs-doc-generator": "0.0.1",
-    "videojs-standard": "^5.2.0",
-    "webpack": "^1.13.2"
+    "videojs-flash": "^2.0.0",
+    "videojs-standard": "^6.0.1",
+    "webpack": "^1.15.0"
   },
   "vjsstandard": {
     "ignore": [
       "**/Gruntfile.js",
       "**/es5/**",
       "**/build/**",
+      "!build/rollup.js",
       "**/dist/**",
       "**/docs/**",
       "**/lang/**",
@@ -126,9 +172,12 @@
       "**/test/karma.conf.js"
     ]
   },
-  "config": {
-    "ghooks": {
-      "pre-push": "npm run lint -- --errors"
-    }
+  "greenkeeper": {
+    "ignore": [
+      "qunitjs",
+      "sinon",
+      "webpack",
+      "uglify-js"
+    ]
   }
 }

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="../dist/ie8/videojs-ie8.js"></script>
+
+  <!-- Load the source files -->
+  <link href="../build/temp/video-js.css" rel="stylesheet" type="text/css">
+  <script src="../dist/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 = '../node_modules/videojs-flash/node_modules/videojs-swf/dist/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

@@ -5,27 +5,31 @@
   <title>Video.js Text Descriptions, Chapters &amp; Captions Example</title>
 
   <!-- Add ES5 shim and sham for IE8 -->
-  <script src="../build/temp/ie8/videojs-ie8.js"></script>
+  <script src="../dist/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="../dist/video.js"></script>
 
   <!-- Set the location of the flash SWF -->
   <script>
-    videojs.options.flash.swf = '../build/temp/video-js.swf';
+    videojs.options.flash.swf = '../node_modules/videojs-flash/node_modules/videojs-swf/dist/video-js.swf';
   </script>
 
 </head>
 <body>
+
   <!-- NOTE: we have to disable native Text Track support for the HTML5 tech,
              since even HTML5 video players with native Text Track support
              don't currently support 'description' text tracks in any
-             useful way! -->
+             useful way! Currently this means that iOS will not display
+            ANY text tracks -->
   <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">
+      data-setup='{ "html5" : { "nativeTextTracks" : false } }'
+      poster="http://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="../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>
@@ -39,5 +43,6 @@
 
     <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>
+
 </body>
 </html>

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="../dist/ie8/videojs-ie8.js"></script>
+
+  <!-- Load the source files -->
+  <link href="../build/temp/video-js.css" rel="stylesheet" type="text/css">
+  <script src="../dist/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 = '../node_modules/videojs-flash/node_modules/videojs-swf/dist/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

@@ -5,15 +5,16 @@
   <title>Video.js Sandbox</title>
 
   <!-- Add ES5 shim and sham for IE8 -->
-  <script src="../build/temp/ie8/videojs-ie8.js"></script>
+  <script src="../dist/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="../dist/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';
+    videojs.options.flash.swf = '../node_modules/videojs-flash/node_modules/videojs-swf/dist/video-js.swf';
   </script>
 
 </head>
@@ -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>

sandbox/language.html.example

@@ -6,15 +6,15 @@
   <title>VideoJS Languages Demo</title>
 
   <!-- Add ES5 shim and sham for IE8 -->
-  <script src="../build/temp/ie8/videojs-ie8.js"></script>
+  <script src="../dist/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="../dist/video.js"></script>
 
   <!-- Set the location of the flash SWF -->
   <script>
-    videojs.options.flash.swf = '../build/temp/video-js.swf';
+    videojs.options.flash.swf = '../node_modules/videojs-flash/node_modules/videojs-swf/dist/video-js.swf';
   </script>
 
   <!-- Add support for Spanish 'es' -->

sandbox/plugin.html.example

@@ -5,15 +5,15 @@
   <title>Video.js Plugin Example</title>
 
   <!-- Add ES5 shim and sham for IE8 -->
-  <script src="../build/temp/ie8/videojs-ie8.js"></script>
+  <script src="../dist/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="../dist/video.js"></script>
 
   <!-- Set the location of the flash SWF -->
   <script>
-    videojs.options.flash.swf = '../build/temp/video-js.swf';
+    videojs.options.flash.swf = '../node_modules/videojs-flash/node_modules/videojs-swf/dist/video-js.swf';
   </script>
 
 </head>

src/css/_utilities.scss

@@ -16,6 +16,7 @@
 @mixin transition($string: $transition--default) {
   -webkit-transition: $string;
   -moz-transition: $string;
+  -ms-transition: $string;
   -o-transition: $string;
   transition: $string;
 }
@@ -24,7 +25,6 @@
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
-  margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;

src/css/components/_adaptive.scss

@@ -7,7 +7,7 @@
 
   .vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time,
   .vjs-playback-rate, .vjs-progress-control,
-  .vjs-mute-control, .vjs-volume-control, .vjs-volume-menu-button,
+  .vjs-mute-control, .vjs-volume-control,
   .vjs-chapters-button, .vjs-descriptions-button, .vjs-captions-button,
   .vjs-subtitles-button, .vjs-audio-button { display: none; }
 }
@@ -19,7 +19,7 @@
 .video-js.vjs-layout-x-small:not(.vjs-fullscreen) {
   .vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time,
   .vjs-playback-rate,
-  .vjs-mute-control, .vjs-volume-control, .vjs-volume-menu-button,
+  .vjs-mute-control, .vjs-volume-control,
   .vjs-chapters-button, .vjs-descriptions-button, .vjs-captions-button,
   .vjs-subtitles-button, .vjs-audio-button { display: none; }
 }

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;
   }
 }
@@ -36,7 +36,6 @@
 
 .video-js:hover .vjs-big-play-button,
 .video-js .vjs-big-play-button:focus {
-  outline: 0;
   border-color: $primary-foreground-color;
 
   @include background-color-with-alpha($secondary-background-color, $secondary-background-transparency);
@@ -50,3 +49,8 @@
 .vjs-error .vjs-big-play-button {
   display: none;
 }
+
+// Show big play button if video is paused and .vjs-show-big-play-button-on-pause is set on video element
+.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play-button {
+  display: block;
+}

src/css/components/_button.scss

@@ -15,3 +15,8 @@
   -moz-appearance:    none;
   appearance:         none;
 }
+
+.vjs-control .vjs-button {
+  width: 100%;
+  height: 100%;
+}

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

@@ -2,7 +2,6 @@
 // It's used on both real buttons (play button)
 // and div buttons (menu buttons)
 .video-js .vjs-control {
-  outline: none;
   position: relative;
   text-align: center;
   margin: 0;
@@ -11,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

@@ -21,8 +21,6 @@
   // Avoiding helvetica: issue #376
   font-family: $text-font-family;
 
-  @include user-select(none);
-
   // Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
   // checking fullScreenEnabled.
   &:-moz-full-screen { position: absolute; }
@@ -33,6 +31,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,8 +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 .vjs-icon-placeholder {
+  @extend .vjs-icon-replay;
+}

src/css/components/_playback-rate.scss

@@ -1,12 +1,17 @@
 // TODO: I feel like this should be a generic menu. Research later.
+.vjs-playback-rate > .vjs-menu-button,
 .vjs-playback-rate .vjs-playback-rate-value {
-  font-size: 1.5em;
-  line-height: 2;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+}
+
+.vjs-playback-rate .vjs-playback-rate-value {
+  pointer-events: none;
+  font-size: 1.5em;
+  line-height: 2;
   text-align: center;
 }
 

src/css/components/_poster.scss

@@ -36,12 +36,6 @@
   display: block;
 }
 
-// Hide the poster when controls are disabled because it's clickable
-// and the native poster can take over
-.vjs-controls-disabled .vjs-poster {
-  display: none;
-}
-
 // Hide the poster when native controls are used otherwise it covers them
 .vjs-using-native-controls .vjs-poster {
   display: none;

src/css/components/_progress.scss

@@ -1,18 +1,8 @@
+// .vjs-progress-control / ProgressControl
 //
-// Let's talk pixel math!
-// Start with a base font size of 10px (assuming that hasn't changed)
-// No Hover:
-// - Progress holder is 3px
-// - Progress handle is 9px
-// - Progress handle is pulled up 3px to center it.
-//
-// Hover:
-// - Progress holder becomes 5px
-// - Progress handle becomes 15px
-// - Progress handle is pulled up 5px to center it
-//
-
+// 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;
@@ -22,39 +12,45 @@
   display: none;
 }
 
-// Box containing play and load progresses. Also acts as seek scrubber.
+.vjs-no-flex .vjs-progress-control {
+  width: auto;
+}
+
+// .vjs-progress-holder / SeekBar
+//
+// Box containing play and load progress bars. It also acts as seek scrubber.
 .video-js .vjs-progress-holder {
   @include flex(auto);
   @include transition(all 0.2s);
   height: 0.3em;
 }
 
-// We need an increased hit area on hover
+.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 {
   font-size: 1.666666666666666666em;
 }
 
-/* If we let the font size grow as much as everything else, the current time tooltip ends up
- ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled
- to avoid a weird hitch when you roll off the hover. */
-
-// Also show the current time tooltip
-.video-js .vjs-progress-control:hover .vjs-time-tooltip,
-.video-js .vjs-progress-control:hover .vjs-mouse-display:after,
-.video-js .vjs-progress-control:hover .vjs-play-progress:after {
-  font-family: $text-font-family;
-  visibility: visible;
-  font-size: 0.6em;
-}
-
-// Progress Bars
+// .vjs-play-progress / PlayProgressBar and .vjs-load-progress / LoadProgressBar
+//
+// These are bars that appear within the progress control to communicate the
+// amount of media that has played back and the amount of media that has
+// loaded, respectively.
 .video-js .vjs-progress-holder .vjs-play-progress,
 .video-js .vjs-progress-holder .vjs-load-progress,
-.video-js .vjs-progress-holder .vjs-tooltip-progress-bar,
 .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
@@ -64,86 +60,83 @@
   top: 0;
 }
 
-.video-js .vjs-mouse-display {
-  @extend .vjs-icon-circle;
-
-  &:before {
-    display: none;
-  }
-}
 .video-js .vjs-play-progress {
   background-color: $primary-foreground-color;
   @extend .vjs-icon-circle;
 
   // Progress handle
   &:before {
-    position: absolute;
-    top: -0.333333333333333em;
-    right: -0.5em;
     font-size: 0.9em;
+    position: absolute;
+    right: -0.5em;
+    top: -0.333333333333333em;
+    z-index: 1;
   }
 }
 
-// Current Time "tooltip"
-// By default this is hidden and only shown when hovering over the progress control
-.video-js .vjs-time-tooltip,
-.video-js .vjs-mouse-display:after,
-.video-js .vjs-play-progress:after {
-  visibility: hidden;
-  pointer-events: none;
-  position: absolute;
-  top: -3.4em;
-  right: -1.9em;
-  font-size: 0.9em;
-  color: #000;
-  content: attr(data-current-time);
-  padding: 6px 8px 8px 8px;
-  @include background-color-with-alpha(#fff, 0.8);
-  @include border-radius(0.3em);
-}
-
-.video-js .vjs-time-tooltip,
-.video-js .vjs-play-progress:before,
-.video-js .vjs-play-progress:after {
-  z-index: 1;
-}
-
-.video-js .vjs-progress-control .vjs-keep-tooltips-inside:after {
-  display: none;
-}
-
 .video-js .vjs-load-progress {
-  // For IE8 we'll lighten the color
+  // For IE8, we'll lighten the color
   background: lighten($secondary-background-color, 25%);
-  // Otherwise we'll rely on stacked opacities
+  // Otherwise, we'll rely on stacked opacities
   background: rgba($secondary-background-color, $secondary-background-transparency);
 }
 
-// there are child elements of the load progress bar that represent the
-// specific time ranges that have been buffered
+// There are child elements of the load progress bar that represent the
+// specific time ranges that have been buffered.
 .video-js .vjs-load-progress div {
-  // For IE8 we'll lighten the color
+  // For IE8, we'll lighten the color
   background: lighten($secondary-background-color, 50%);
-  // Otherwise we'll rely on stacked opacities
+  // Otherwise, we'll rely on stacked opacities
   background: rgba($secondary-background-color, 0.75);
 }
 
-.video-js.vjs-no-flex .vjs-progress-control {
-  width: auto;
-}
-
+// .vjs-time-tooltip
+//
+// These elements are displayed above the progress bar.
+//
+// By default, they are hidden and only shown when hovering over the progress
+// control.
 .video-js .vjs-time-tooltip {
-  display: inline-block;
-  height: 2.4em;
-  position: relative;
+  @include background-color-with-alpha(#fff, 0.8);
+  @include border-radius(0.3em);
+  color: #000;
+
+  // 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
+  // centered, they must be pulled further to the right via positioning (e.g.
+  // `right: -10px;`. This part is left to JavaScript.
   float: right;
-  right: -1.9em;
-}
+  font-family: $text-font-family;
 
-.vjs-tooltip-progress-bar {
+  // The font-size should translate to a consistent 10px for time tooltips in
+  // all states. This is tricky because the .vjs-progress-holder element
+  // changes its font-size when the .vjs-progress-control is hovered.
+  font-size: 1em;
+  padding: 6px 8px 8px 8px;
+  pointer-events: none;
+  position: relative;
+  top: -3.4em;
   visibility: hidden;
+  z-index: 1;
 }
 
+.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;
+  visibility: visible;
+}
+
+// .vjs-mouse-display / MouseTimeDisplay
+//
+// This element tracks the mouse position along the progress control and
+// includes a tooltip, which displays the time at that point in the media.
 .video-js .vjs-progress-control .vjs-mouse-display {
   display: none;
   position: absolute;
@@ -152,25 +145,27 @@
   background-color: #000;
   z-index: 1;
 }
+
 .vjs-no-flex .vjs-progress-control .vjs-mouse-display {
   z-index: 0;
 }
+
 .video-js .vjs-progress-control:hover .vjs-mouse-display {
   display: block;
 }
-.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display,
-.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display:after {
+
+.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
   visibility: hidden;
   opacity: 0;
   $trans: visibility 1.0s, opacity 1.0s;
   @include transition($trans);
 }
-.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display,
-.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display:after {
+
+.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
   display: none;
 }
-.vjs-mouse-display .vjs-time-tooltip,
-.video-js .vjs-progress-control .vjs-mouse-display:after {
+
+.vjs-mouse-display .vjs-time-tooltip {
   color: #fff;
   @include background-color-with-alpha(#000, 0.8);
 }

src/css/components/_slider.scss

@@ -1,10 +1,11 @@
 .video-js .vjs-slider {
-  outline: 0;
   position: relative;
   cursor: pointer;
   padding: 0;
   margin: 0 0.45em 0 0.45em;
 
+  @include user-select(none);
+
   @include background-color-with-alpha($secondary-background-color, $secondary-background-transparency);
 }
 

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/_time.scss

@@ -18,6 +18,12 @@
   display: none;
 }
 
+// IE 8 + IE 9 width: auto container fix
+.vjs-no-flex .vjs-remaining-time.vjs-time-control.vjs-control {
+  width: 0px !important;
+  white-space: nowrap;
+}
+
 .video-js .vjs-duration,
 .vjs-no-flex .vjs-duration {
   display: none;

src/css/components/_volume.scss

@@ -1,27 +1,131 @@
-.video-js .vjs-mute-control,
-.video-js .vjs-volume-menu-button {
+.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-volume-menu-button.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-volume-menu-button.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-volume-menu-button.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;
+}
+.video-js .vjs-volume-control.vjs-volume-horizontal {
   width: 5em;
-  @include flex(none);
-  @include display-flex(center);
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control {
+  visibility: visible;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin-left: -1px;
+
+}
+.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  & .vjs-volume-bar,
+  & .vjs-volume-level {
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  }
+}
+
+.video-js .vjs-volume-panel {
+  &:hover  .vjs-volume-control,
+  &:active .vjs-volume-control,
+  &:focus  .vjs-volume-control,
+  & .vjs-volume-control:hover  ,
+  & .vjs-volume-control:active ,
+  & .vjs-volume-control:focus  ,
+  & .vjs-mute-control:hover  ~ .vjs-volume-control,
+  & .vjs-mute-control:active ~ .vjs-volume-control,
+  & .vjs-mute-control:focus  ~ .vjs-volume-control,
+  & .vjs-volume-control.vjs-slider-active {
+    &.vjs-volume-horizontal {
+      width: 5em;
+      height: 3em;
+    }
+
+    visibility: visible;
+    opacity: 1;
+    position: relative;
+
+    &.vjs-volume-vertical {
+      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+      & .vjs-volume-bar,
+      & .vjs-volume-level {
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+      }
+    }
+
+    $transition-property: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
+    @include transition($transition-property);
+  }
+
+  &.vjs-volume-panel-horizontal {
+    &:hover,
+    &:focus,
+    &:active,
+    &.vjs-slider-active {
+      width: 9em;
+
+      @include transition(width 0.1s);
+    }
+  }
+
+  @include transition(width 1s);
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
+  height: 8em;
+  width: 3em;
+  left: -3.5em;
+
+  $transition-property: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
+  @include transition($transition-property)
+}
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
+  $transition-property: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
+  @include transition($transition-property)
+}
+
+.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
+  width: 5em;
+  height: 3em;
+
+  visibility: visible;
+  opacity: 1;
+  position: relative;
+
+  @include transition(none);
+}
+
+.video-js.vjs-no-flex .vjs-volume-control.vjs-volume-vertical,
+.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
+  position: absolute;
+  bottom: 3em;
+  left: 0.5em;
+}
+
+.video-js .vjs-volume-panel {
+  @include display-flex;
 }
 
 .video-js .vjs-volume-bar {
@@ -74,6 +178,10 @@
   }
 }
 
+.video-js .vjs-volume-panel.vjs-volume-panel-vertical {
+  width: 4em;
+}
+
 // Assumes volume starts at 1.0.
 .vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
   height: 100%;
@@ -83,53 +191,14 @@
   width: 100%;
 }
 
-// The volume menu button is like menu buttons (captions/subtitles) but works
-// a little differently. It needs to be possible to tab to the volume slider
-// without hitting space bar on the menu button. To do this we're not using
-// display:none to hide the slider menu by default, and instead setting the
-// width and height to zero.
-.vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu {
-  display: block;
-  width: 0;
-  height: 0;
-  border-top-color: transparent;
+.video-js .vjs-volume-vertical {
+  width: 3em;
+  height: 8em;
+  bottom: 8em;
+
+  @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
 }
 
-.vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu {
-  left: 0.5em;
-  height: 8em;
-}
-.vjs-menu-button-popup.vjs-volume-menu-button-horizontal .vjs-menu {
+.video-js .vjs-volume-horizontal .vjs-menu {
   left: -2em;
 }
-
-.vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu-content {
-  height: 0;
-  width: 0;
-
-  // Avoids unnecessary scrollbars in the menu content. Primarily noticed in Chrome on Linux.
-  overflow-x: hidden;
-  overflow-y: hidden;
-}
-
-.vjs-volume-menu-button-vertical:hover .vjs-menu-content,
-.vjs-volume-menu-button-vertical:focus .vjs-menu-content,
-.vjs-volume-menu-button-vertical.vjs-slider-active .vjs-menu-content,
-.vjs-volume-menu-button-vertical .vjs-lock-showing .vjs-menu-content {
-  height: 8em;
-  width: 2.9em;
-}
-
-.vjs-volume-menu-button-horizontal:hover .vjs-menu-content,
-.vjs-volume-menu-button-horizontal:focus .vjs-menu-content,
-.vjs-volume-menu-button-horizontal .vjs-slider-active .vjs-menu-content,
-.vjs-volume-menu-button-horizontal .vjs-lock-showing .vjs-menu-content {
-  height: 2.9em;
-  width: 8em;
-}
-
-.vjs-volume-menu-button.vjs-menu-button-inline .vjs-menu-content {
-  // An inline volume should never have a menu background color.
-  //  This protects it from external changes to background colors.
-  background-color: transparent !important;
-}

src/css/components/menu/_menu-inline.scss

@@ -18,11 +18,6 @@
   // This width is currently specific to the inline volume bar.
   width: 12em;
 }
-// Don't transition when tabbing in reverse to the volume menu
-// because it looks weird
-.video-js .vjs-menu-button-inline.vjs-slider-active {
-  @include transition(none);
-}
 
 .vjs-menu-button-inline .vjs-menu {
   opacity: 0;

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)
@@ -37,7 +48,6 @@
 
 .vjs-menu li.vjs-menu-item:focus,
 .vjs-menu li.vjs-menu-item:hover {
-  outline: 0;
   @include background-color-with-alpha($secondary-background-color, $secondary-background-transparency);
 }
 

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

@@ -11,6 +11,13 @@ import Component from './component.js';
  * @extends Button
  */
 class BigPlayButton extends Button {
+  constructor(player, options) {
+    super(player, options);
+
+    this.mouseused_ = false;
+
+    this.on('mousedown', this.handleMouseDown);
+  }
 
   /**
    * Builds the default DOM `className`.
@@ -34,7 +41,40 @@ class BigPlayButton extends Button {
    * @listens click
    */
   handleClick(event) {
-    this.player_.play();
+    const playPromise = this.player_.play();
+
+    // exit early if clicked via the mouse
+    if (this.mouseused_ && event.clientX && event.clientY) {
+      return;
+    }
+
+    const cb = this.player_.getChild('controlBar');
+    const playToggle = cb && cb.getChild('playToggle');
+
+    if (!playToggle) {
+      this.player_.focus();
+      return;
+    }
+
+    const playFocus = () => playToggle.focus();
+
+    if (playPromise && playPromise.then) {
+      const ignoreRejectedPlayPromise = () => {};
+
+      playPromise.then(playFocus, ignoreRejectedPlayPromise);
+    } else {
+      this.setTimeout(playFocus, 1);
+    }
+  }
+
+  handleKeyPress(event) {
+    this.mouseused_ = false;
+
+    super.handleKeyPress(event);
+  }
+
+  handleMouseDown(event) {
+    this.mouseused_ = true;
   }
 }
 

src/js/button.js

@@ -16,8 +16,9 @@ class Button extends ClickableComponent {
   /**
    * Create the `Button`s DOM element.
    *
-   * @param {string} [tag=button]
-   *        Element's node type. e.g. 'button'
+   * @param {string} [tag="button"]
+   *        The element's node type. This argument is IGNORED: no matter what
+   *        is passed, it will always create a `button` element.
    *
    * @param {Object} [props={}]
    *        An object of properties that should be set on the element.
@@ -28,25 +29,14 @@ class Button extends ClickableComponent {
    * @return {Element}
    *         The element that gets created.
    */
-  createEl(tag = 'button', props = {}, attributes = {}) {
+  createEl(tag, props = {}, attributes = {}) {
+    tag = 'button';
+
     props = assign({
+      innerHTML: '<span aria-hidden="true" class="vjs-icon-placeholder"></span>',
       className: this.buildCSSClass()
     }, props);
 
-    if (tag !== 'button') {
-      log.warn(`Creating a Button with an HTML element of ${tag} is deprecated; use ClickableComponent instead.`);
-
-      // Add properties for clickable element which is not a native HTML button
-      props = assign({
-        tabIndex: 0
-      }, props);
-
-      // Add ARIA attributes for clickable element which is not a native HTML button
-      attributes = assign({
-        role: 'button'
-      }, attributes);
-    }
-
     // Add attributes for button element
     attributes = assign({
 
@@ -92,9 +82,6 @@ class Button extends ClickableComponent {
   /**
    * Enable the `Button` element so that it can be activated or clicked. Use this with
    * {@link Button#disable}.
-   *
-   * @return {Component}
-   *         Returns itself; method is chainable.
    */
   enable() {
     super.enable();
@@ -104,9 +91,6 @@ class Button extends ClickableComponent {
   /**
    * Enable the `Button` element so that it cannot be activated or clicked. Use this with
    * {@link Button#enable}.
-   *
-   * @return {Component}
-   *         Returns itself; method is chainable.
    */
   disable() {
     super.disable();