web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-12-31 03:11:11 +02:00
Code Releases Activity

Cleaned up whitespace around docs code

Browse Source
This commit is contained in:
Steve Heffernan 2012-11-14 15:02:32 -08:00
parent c9d91f1d61
commit c01676d2bb
4 changed files with 56 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
docs/api.md
View File

@ -5,7 +5,6 @@ The Video.js API allows you to interact with the video through Javascript, wheth
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");
```
@ -15,18 +14,15 @@ var myPlayer = _V_("example_video_1");
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(){
_V_("example_video_1").ready(function(){
var myPlayer = this;
var myPlayer = this;
// EXAMPLE: Start playing the video.
myPlayer.play();
});
// EXAMPLE: Start playing the video.
myPlayer.play();
});
```
API Methods
@ -35,211 +31,158 @@ Now that you have access to a ready player, you can control the video, get value
### play() ###
Start video playback. Returns the player object.
```js
myPlayer.play();
myPlayer.play();
```
### pause() ###
Pause the video playback. Returns the player object
```js
myPlayer.pause();
myPlayer.pause();
```
### paused() ###
Returns false if the video is currently playing, or true otherwise. ()
```js
var isPaused = myPlayer.paused();
var isPlaying = !myPlayer.paused();
var isPaused = myPlayer.paused();
var isPlaying = !myPlayer.paused();
```
### src(newSource) ###
The source function updates the video source. There are three types of variables you can pass as the argument.
**URL String**: A URL to the the video file. Use this method if you're sure the current playback technology (HTML5/Flash) can support the source you provide. Currently only MP4 files can be used in both HTML5 and Flash.
```js
myPlayer.src("http://www.example.com/path/to/video.mp4");
myPlayer.src("http://www.example.com/path/to/video.mp4");
```
**Source Object (or element):** A javascript object containing information about the source file. Use this method if you want the player to determine if it can support the file using the type information.
```js
myPlayer.src({ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" });
myPlayer.src({ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" });
```
**Array of Source Objects:** To provide multiple versions of the source so that it can be played using HTML5 across browsers you can use an array of source objects. Video.js will detect which version is supported and load that file.
```js
myPlayer.src([
{ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
{ type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
{ type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
]);
myPlayer.src([
{ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
{ type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
{ type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
]);
```
Returns the player object.
### currentTime() ###
Returns the current time of the video in seconds.
```js
var whereYouAt = myPlayer.currentTime();
var whereYouAt = myPlayer.currentTime();
```
### currentTime(seconds) // Type: Integer or Float ###
Seek to the supplied time (seconds). Returns the player object.
```js
myPlayer.currentTime(120); // 2 minutes into the video
myPlayer.currentTime(120); // 2 minutes into the video
```
### duration() ###
Returns the length in time of the video in seconds. NOTE: The video must have started loading before the duration can be known, and in the case of Flash, may not be known until the video starts playing.
```js
var howLongIsThis = myPlayer.duration();
var howLongIsThis = myPlayer.duration();
```
### buffered() ###
Returns a [TimeRange](http://videojs.com/docs/glossary.html#timerange) object with sections of the video that have been downloaded. If you just want the percent of the video that's been downloaded, use bufferedPercent.
```js
var bufferedTimeRange = myPlayer.buffered(),
var bufferedTimeRange = myPlayer.buffered(),
// Number of different ranges of time have been buffered. Usually 1.
numberOfRanges = bufferedTimeRange.length,
// Number of different ranges of time have been buffered. Usually 1.
numberOfRanges = bufferedTimeRange.length,
// Time in seconds when the first range starts. Usually 0.
firstRangeStart = bufferedTimeRange.start(0),
// Time in seconds when the first range starts. Usually 0.
firstRangeStart = bufferedTimeRange.start(0),
// Time in seconds when the first range ends
firstRangeEnd = bufferedTimeRange.end(0),
// Length in seconds of the first time range
firstRangeLength = firstRangeEnd - firstRangeStart;
// Time in seconds when the first range ends
firstRangeEnd = bufferedTimeRange.end(0),
// Length in seconds of the first time range
firstRangeLength = firstRangeEnd - firstRangeStart;
```
### bufferedPercent() ###
Returns the percent (as a decimal) of the video that's been downloaded. 0 means none, 1 means all.
```js
var howMuchIsDownloaded = myPlayer.bufferedPercent();
var howMuchIsDownloaded = myPlayer.bufferedPercent();
```
### volume() ###
Returns the current volume of the video as a percent in decimal form. 0 is off (muted), 1.0 is all the way up, 0.5 is half way.
```js
var howLoudIsIt = myPlayer.volume();
var howLoudIsIt = myPlayer.volume();
```
### volume(percentAsDecimal) ###
Set the volume to the supplied percent (as a decimal between 0 and 1).
```js
myPlayer.volume(0.5); // Set volume to half
myPlayer.volume(0.5); // Set volume to half
```
### width() ###
Returns the current width of the video in pixels.
```js
var howWideIsIt = myPlayer.width();
var howWideIsIt = myPlayer.width();
```
### width(pixels) ###
Change the width of the video to the supplied width in pixels. Returns the player object
```js
myPlayer.width(640);
myPlayer.width(640);
```
### height() ###
Returns the current height of the video in pixels.
```js
var howTallIsIt = myPlayer.height();
var howTallIsIt = myPlayer.height();
```
### height(pixels) ###
Change the height of the video to the supplied height in pixels. Returns the player object
```js
myPlayer.height(480);
myPlayer.height(480);
```
### size(width, height) ###
Changes the width and height of the video to the supplied width and height. This is more efficient if you're changing both width and height (only triggers the player's resize event once). Returns the player object.
```js
myPlayer.size(640,480);
myPlayer.size(640,480);
```
### requestFullScreen() ###
Increase the size of the video to full screen. In some browsers, full screen is not supported natively, so it enters full window mode, where the video fills the browser window. In browsers and devices that support native full screen, sometimes the browser's default controls will be shown, and not the Video.js custom skin. This includes most mobile devices (iOS, Android) and older versions of Safari. Returns the player object.
```js
myPlayer.requestFullScreen();
myPlayer.requestFullScreen();
```
### cancelFullScreen() ###
Return the video to its normal size after having been in full screen mode. Returns the player object.
```js
myPlayer.cancelFullScreen();
myPlayer.cancelFullScreen();
```
@ -248,21 +191,16 @@ Events
You can attach event listeners to the player similarly to how you would for a video element.
```js
var myFunc = function(){
var myPlayer = this;
// Do something when the event is fired
};
myPlayer.addEvent("eventName", myFunc);
var myFunc = function(){
var myPlayer = this;
// Do something when the event is fired
};
myPlayer.addEvent("eventName", myFunc);
```
You can also remove the listeners later.
```js
myPlayer.removeEvent("eventName", myFunc);
myPlayer.removeEvent("eventName", myFunc);
```

