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

Updated docs. Changed _V_ to videojs.

This commit is contained in:
Steve Heffernan
2013-05-09 09:23:32 -07:00
parent 18c3853039
commit 94c07756dc
7 changed files with 21 additions and 21 deletions

View File

@@ -10,7 +10,7 @@
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<script>
_V_.options.flash.swf = "video-js.swf";
videojs.options.flash.swf = "video-js.swf";
</script>

View File

@@ -6,7 +6,7 @@ Referencing the Player
----------------------
To use the API functions, you need access to the player object. Luckily this is easy to get. You just need to make sure your video tag has an ID. The example embed code has an ID of "example\_video_1". If you have multiple videos on one page, make sure every video tag has a unique ID.
```js
var myPlayer = _V_("example_video_1");
var myPlayer = videojs("example_video_1");
```
(If the player hasn't been initialized yet via the data-setup attribute or another method, this will also initialize the player.)
@@ -15,7 +15,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
_V_("example_video_1").ready(function(){
videojs("example_video_1").ready(function(){
var myPlayer = this;

View File

@@ -3,9 +3,9 @@ Components
The Video.js player is built on top of a simple, custom UI components architecture. The player class and all control classes inherit from the Component class, or a subclass of Component.
```js
_V_.Control = _V_.Component.extend({});
_V_.Button = _V_.Control.extend({});
_V_.PlayToggle = _V_.Button.extend({});
videojs.Control = videojs.Component.extend({});
videojs.Button = videojs.Control.extend({});
videojs.PlayToggle = videojs.Button.extend({});
```
(The Class interface itself is provided using John Resig's [simple class inheritance](http://ejohn.org/blog/simple-javascript-inheritance/) also found in [JSNinja](http://jsninja.com).

View File

@@ -19,7 +19,7 @@ Alternatively, you can use the data-setup attribute to provide options in the [J
Finally, if you're not using the data-setup attribute to trigger the player setup, you can pass in an object with the player options as the second argument in the javascript setup function.
```js
_V_("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" });
videojs("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" });
```
@@ -53,7 +53,7 @@ or
### autoplay ###
If autoplay is true, the video will start playing as soon as page is loaded (without any interaction from the user).
If autoplay is true, the video will start playing as soon as page is loaded (without any interaction from the user).
NOT SUPPORTED BY APPLE iOS DEVICES. Apple blocks the autoplay functionality in an effort to protect it's customers from unwillingly using a lot of their (often expensive) monthly data plans. A user touch/click is required to start the video in this case.
```html
<video autoplay ...>

View File

@@ -12,8 +12,8 @@ You can download the Video.js source and host it on your own servers, or use the
### CDN Version ###
```html
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
```
### Self Hosted. ###
@@ -22,7 +22,7 @@ With the self hosted option you'll also want to update the location of the video
<link href="http://example.com/path/to/video-js.css" rel="stylesheet">
<script src="http://example.com/path/to/video.js"></script>
<script>
_V_.options.flash.swf = "http://example.com/path/to/video-js.swf"
videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>
```
@@ -31,13 +31,13 @@ Step 2: Add an HTML5 video tag to your page.
--------------------------------------------
With Video.js you just use an HTML5 video tag to embed a video. Video.js will then read the tag and make it work in all browsers, not just ones that support HTML5 video. Beyond the basic markup, Video.js needs a few extra pieces.
1. The 'data-setup' Atrribute tells Video.js to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute (see ['options'](options.md)). There are other methods for initializing the player, but this is the easiest.
1. The 'data-setup' Atrribute tells Video.js to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute (see [options](options.md)). There are other methods for initializing the player, but this is the easiest.
2. The 'id' Attribute: Should be used and unique for every video on the same page.
3. The 'class' attribute contains two classes:
- 'video-js' applies styles that are required for Video.js functionality, like fullscreen and subtitles.
- 'vjs-default-skin' applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design.
- `video-js` applies styles that are required for Video.js functionality, like fullscreen and subtitles.
- `vjs-default-skin` applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design.
Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.
@@ -57,12 +57,12 @@ Alternative Setup for Dynamically Loaded HTML
---------------------------------------------
If your web page or application loads the video tag dynamically (ajax, appendChild, etc.), so that it may not exist when the page loads, you'll want to manually set up the player instead of relying on the data-setup attribute. To do this, first remove the data-setup attribute from the tag so there's no confusion around when the player is initialized. Next, run the following javascript some time after the Video.js javascript library has loaded, and after the video tag has been loaded into the DOM.
```js
_V_("example_video_1", {}, function(){
videojs("example_video_1", {}, function(){
// Player (this) is initialized and ready.
});
```
The first argument in the \_V_ function is the ID of your video tag. Replace it with your own.
The first argument in the `videojs` function is the ID of your video tag. Replace it with your own.
The second argument is an options object. It allows you to set additional options like you can with the data-setup attribute.

View File

@@ -1,6 +1,6 @@
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 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.
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.
@@ -45,7 +45,7 @@ When adding additional Tech to a video player, make sure to add the supported te
<video data-setup='{"techOrder": ["html5", "flash", "other supported tech"]}'
### Object Method: ###
_V_("videoID", {
videojs("videoID", {
techOrder: ["html5", "flash", "other supported tech"]
});

View File

@@ -15,7 +15,7 @@ test('should export ready api call to public', function() {
var fixture = document.getElementById('qunit-fixture');
fixture.appendChild(videoTag);
var player = _V_('example_1');
var player = videojs('example_1');
ok(player.ready !== undefined, 'ready callback is defined');
player.dispose();
});
@@ -27,13 +27,13 @@ test('should be able to initialize player twice on the same tag using string ref
var fixture = document.getElementById('qunit-fixture');
fixture.appendChild(videoTag);
var player = _V_('example_1');
var player = videojs('example_1');
player.dispose();
ok(!document.getElementById(id), 'element is removed');
videoTag = PlayerTest.makeTag();
fixture.appendChild(videoTag);
player = _V_('example_1');
player = videojs('example_1');
player.dispose();
});