mirror of
https://github.com/videojs/video.js.git
synced 2025-03-25 22:01:11 +02:00
docs: remove grunt and update usage of build scripts (#5656)
This commit is contained in:
Gary Katsevman
GitHub
parent
b7aafdc718
commit
62f9e78cf2
@ -19,8 +19,8 @@
|
||||
* [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)
|
||||
* [Current Video.js](#current-videojs)
|
||||
* [Legacy Video.js (5)](#legacy-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)
|
||||
@ -332,7 +332,7 @@ git clone git@github.com:videojs/video.js.git videojs-6-release
|
||||
git clone git@github.com:videojs/video.js.git videojs-5-release
|
||||
```
|
||||
|
||||
#### Video.js 6
|
||||
#### Current Video.js
|
||||
|
||||
Make sure go to the master branch and grab the latest updates.
|
||||
|
||||
@ -378,7 +378,7 @@ you can run it manually:
|
||||
VJS_GITHUB_USER=gkatsev VJS_GITHUB_TOKEN=123 node build/gh-release.js --prelease
|
||||
```
|
||||
|
||||
#### Video.js 5
|
||||
#### Legacy Video.js (5)
|
||||
|
||||
Make sure to go to the 5.x branch and grab the latest updates.
|
||||
|
||||
|
||||
@ -97,19 +97,6 @@ To contibute code you'll need to be able to build a copy of Video.js and run tes
|
||||
* 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:
|
||||
|
||||
```sh
|
||||
npm run grunt
|
||||
```
|
||||
|
||||
```sh
|
||||
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`.
|
||||
|
||||
### Building video.js locally
|
||||
|
||||
#### Forking and cloning the repository
|
||||
@ -199,17 +186,11 @@ This ties in nicely with the sandbox directory. You can always open the `sandbox
|
||||
> Flash files (`.swf`) that are local and loaded into a locally accessed page (file:///) will NOT run.
|
||||
> To get around this you must use a local web server.
|
||||
|
||||
To run the local webserver, you can run it in a couple of ways.
|
||||
|
||||
```sh
|
||||
grunt connect
|
||||
open http://localhost:9999/sandbox/index.html
|
||||
```
|
||||
|
||||
or
|
||||
To run the local webserver:
|
||||
|
||||
```sh
|
||||
npm start
|
||||
open http://localhost:9999/sandbox/index.html
|
||||
```
|
||||
|
||||
The latter does some extra work which will be described in the next section.
|
||||
|
||||
@ -16,6 +16,7 @@ The architecture of the Video.js player is centered around components. The `Play
|
||||
* [Using trigger](#using-trigger)
|
||||
* [Default Component Tree](#default-component-tree)
|
||||
* [Specific Component Details](#specific-component-details)
|
||||
* [Play Toggle](#play-toggle)
|
||||
* [Volume Panel](#volume-panel)
|
||||
* [Text Track Settings](#text-track-settings)
|
||||
* [Resize Manager](#resize-manager)
|
||||
|
||||
@ -60,9 +60,9 @@ Each file's name should be the [standard language code][lang-codes] that is most
|
||||
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 language compiles by running the language specific build `npm run build:lang` or the full build `npm run build`.
|
||||
1. Verify the translation appears properly in the player UI.
|
||||
1. Run `grunt check-translations` to update the [missing translation document](/docs/translations-needed.md).
|
||||
1. Run `npm run docs:lang` to update the [missing translation document](/docs/translations-needed.md).
|
||||
1. Commit and open a pull request on GitHub.
|
||||
|
||||
### Writing a New Translation
|
||||
|
||||
@ -114,15 +114,15 @@ Responsive mode is independent of fluid mode or fill mode - it only deals with t
|
||||
|
||||
A player in responsive mode will add and remove classes based on its size breakpoints. The default breakpoints, classes, and sizes are outlined below:
|
||||
|
||||
Name | Class | Min. Width | Max. Width
|
||||
---------|----------------------|------------|-----------
|
||||
`tiny` | `vjs-layout-tiny` | 0 | 210
|
||||
`xsmall` | `vjs-layout-x-small` | 211 | 320
|
||||
`small` | `vjs-layout-small` | 321 | 425
|
||||
`medium` | `vjs-layout-medium` | 426 | 768
|
||||
`large` | `vjs-layout-large` | 769 | 1440
|
||||
`xlarge` | `vjs-layout-x-large` | 1441 | 2560
|
||||
`huge` | `vjs-layout-huge` | 2561 | Infinity
|
||||
| Name | Class | Min. Width | Max. Width |
|
||||
| -------- | -------------------- | ---------- | ---------- |
|
||||
| `tiny` | `vjs-layout-tiny` | 0 | 210 |
|
||||
| `xsmall` | `vjs-layout-x-small` | 211 | 320 |
|
||||
| `small` | `vjs-layout-small` | 321 | 425 |
|
||||
| `medium` | `vjs-layout-medium` | 426 | 768 |
|
||||
| `large` | `vjs-layout-large` | 769 | 1440 |
|
||||
| `xlarge` | `vjs-layout-x-large` | 1441 | 2560 |
|
||||
| `huge` | `vjs-layout-huge` | 2561 | Infinity |
|
||||
|
||||
### Enabling Responsive Mode
|
||||
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
* [Video.js-specific Options](#videojs-specific-options)
|
||||
* [aspectRatio](#aspectratio)
|
||||
* [autoSetup](#autosetup)
|
||||
* [breakpoints](#breakpoints)
|
||||
* [children](#children)
|
||||
* [fluid](#fluid)
|
||||
* [inactivityTimeout](#inactivitytimeout)
|
||||
@ -30,6 +31,7 @@
|
||||
* [notSupportedMessage](#notsupportedmessage)
|
||||
* [playbackRates](#playbackrates)
|
||||
* [plugins](#plugins)
|
||||
* [responsive](#responsive)
|
||||
* [sources](#sources)
|
||||
* [techCanOverridePoster](#techcanoverrideposter)
|
||||
* [techOrder](#techorder)
|
||||
@ -171,15 +173,15 @@ When used with the [`responsive` option](#responsive), sets breakpoints that wil
|
||||
|
||||
By default, the breakpoints are:
|
||||
|
||||
Class Name | Width Range
|
||||
---------------------|------------
|
||||
`vjs-layout-tiny` | 0-210
|
||||
`vjs-layout-x-small` | 211-320
|
||||
`vjs-layout-small` | 321-425
|
||||
`vjs-layout-medium` | 426-768
|
||||
`vjs-layout-large` | 769-1440
|
||||
`vjs-layout-x-large` | 1441-2560
|
||||
`vjs-layout-huge` | 2561+
|
||||
| Class Name | Width Range |
|
||||
| -------------------- | ----------- |
|
||||
| `vjs-layout-tiny` | 0-210 |
|
||||
| `vjs-layout-x-small` | 211-320 |
|
||||
| `vjs-layout-small` | 321-425 |
|
||||
| `vjs-layout-medium` | 426-768 |
|
||||
| `vjs-layout-large` | 769-1440 |
|
||||
| `vjs-layout-x-large` | 1441-2560 |
|
||||
| `vjs-layout-huge` | 2561+ |
|
||||
|
||||
While the class names cannot be changed, the width ranges can be configured via an object like this:
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ Text tracks are a feature of HTML5 for displaying time-triggered text to the end
|
||||
* [Text Track Precedence](#text-track-precedence)
|
||||
* [API](#api)
|
||||
* [Remote Text Tracks](#remote-text-tracks)
|
||||
* [Text Tracks](#text-tracks-1)
|
||||
* [Text Tracks](#text-tracks)
|
||||
|
||||
## A Note on "Remote" Text Tracks
|
||||
|
||||
@ -221,7 +221,9 @@ For more complete information, refer to the [Video.js API docs](https://docs.vid
|
||||
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)`
|
||||
|
||||
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.
|
||||
@ -242,6 +244,7 @@ As mentioned [above](#a-note-on-remote-text-tracks), remote text tracks represen
|
||||
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]])`
|
||||
|
||||
> **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_.
|
||||
@ -249,4 +252,5 @@ It is generally recommended that you use _remote_ text tracks rather than these
|
||||
> The standard `addTextTrack` does **not** have a corresponding `removeTextTrack` method; so, we actually discourage the use of this method!
|
||||
|
||||
* `TextTrackList()`
|
||||
|
||||
* `TextTrack()`
|
||||
|
||||
@ -13,6 +13,7 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
## Status of translations
|
||||
|
||||
<!-- START langtable -->
|
||||
|
||||
| Language file | Missing translations |
|
||||
| ----------------------- | ----------------------------------------------------------------------------------- |
|
||||
| ar.json (missing 51) | Audio Player |
|
||||
@ -1174,4 +1175,5 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | {1} is loading. |
|
||||
| zh-TW.json (missing 2) | progress bar timing: currentTime={1} duration={2} |
|
||||
| | {1} is loading. |
|
||||
|
||||
<!-- END langtable -->
|
||||
|
||||
@ -15,10 +15,13 @@
|
||||
<li><a href="sandbox/icons.html">Icons Demo</a></li>
|
||||
<li><a href="sandbox/focus-visible.html">Focus Visible Demo</a></li>
|
||||
<li><a href="sandbox/flash.html">Flash Demo</a></li>
|
||||
<li><a href="sandbox/fake-live.html">Fake Live Demo</a></li>
|
||||
<li><a href="sandbox/embeds.html">Embeds Demo</a></li>
|
||||
<li><a href="sandbox/descriptions.html">Descriptions Demo</a></li>
|
||||
<li><a href="sandbox/combined-tracks.html">Combined Tracks Demo</a></li>
|
||||
<li><a href="sandbox/live.html">Live Demo</a></li>
|
||||
<li><a href="sandbox/liveui.html">LiveUI Demo</a></li>
|
||||
<li><a href="sandbox/vertical-volume.html">Vertical Volume Demo</a></li>
|
||||
<li><a href="sandbox/language.html">Laungage Demo</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Simple Demo (in an iframe)</h2>
|
||||
|
||||
@ -157,7 +157,6 @@
|
||||
},
|
||||
"vjsstandard": {
|
||||
"ignore": [
|
||||
"**/Gruntfile.js",
|
||||
"**/es5/**",
|
||||
"**/build/**",
|
||||
"!build/rollup.js",
|
||||
|
||||
@ -16,10 +16,9 @@
|
||||
</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>
|
||||
<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 run `npm start` and open the combined-tracks.html</p>
|
||||
<pre>npm start</pre>
|
||||
<pre>open http://localhost:9999/sandbox/combined-tracks.html</pre>
|
||||
</div>
|
||||
|
||||
<video id="vid1" class="video-js" lang="en" controls preload="auto" width="640" height="360" poster="//d2zihajmogu5jn.cloudfront.net/elephantsdream/poster.png">
|
||||
|
||||
@ -17,9 +17,8 @@
|
||||
</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>
|
||||
<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 run `npm start` and open the flash.html</p>
|
||||
<pre>npm start</pre>
|
||||
<pre>open http://localhost:9999/sandbox/flash.html</pre>
|
||||
</div>
|
||||
|
||||
|
||||
@ -16,8 +16,8 @@
|
||||
</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><b>npm start</b> will automatically copy these files over from .example if they don't already exist.</pre>
|
||||
<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 run `npm start` and open the focus-visible.html</p>
|
||||
<pre>npm start</pre>
|
||||
<pre>open http://localhost:9999/sandbox/focus-visible.html</pre>
|
||||
</div>
|
||||
|
||||
|
||||
@ -8,9 +8,8 @@
|
||||
</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>
|
||||
<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 run `npm start` and open the index.html</p>
|
||||
<pre>npm start</pre>
|
||||
<pre>open http://localhost:9999/sandbox/index.html</pre>
|
||||
</div>
|
||||
|
||||
|
||||
@ -8,10 +8,9 @@
|
||||
</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>
|
||||
<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 run `npm start` and open the live.html</p>
|
||||
<pre>npm start</pre>
|
||||
<pre>open http://localhost:9999/sandbox/live.html</pre>
|
||||
</div>
|
||||
|
||||
<video-js id="vid1" controls preload="auto" width="640" height="264">
|
||||
|
||||
@ -8,10 +8,9 @@
|
||||
</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>
|
||||
<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 run `npm start` and open the liveui.html</p>
|
||||
<pre>npm start</pre>
|
||||
<pre>open http://localhost:9999/sandbox/liveui.html</pre>
|
||||
</div>
|
||||
|
||||
<video-js id="vid1" controls preload="auto" width="640" height="264">
|
||||
|
||||
@ -8,10 +8,9 @@
|
||||
</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>
|
||||
<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 run `npm start` and open the vertical-volume.html</p>
|
||||
<pre>npm start</pre>
|
||||
<pre>open http://localhost:9999/sandbox/vertical-volume.html</pre>
|
||||
</div>
|
||||
|
||||
<video-js
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user