2
docs/index.md
View File

@ -1,4 +1,4 @@
<h1>Start</h1>
<h1>TOC</h1>
The Video.js documentation is here to help you setup and use the player. These docs can be found and contributed to in the [Video.js library repository](https://github.com/zencoder/video-js/tree/master/docs).

7
docs/options.md
View File

@ -44,12 +44,14 @@ RIGHT
### controls ###
The controls option sets whether or not the player has controls that the user can interact with. Without controls the only way to start the video playing is with the autoplay attribute or through the API.
```html
<video controls ...>
or
{ "controls": true }
```
### autoplay ###
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.
@ -59,6 +61,7 @@ or
{ "autoplay": true }
```
### preload ###
The preload attribute informs the browser whether or not the video data should begin downloading as soon as the video tag is loaded. The options are auto, metadata, and none.
@ -74,6 +77,7 @@ or
{ "preload": "auto" }
```
### poster ###
The poster attribute sets the image that displays before the video begins playing. This is often a frame of the video or a custom title screen. As soon as the user clicks play the image will go away.
```html
@ -82,6 +86,7 @@ or
{ "poster": "myPoster.jpg" }
```
### loop ###
The loop attribute causes the video to start over as soon as it ends. This could be used for a visual affect like clouds in the background.
```html
@ -90,6 +95,7 @@ or
{ "loop": "true" }
```
### width ###
The width attribute sets the display width of the video.
```html
@ -98,6 +104,7 @@ or
{ "width": 640 }
```
### height ###
The height attribute sets the display height of the video.
```html

2
docs/tracks.md
View File

@ -20,7 +20,6 @@ Adding to Video.js
Once you have your WebVTT file created, you can add it to Video.js using the track trag. Put your track track tag after all the source elements, and before any fallback content.
```html
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
data-setup='{"example_option":true}'>
@ -31,7 +30,6 @@ Once you have your WebVTT file created, you can add it to Video.js using the tra
<track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
</video>
```
Track Attributes