1
0
mirror of https://github.com/videojs/video.js.git synced 2025-01-13 10:32:26 +02:00

@vitor-faiante updated the guides. closes #2781

This commit is contained in:
Vitor Faiante 2016-01-25 19:50:02 -05:00 committed by Gary Katsevman
parent 8a17313a3b
commit 9cdfb75187
7 changed files with 27 additions and 16 deletions

View File

@ -8,6 +8,7 @@ CHANGELOG
* @mister-ben made $primary-foreground-color a !default sass var ([view](https://github.com/videojs/video.js/pull/3003))
* @OwenEdwards fixed double-localization of mute toggle control text ([view](https://github.com/videojs/video.js/pull/3017))
* @gkatsev checked muted status when updating volume bar level ([view](https://github.com/videojs/video.js/pull/3037))
* @vitor-faiante updated the guides ([view](https://github.com/videojs/video.js/pull/2781))
--------------------

View File

@ -17,7 +17,7 @@ Wait Until the Player is Ready
------------------------------
The time it takes Video.js to set up the video and API will vary depending on the playback technology being used (HTML5 will often be much faster to load than Flash). For that reason we want to use the player's 'ready' function to trigger any code that requires the player's API.
```javascript
```js
videojs("example_video_1").ready(function(){
var myPlayer = this;

View File

@ -89,12 +89,12 @@ NOTE: These need to be added after the core Video.js script.
3. During a Video.js player instantiation. Adding the languages to the configuration object provided in the `data-setup` attribute.
```html
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
data-setup='{"languages":{"es":{"Play":"Juego"}}}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
data-setup='{"languages":{"es":{"Play":"Juego"}}}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
@ -110,12 +110,12 @@ Setting Default Language in a Video.js Player
During a Video.js player instantiation you can force it to localize to a specific language by including the locale value into the configuration object via the `data-setup` attribute. Valid options listed at the bottom of the page for reference.
```html
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
data-setup='{"language":"es"}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
data-setup='{"language":"es"}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
@ -145,7 +145,7 @@ Localization in Plugins
When you're developing a plugin, you can also introduce new localized strings. Simply wrap the string with the player's `localize` function:
```javascript
```js
var details = '<div class="vjs-errors-details">' + player.localize('Technical details') + '</div>';
```

View File

@ -119,7 +119,7 @@ Component Options
You can set the options for any single player component. For instance, if you wanted to remove the `muteToggle` button, which
is a child of `controlBar`, you can just set that component to false:
```javascript
```js
var player = videojs('video-id', {
controlBar: {
muteToggle: false

View File

@ -11,11 +11,13 @@ 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:
```js
function examplePlugin(options) {
this.on('play', function(e) {
console.log('playback has started!');
});
};
```
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.
@ -23,7 +25,9 @@ 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:
```js
videojs.plugin('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...
@ -31,6 +35,7 @@ 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:
```js
videojs('vidId', {
plugins: {
examplePlugin: {
@ -38,11 +43,14 @@ There are two ways to initialize a plugin. If you're creating your video tag dyn
}
}
});
```
If you've already initialized your video tag, you can activate a plugin at any time by calling its setup function directly:
```js
var video = videojs('cool-vid');
video.examplePlugin({ exampleOption: true });
```
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.

View File

@ -8,7 +8,7 @@ Call `.dispose()`
To remove the html associated with your videojs player from the page always call the player's [`dispose()`](http://docs.videojs.com/docs/api/player.html#Methodsdispose) method:
```javascript```
```js
var oldPlayer = document.getElementById('my-player');
videojs(oldPlayer).dispose();
```

View File

@ -18,6 +18,8 @@ You can download the Video.js source and host it on your own servers, or use the
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
```
Alternatively you can always [go here](http://videojs.com/getting-started/) to get the latest URL for videojs CDN.
We include a stripped down Google Analytics pixel that tracks a random percentage (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:
```js