web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-11-28 08:58:46 +02:00
Code Releases Activity

docs(fixup): fixup docs (#5489)

Browse Source
This commit is contained in:
Gary Katsevman 2018-10-10 11:09:53 -04:00 committed by GitHub
parent 29c8259b7a
commit 794cd71682
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 148 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
COLLABORATOR_GUIDE.md
View File

@ -15,10 +15,16 @@
* [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)
* [Deciding what type of version release](#deciding-what-type-of-version-release)
* [Doing a release](#doing-a-release)
* [Video.js 6](#videojs-6)
* [Video.js 5](#videojs-5)
* [Edit git-semver-tags](#edit-git-semver-tags)
* [And now for the release](#and-now-for-the-release)
* [Deploy as a patch to the CDN](#deploy-as-a-patch-to-the-cdn)
* [Announcement](#announcement)
* [Doc credit](#doc-credit)
## Issues and Pull Requests
@ -35,18 +41,17 @@ If issues or PRs are very short and don't contain much information, ask for more
There are labels that are useful to include on issues and PRs. A few of them are defined below:
| Label | Issue or PR | Description |
|-------|-------------|-------------|
| confirmed | Issue and PR | Issue: marks as reproducible. PR: marks as ready to be merged|
| 5.x | PR | Marks as a change to the 5.x branch only |
| bug | Issue | Marks as a confirmed bug |
| good first issue | Issue | Marks as a good bug or enhancement for first time contributors to Video.js |
| first-timers-only | Issue | Marks as a good bug or enhancement to be done by a newcomer to open source |
| minor, patch, major | PR | Marks PR with the expected semver classification of the change |
| needs: LGTM | PR | Marks PR to be reviewed by a collaborator |
| needs: more info | Issue | Marks as needing more information from the issue reporter |
| needs: reduced test case | Issue | Marks as needing a reduced test case from the issue reporter |
| Label | Issue or PR | Description |
| ------------------------ | ------------ | -------------------------------------------------------------------------- |
| confirmed | Issue and PR | Issue: marks as reproducible. PR: marks as ready to be merged |
| 5.x | PR | Marks as a change to the 5.x branch only |
| bug | Issue | Marks as a confirmed bug |
| good first issue | Issue | Marks as a good bug or enhancement for first time contributors to Video.js |
| first-timers-only | Issue | Marks as a good bug or enhancement to be done by a newcomer to open source |
| minor, patch, major | PR | Marks PR with the expected semver classification of the change |
| needs: LGTM | PR | Marks PR to be reviewed by a collaborator |
| needs: more info | Issue | Marks as needing more information from the issue reporter |
| needs: reduced test case | Issue | Marks as needing a reduced test case from the issue reporter |
## Accepting changes
@ -382,12 +387,14 @@ 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.
> _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.
@ -398,6 +405,7 @@ Then, we have a script that automates most of the steps for publishing. It's a l
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';
```
@ -432,7 +440,7 @@ and then pasted into the correct [GitHub release](https://github.com/videojs/vid
### Deploy as a patch to the CDN
Follow the steps on the [CDN repo][] for the CDN release process.
Follow the steps on the [CDN repo][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.
@ -461,6 +469,6 @@ This collaborator guide was heavily inspired by [node.js's guide](https://github
[slack]: http://slack.videojs.com
[CDN repo]: https://github.com/videojs/cdn
[cdn repo]: https://github.com/videojs/cdn
[raw chg]: https://raw.githubusercontent.com/videojs/video.js/5.x/CHANGELOG.md

20
CONTRIBUTING.md
View File

@ -79,16 +79,16 @@ A good bug report should be as detailed as possible, so that others won't have t
There are a few labels that might be added to your issue or PR by a maintainer. Here's a quick rundown of what they mean:
| Label | Issue or PR | Description |
|-------|-------------|-------------|
| confirmed | Issue and PR | Issue: marks as reproducible by a maintainer. PR: marked by a maintainer as ready to be merged|
| 5.x | PR | Marks as a change to the 5.x branch only |
| bug | Issue | Marks as a confirmed bug by a maintainer |
| good first issue | Issue | Marked as a good bug or enhancement for first time contributors to Video.js |
| first-timers-only | Issue | Marked as a good bug or enhancement to be done by a newcomer to open source |
| minor, patch, major | PR | Marks PR with the expected [semver](https://semver.org/) classification of the change |
| needs: more info | Issue | Marked by a maintainer as needing more information from the issue reporter. Please update your issue with more information to help us reproduce the bug. |
| needs: reduced test case | Issue | Marked by a maintainer as needing a reduced test case from the issue reporter. Please create a test page that we can inspect to help us indentify a bug. |
| Label | Issue or PR | Description |
| ------------------------ | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| confirmed | Issue and PR | Issue: marks as reproducible by a maintainer. PR: marked by a maintainer as ready to be merged |
| 5.x | PR | Marks as a change to the 5.x branch only |
| bug | Issue | Marks as a confirmed bug by a maintainer |
| good first issue | Issue | Marked as a good bug or enhancement for first time contributors to Video.js |
| first-timers-only | Issue | Marked as a good bug or enhancement to be done by a newcomer to open source |
| minor, patch, major | PR | Marks PR with the expected [semver](https://semver.org/) classification of the change |
| needs: more info | Issue | Marked by a maintainer as needing more information from the issue reporter. Please update your issue with more information to help us reproduce the bug. |
| needs: reduced test case | Issue | Marked by a maintainer as needing a reduced test case from the issue reporter. Please create a test page that we can inspect to help us indentify a bug. |
## Contributing code

7
README.md
View File

@ -26,14 +26,17 @@ Thanks to the awesome folks over at [Fastly][fastly], there's a free, CDN hosted
<link href="//vjs.zencdn.net/7.0/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.0/video.min.js"></script>
```
> For the latest version of video.js and URLs to use, 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.
>
> In the `vjs.zencdn.net` CDN-hosted versions of Video.js we include a [stripped down Google Analytics pixel](https://github.com/videojs/cdn/blob/master/src/analytics.js) that tracks a random sampling (currently 1%) of players loaded from the CDN. This allows us to see (roughly) what browsers are in use in the wild, along with other useful metrics such as OS and device. If you'd like to disable analytics, you can simply include the following global before including Video.js via the free CDN:
>
> ```html
> <script>window.HELP_IMPROVE_VIDEOJS = false;</script>
> ```
> Alternatively, you can include Video.js by getting it from [npm](http://videojs.com/getting-started/#download-npm), downloading from [GitHub releases](https://github.com/videojs/video.js/releases) or by including it via [unpkg](https://unpkg.com) or another JavaScript CDN like CDNjs. These releases *do not* include Google Analytics tracking at all.
>
> Alternatively, you can include Video.js by getting it from [npm](http://videojs.com/getting-started/#download-npm), downloading from [GitHub releases](https://github.com/videojs/video.js/releases) or by including it via [unpkg](https://unpkg.com) or another JavaScript CDN like CDNjs. These releases _do not_ include Google Analytics tracking at all.
>
> ```html
> <!-- unpkg -->
> <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">

9
docs/guides/embeds.md
View File

@ -10,7 +10,9 @@ However, this is kind of weird to have a `<video>` element embed with a `<div>`
Below, the three kinds of embeds are detailed.
## Embeds
### `<video>` embed
The classic Video.js embed. You can then initialize it via `data-setup` or via the `videojs` method.
```html
@ -24,11 +26,13 @@ The classic Video.js embed. You can then initialize it via `data-setup` or via t
<source src="//vjs.zencdn.net/v/oceans.mp4">
</video>
```
```js
const player = videojs('vid1', {});
```
### Player div ingest
The enhanced classic embed. You can also initialize it via `data-setup` or via the `videojs` method.
```html
@ -46,6 +50,7 @@ The enhanced classic embed. You can also initialize it via `data-setup` or via t
</video>
</div>
```
```js
const player = videojs('vid1', {});
```
@ -53,6 +58,7 @@ const player = videojs('vid1', {});
As you can see, it isn't much different from the classic `<video>` embed. It also does make it easier to work with [React](/docs/guides/react.md).
### `<video-js>` embed
This is the [I Can't Believe It's Not Custom Elements](https://developers.google.com/web/fundamentals/web-components/customelements) embed code.
It looks very much like the `<video>` embed but instead of `video` it's a `video-js` embed.
This is useful for all the things that the player div ingest is useful for and it matches our library name!
@ -68,6 +74,7 @@ This is useful for all the things that the player div ingest is useful for and i
<source src="//vjs.zencdn.net/v/oceans.mp4">
</video-js>
```
```js
const player = videojs('vid1', {});
```
@ -75,8 +82,10 @@ const player = videojs('vid1', {});
Adding `class="video-js"` with this embed is no longer necessary as it will automatically add the class `video-js` if missing.
#### Custom Elements
Native Custom Elements support is relatively small according to [Can I Use](https://caniuse.com/#feat=custom-elementsv1) and because we didn't want to include a polyfill we're going with just an element called `video-js` rather than a full blown custom element.
## data-setup
This is an ease-of-use method for having Video.js set up the player automatically. It is an HTML attribute and it takes a JSON string representation of the [player options](/docs/guides/options.md) as the value.
Using the programmatic approach is probably preferable.

21
docs/guides/faq.md
View File

@ -11,18 +11,19 @@
* [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 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 do I autoplay a video?](#q-how-do-i-autoplay-a-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: How do I add a button to Video.js?](#q-how-do-i-add-a-button-to-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)
@ -31,10 +32,10 @@
* [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 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: Can Video.js play YouTube videos?](#q-can-videojs-play-youtube-videos)
* [Q: Can Video.js play Vimeo videos?](#q-can-videojs-play-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)
@ -67,7 +68,7 @@ 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
longer officially supported. Please see <https://github.com/videojs/video.js/issues/4012>
for more information.
## Q: What do Video.js version numbers mean?
@ -136,7 +137,6 @@ When an array of sources is available, Video.js test each source in the order gi
## Q: How do I autoplay a video?
Due to recent changes in autoplay behavior we no longer recommend using the `autoplay` attribute
on the `video` element. It's still supported by Video.js but, many browsers, including Chrome, are changing their
`autoplay` attribute behavior.
@ -144,7 +144,7 @@ on the `video` element. It's still supported by Video.js but, many browsers, inc
Instead we recommend using the `autoplay` option rather than the `autoplay` attribute, for more information on using that.
see the [autoplay option][autoplay-option] in the Video.js options guide.
For more information on the autoplay changes see our blog post: https://blog.videojs.com/autoplay-best-practices-with-video-js/
For more information on the autoplay changes see our blog post: <https://blog.videojs.com/autoplay-best-practices-with-video-js/>
### Q: How can I autoplay a video on a mobile device?
@ -201,6 +201,7 @@ a plugin existed and was published users could include it on their page to share
See the [plugin guide][plugin-guide] for information on making a plugin for Video.js.
## 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?
@ -337,7 +338,9 @@ Yes! See [ReactJS integration example][react-guide].
[starter-example]: https://jsbin.com/axedog/edit?html,output
[techorder]: [cors]: /docs/guides/options.md#techorder
[techorder]: /docs/guides/options.md#techorder
[cors]: /docs/guides/options.md#techorder
[text-tracks]: /docs/guides/text-tracks.md

8
docs/guides/hooks.md
View File

@ -6,11 +6,18 @@ Hooks exist so that users can globally hook into certain Video.js lifecycle mome
* [Current Hooks](#current-hooks)
* [beforesetup](#beforesetup)
* [Example](#example)
* [setup](#setup)
* [Example](#example-1)
* [Usage](#usage)
* [Adding](#adding)
* [Example](#example-2)
* [Adding Once](#adding-once)
* [Example](#example-3)
* [Getting](#getting)
* [Example](#example-4)
* [Removing](#removing)
* [Example](#example-5)
## Current Hooks
@ -145,7 +152,6 @@ To access the array of functions that currently exists for any hook, use the `vi
#### Example
```js
// Get an array of all the 'beforesetup' hooks.
var beforeSetupHooks = videojs.hooks('beforesetup');

5
docs/guides/languages.md
View File

@ -13,10 +13,9 @@ Some translations may be less complete than others - see the [translations neede
* [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)
* [Per-Player Translations](#per-player-translations)
* [Setting Player Language](#setting-player-language)
* [Determining Player Language](#determining-player-language)
* [Internal Language Selection](#internal-language-selection)
* [References](#references)

11
docs/guides/layout.md
View File

@ -10,11 +10,11 @@ Enabling fluid mode will disable fill mode. If both are enabled, fluid mode take
You can enable fluid in a few ways:
- Add `vjs-fluid`, `vjs-16-9`, or `vjs-4-3` as a class to the player element.
- pass `fluid` option to the player.
- call `player.fluid(true)`.
- pass `aspectRatio` option to the player.
- call `player.aspectRatio('16:9')`.
* Add `vjs-fluid`, `vjs-16-9`, or `vjs-4-3` as a class to the player element.
* pass `fluid` option to the player.
* call `player.fluid(true)`.
* pass `aspectRatio` option to the player.
* call `player.aspectRatio('16:9')`.
### Classes
@ -58,7 +58,6 @@ var player = videojs('vid2');
player.aspectRatio('1:1');
```
### Disabling fluid mode
You can disable fluid mode by remove the associated classes or by calling passing in `false` to the method.

70
docs/guides/middleware.md
View File

@ -6,7 +6,7 @@ Middleware is a Video.js feature that allows interaction with and modification o
* [Understanding Middleware](#understanding-middleware)
* [setSource](#setsource)
* [setTech](#setTech)
* [setTech](#settech)
* [Middleware Setters](#middleware-setters)
* [Middleware Getters](#middleware-getters)
* [Middleware Mediators](#middleware-mediators)
@ -21,7 +21,8 @@ Middleware are functions that return an object, a class instance, a prototype, e
There are a few special methods that affect middleware: `setSource` and `setTech`. These are called internally by Video.js when you call `player.src()`.
### setSource
> *NOTE*: In versions of Video.js 7.0.5 and older, `setSource` was required for all middleware and had be included in the returned objects.
> _NOTE_: In versions of Video.js 7.0.5 and older, `setSource` was required for all middleware and had be included in the returned objects.
This method will setup the routing between a specific source and middleware and eventually sets the source on the `Tech`.
@ -29,7 +30,7 @@ If your middleware is not manipulating, redirecting or rejecting the source, you
In versions 7.0.5 and older, to get your middleware selected, you can pass along the source by doing the following:
```javascript
```js
videojs.use('*', function(player) {
return {
setSource: function(srcObj, next) {
@ -46,15 +47,13 @@ videojs.use('*', function(player) {
### Middleware Setters
```
+----------+ +----------+
| | setter middleware | |
| +----------------------> |
| Player | | Tech |
| <----------------------+ |
| | getter middleware | |
+----------+ +----------+
```
+----------+ +----------+
| | setter middleware | |
| +----------------------> |
| Player | | Tech |
| <----------------------+ |
| | getter middleware | |
+----------+ +----------+
Setters will be called on the `Player` first and run through middleware in the order they were registered in (from left to right in the diagram) before calling the method, with its arguments, on the `Tech`.
@ -68,34 +67,29 @@ Mediators are methods that not only change the state of the `Tech`, but also ret
Mediators are called on the `Player` first, run through middleware in the order they were registered (from left to right in the below diagram), then called on the `Tech`. The result is returned to the `Player` unchanged, while calling the middleware in the reverse order of how they were registered (from right to left in the diagram.) For more information on mediators, check out the [mediator section](#termination-and-mediators).
```
+----------+ +----------+
| | | |
| +---mediate-to-tech----> |
| Player | | Tech |
| <--mediate-to-player---+ |
| | | |
+----------+ +----------+
```
+----------+ +----------+
| | | |
| +---mediate-to-tech----> |
| Player | | Tech |
| <--mediate-to-player---+ |
| | | |
+----------+ +----------+
### Termination and Mediators
Mediators make a round trip: starting at the `Player`, mediating to the `Tech` and returning the result to the `Player` again. A `call{method}` method must be supplied by the middleware which is used when mediating to the `Tech`. On the way back to the `Player`, the `{method}` will be called instead, with 2 arguments: `terminated`, a Boolean indicating whether a middleware terminated during the mediation to the tech portion, and `value`, which is the value returned from the `Tech`.
```
+----------+ +----------+
| | | |
| +----+call{method}+----> |
| Player | | Tech |
| <------+{method}+------+ |
| | | |
+----------+ +----------+
```
+----------+ +----------+
| | | |
| +----+call{method}+----> |
| Player | | Tech |
| <------+{method}+------+ |
| | | |
+----------+ +----------+
A skeleton of a middleware with Mediator methods is given below:
```
```js
var myMiddleware = function(player) {
return {
callPlay: function() {
@ -117,19 +111,19 @@ Middleware termination occurs when a middleware method decides to stop mediating
Middleware are registered to a video MIME type, and will be run for any source with that type.
```javascript
```js
videojs.use('video/mp4', myMiddleware);
```
You can also register a middleware on all sources by registering it on `*`.
```javascript
```js
videojs.use('*', myMiddleware);
```
Your middleware should be a function that is scoped to a player and returns an object, class instance, etc, with methods on it that match those on the `Tech`. An example of a middleware that returns an object is below:
```javascript
```js
var myMiddleware = function(player) {
return {
setSource: function(srcObj, next) {
@ -150,7 +144,7 @@ videojs.use('*', myMiddleware);
And the same example with `setSource` omitted:
```javascript
```js
var myMiddleware = function(player) {
return {
currentTime: function(ct) {
@ -169,7 +163,7 @@ This middleware gives the appearance of the video source playing at double its s
An example of a middleware that uses Mediator methods is below:
```javascript
```js
var myMiddleware = function(player) {
return {
setSource: function(srcObj, next) {
@ -206,7 +200,7 @@ This middleware allows the call to `play()` to go through to the `Tech`, and che
Mediator methods can terminate, by doing the following:
```javascript
```js
var myMiddleware = function(player) {
return {
setSource: function(srcObj, next) {

8
docs/guides/options.md
View File

@ -6,6 +6,7 @@
* [Standard &lt;video> Element Options](#standard-video-element-options)
* [autoplay](#autoplay)
* [More info on autoplay support and changes:](#more-info-on-autoplay-support-and-changes)
* [controls](#controls)
* [height](#height)
* [loop](#loop)
@ -29,9 +30,8 @@
* [notSupportedMessage](#notsupportedmessage)
* [playbackRates](#playbackrates)
* [plugins](#plugins)
* [sourceOrder](#sourceorder)
* [sources](#sources)
* [techCanOverridePoster](#techCanOverridePoster)
* [techCanOverridePoster](#techcanoverrideposter)
* [techOrder](#techorder)
* [vtt.js](#vttjs)
* [Component Options](#component-options)
@ -80,7 +80,8 @@ player.autoplay('muted');
```
#### More info on autoplay support and changes:
* See our blog post: https://blog.videojs.com/autoplay-best-practices-with-video-js/
* See our blog post: <https://blog.videojs.com/autoplay-best-practices-with-video-js/>
### `controls`
@ -162,7 +163,6 @@ Prevents the player from running the autoSetup for media elements with `data-set
> **Note**: this must be set globally with `videojs.options.autoSetup = false` in the same tick as videojs source is loaded to take effect.
### `children`
> Type: `Array|Object`

14
docs/guides/plugins.md
View File

@ -172,9 +172,9 @@ By offering a built-in events system, advanced plugins offer a wider range of op
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.
* `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
@ -332,10 +332,10 @@ Occasionally, a use-case arises where some code needs to wait for a plugin to be
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.
* `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.

1
docs/guides/react.md
View File

@ -57,7 +57,6 @@ 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

4
docs/guides/setup.md
View File

@ -6,6 +6,10 @@
* [Creating a Player](#creating-a-player)
* [Automatic Setup](#automatic-setup)
* [Manual Setup](#manual-setup)
* [Getting References to Players](#getting-references-to-players)
* [Using videojs](#using-videojs)
* [Using videojs.getPlayer()](#using-videojsgetplayer)
* [Using videojs.getPlayers() or videojs.players](#using-videojsgetplayers-or-videojsplayers)
* [Options](#options)
* [Global Defaults](#global-defaults)
* [A Note on &lt;video> Tag Attributes](#a-note-on-video-tag-attributes)

10
docs/guides/tech.md
View File

@ -62,15 +62,14 @@ videojs("videoID", {
By default, techs will have to handle their own posters and are somewhat locked out of the player's poster lifecycle.
However, when the player is initialized with the `techCanOverridePoster` option
it will be possible for techs to integrate into that lifecycle and the player's `PosterImage` component to be used.
Techs can check if they have this capability by checking the `canOverridePoster` boolean in their options.
**`techCanOverridePoster` requirements**
- `poster()` which returns the tech's current poster url
- `setPoster()` which updates the tech's poster url and triggers a `posterchange` event
which the player will handle
* `poster()` which returns the tech's current poster url
* `setPoster()` which updates the tech's poster url and triggers a `posterchange` event
which the player will handle
## Technology Ordering
@ -87,6 +86,7 @@ For example, given the following video element, assuming the [videojs-flash][fla
```
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.

3
docs/guides/text-tracks.md
View File

@ -225,8 +225,9 @@ As mentioned [above](#a-note-on-remote-text-tracks), remote text tracks represen
* `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.
**Note**: If you need a callback, instead of a callback you could use the technique below:
```js
const trackEl = player.addRemoteTextTrack({src: 'en.vtt'}, false);
trackEl.addEventListener('load', function() {

2
docs/guides/videojs.md
View File

@ -11,7 +11,7 @@
* [extend()](#extend)
* [mergeOptions()](#mergeoptions)
* [bind()](#bind)
* [registerPlugin()](#plugin)
* [registerPlugin()](#registerplugin)
* [xhr()](#xhr)
## `videojs()`

24
docs/guides/webpack.md
View File

@ -3,15 +3,21 @@
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`
```sh
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:
```
```js
{
loader: 'url-loader?limit=100000',
test: /\.(png|woff|woff2|eot|ttf|svg)$/
@ -19,14 +25,22 @@ With both packages installed, simply add the following to you webpack.config fil
```
## Using Webpack with videojs-contrib-hls
Import the HLS library with a line such as:
`import * as HLS from 'videojs-contrib-hls';`
```sh
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`
```sh
npm install --save-dev webworkify-webpack-dropin
```
To utilize this in your page, simply create an alias in your webpack.config.js file with:
```
```js
resolve: {
alias: {
webworkify: 'webworkify-webpack-dropin'