- var myPlayer = _V_("example_video_1");
+ var myPlayer = _V_("example_video_1");
-{% endhighlight %}
+
(If the player hasn't been initialized yet via the data-setup attribute or another method, this will also initialize the player.)
@@ -26,7 +26,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.
-{% highlight javascript %}
+
_V_("example_video_1").ready(function(){
@@ -37,192 +37,233 @@ The time it takes Video.js to set up the video and API will vary depending on th
});
-{% endhighlight %}
+
API Methods
-----------
-Now that you have access to a ready player, you can control the video or respond to video events using the following functions. The Video.js API function names follow the [HTML5 media API](http://www.w3.org/TR/html5/video.html). The main difference is that attributes which you would get or set on a video element using the equals sign ( `myVideoElement.currentTime = "120";` ), you would use a function argument syntax for Video.js ( `myPlayer.currentTime(120);` )
+Now that you have access to a ready player, you can control the video, get values, or respond to video events using the following functions. The Video.js API function names follow the [HTML5 media API](http://www.w3.org/TR/html5/video.html). The main difference is that attributes which you would get or set on a video element using the equals sign ( `myVideoElement.currentTime = "120";` ), you would use a function argument syntax for Video.js ( `myPlayer.currentTime(120);` )
-### play()
- Start video playback. Returns the player object.
+### play() ###
+Start video playback. Returns the player object.
-{% highlight javascript %}
+
- myPlayer.play();
+ myPlayer.play();
-{% endhighlight %}
+
+### pause() ###
+Pause the video playback. Returns the player object
-### pause()
- Pause the video playback. Returns: the player object
+
-{% highlight javascript %}
+ myPlayer.pause();
- myPlayer.pause();
+
-{% endhighlight %}
+### src(newSource) ###
+The source function updates the video source. There are three types of variables you can pass as the argument.
-### currentTime()
- Returns the current time of the video in seconds.
+**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.
+
-{% highlight javascript %}
+ myPlayer.src("http://www.example.com/path/to/video.mp4");
- var whereYouAt = myPlayer.currentTime();
+
-{% endhighlight %}
+**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.
+
-### currentTime(seconds) // Type: Integer or Float
- Seek to the supplied time (seconds).
- Returns the player object.
+ myPlayer.src({ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" });
-{% highlight javascript %}
+
- myPlayer.currentTime(120); // 2 minutes into the video
+**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.
+
-{% endhighlight %}
+ 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.
+
+
+
+ var whereYouAt = myPlayer.currentTime();
+
+
-### 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.
+### currentTime(seconds) // Type: Integer or Float ###
+Seek to the supplied time (seconds). Returns the player object.
+
+
+
+ myPlayer.currentTime(120); // 2 minutes into the video
+
+
-{% highlight javascript %}
+### 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.
- var howLongIsThis = myPlayer.duration();
+
-{% endhighlight %}
+ var howLongIsThis = myPlayer.duration();
-### buffered()
- Returns a [TimeRange](http://videojs.com/docs/glossary.html#timerange) with sections of the video that have been downloaded. If you just want the percent of the video that's been downloaded, use bufferedPercent.
+
-{% highlight javascript %}
- var whatHasBeenBuffered = myPlayer.buffered();
+### 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.
-{% endhighlight %}
+
-### bufferedPercent()
- Returns the percent (as a decimal) of the video that's been downloaded.
+ var bufferedTimeRange = myPlayer.buffered(),
-{% highlight javascript %}
+ // Number of different ranges of time have been buffered. Usually 1.
+ numberOfRanges = bufferedTimeRange.length,
- var howMuchIsDownloaded = myPlayer.bufferedPercent();
+ // 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),
-{% endhighlight %}
+ // Length in seconds of the first time range
+ firstRangeLength = firstRangeEnd - firstRangeStart;
-### 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.
+
-{% highlight javascript %}
- var howLoudIsIt = myPlayer.volume();
+### bufferedPercent() ###
+Returns the percent (as a decimal) of the video that's been downloaded. 0 means none, 1 means all.
-{% endhighlight %}
+
-### volume(percentAsDecimal)
- Set the volume to the supplied percent (as a decimal between 0 and 1).
+ var howMuchIsDownloaded = myPlayer.bufferedPercent();
-{% highlight javascript %}
+
- myPlayer.volume(0.5); // Set volume to half
-{% endhighlight %}
+### 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.
-### width()
- Returns the current width of the video in pixels.
+
-{% highlight javascript %}
+ var howLoudIsIt = myPlayer.volume();
+
+
+
+### volume(percentAsDecimal) ###
+Set the volume to the supplied percent (as a decimal between 0 and 1).
+
+
+
+ myPlayer.volume(0.5); // Set volume to half
+
+
+
+
+### width() ###
+Returns the current width of the video in pixels.
+
+
var howWideIsIt = myPlayer.width();
-{% endhighlight %}
-
-### width(pixels)
- Change the width of the video to the supplied width in pixels.
- Returns the player object
-
-{% highlight javascript %}
-
- myPlayer.width(640);
-
-{% endhighlight %}
+
-### height()
- Returns the current height of the video in pixels.
+### width(pixels) ###
+Change the width of the video to the supplied width in pixels. Returns the player object
-{% highlight javascript %}
+
- var howTallIsIt = myPlayer.height();
+ myPlayer.width(640);
-{% endhighlight %}
+
-### height(pixels)
- Change the height of the video to the supplied height in pixels.
- Returns the player object
+### height() ###
+Returns the current height of the video in pixels.
-{% highlight javascript %}
+
- myPlayer.height(480);
+ var howTallIsIt = myPlayer.height();
-{% endhighlight %}
+
-### 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.
+### height(pixels) ###
+Change the height of the video to the supplied height in pixels. Returns the player object
-{% highlight javascript %}
+
- myPlayer.size(640,480);
+ myPlayer.height(480);
-{% endhighlight %}
+
-### 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 fills the browser window. In browsers that support native full screen, typically the browser's default controls will be shown, and not the Video.js custom skin. In full window mode, the Video.js controls and skin will always be used.
- Returns the player object.
+### 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.
-{% highlight javascript %}
+
- myPlayer.requestFullScreen();
+ myPlayer.size(640,480);
-{% endhighlight %}
+
-### cancelFullScreen()
- Return the video to its normal size after having been in full screen mode.
- Returns the player object.
+### 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.
-{% highlight javascript %}
+
- myPlayer.cancelFullScreen();
+ myPlayer.requestFullScreen();
-{% endhighlight %}
+
+
+
+### cancelFullScreen() ###
+Return the video to its normal size after having been in full screen mode. Returns the player object.
+
+
+
+ myPlayer.cancelFullScreen();
+
+
Events
------
You can attach event listeners to the player similarly to how you would for a video element.
-{% highlight javascript %}
+
- var myFunc = function(){
- // Do something when the event is fired
- };
- myPlayer.addEvent("eventName", myFunc);
-
-{% endhighlight %}
+ var myFunc = function(){
+ var myPlayer = this;
+ // Do something when the event is fired
+ };
+ myPlayer.addEvent("eventName", myFunc);
+
You can also remove the listeners later.
-{% highlight javascript %}
+
- myPlayer.removeEvent("eventName", myFunc);
+ myPlayer.removeEvent("eventName", myFunc);
-{% endhighlight %}
+
### Event Types
@@ -231,6 +272,9 @@ List of player events you can add listeners for.
| Name | Description |
|---|---|
| loadstart | Fired when the user agent begins looking for media data. |
| loadedmetadata | Fired when the player has initial duration and dimension information. |
| loadeddata | Fired when the player has downloaded data at the current playback position. |
| loadedalldata | Fired when the player has finished downloading the source data. |
| play | Fired whenever the media begins or resumes playback. |
| pause | Fired whenever the media has been paused. |
| timeupdate | Fired when the current playback position has changed. During playback this is fired every 15-250 milliseconds, depnding on the playback technology in use. |
| resize | Fired when the width and/or height of the video window changes. |
| volumechange | Fired when the volume changes. |
| error | Fired when there is an error in playback. |
| fullscreenchange | Fired when the player switches in or out of fullscreen mode. |