mirror of
https://github.com/videojs/video.js.git
synced 2024-11-28 08:58:46 +02:00
docs(fixup): fixup docs (#5489)
This commit is contained in:
Gary Katsevman
GitHub
parent
29c8259b7a
commit
794cd71682
@ -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
|
||||
@ -36,7 +42,7 @@ 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 |
|
||||
@ -47,7 +53,6 @@ There are labels that are useful to include on issues and PRs. A few of them are
|
||||
| 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
|
||||
|
||||
Any code change in video.js should be happening through Pull Requests on GitHub. This includes core committers.
|
||||
@ -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
|
||||
|
||||
@ -80,7 +80,7 @@ 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 |
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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');
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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,7 +47,6 @@ videojs.use('*', function(player) {
|
||||
|
||||
### Middleware Setters
|
||||
|
||||
```
|
||||
+----------+ +----------+
|
||||
| | setter middleware | |
|
||||
| +----------------------> |
|
||||
@ -54,7 +54,6 @@ videojs.use('*', function(player) {
|
||||
| <----------------------+ |
|
||||
| | 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,7 +67,6 @@ 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----> |
|
||||
@ -76,13 +74,11 @@ Mediators are called on the `Player` first, run through middleware in the order
|
||||
| <--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}+----> |
|
||||
@ -91,11 +87,9 @@ Mediators make a round trip: starting at the `Player`, mediating to the `Tech` a
|
||||
| | | |
|
||||
+----------+ +----------+
|
||||
|
||||
```
|
||||
|
||||
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) {
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
|
||||
* [Standard <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`
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 <video> Tag Attributes](#a-note-on-video-tag-attributes)
|
||||
|
||||
@ -67,11 +67,10 @@ Techs can check if they have this capability by checking the `canOverridePoster`
|
||||
|
||||
**`techCanOverridePoster` requirements**
|
||||
|
||||
- `poster()` which returns the tech's current poster url
|
||||
- `setPoster()` which updates the tech's poster url and triggers a `posterchange` event
|
||||
* `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
|
||||
|
||||
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.
|
||||
@ -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.
|
||||
|
||||
@ -227,6 +227,7 @@ As mentioned [above](#a-note-on-remote-text-tracks), remote text tracks represen
|
||||
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() {
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
* [extend()](#extend)
|
||||
* [mergeOptions()](#mergeoptions)
|
||||
* [bind()](#bind)
|
||||
* [registerPlugin()](#plugin)
|
||||
* [registerPlugin()](#registerplugin)
|
||||
* [xhr()](#xhr)
|
||||
|
||||
## `videojs()`
|
||||
|
||||
@ -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'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user