web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-25 11:13:52 +02:00
Code Releases Activity

Merge branch 'feature/update-docs'

Browse Source
This commit is contained in:
Steve Heffernan 2012-03-19 16:02:21 -07:00
commit 0657d3d118
11 changed files with 655 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -1,3 +1,4 @@
* Updated docs with more options.
* Overhauled HTML5 Track support.
* Fixed Flash always autoplaying when setting source.
* Fixed localStorage context

44
build/release-files/captions.vtt Normal file
View File

@ -0,0 +1,44 @@
WEBVTT
00:00.000 --> 00:01.110
(Heroic music playing for a seagull)
00:01.110 --> 00:04.743
(Splash!!!)
00:04.743 --> 00:06.790
(Sploosh!!!)
00:06.790 --> 00:09.225
(Splash...splash...splash splash splash)
00:09.225 --> 00:11.255
(Splash, Sploosh again)
00:11.255 --> 00:13.138
(splash splash)
00:13.138 --> 00:14.984
Dolphin Sqauck
00:14.984 --> 00:23.802
Splash splash sploosh
00:23.802 --> 00:28.284
A whole ton of splashes
00:28.284 --> 00:32.550
sploosh sploosh wooosh
00:32.550 --> 00:35.203
CHOMP!!!
00:35.203 --> 00:37.861
chomp over there
00:37.861 --> 00:39.193
EEEEEEOOOOOOOOOOWHALENOISE
00:39.193 --> 00:42.611
BIG SPLASH

1
design/video-js.css
View File

@ -62,6 +62,7 @@ body.vjs-full-window {
}
.video-js .vjs-subtitles { color: #fff; }
.video-js .vjs-captions { color: #fc6; }
.vjs-tt-cue { display: block; }
/* Fading sytles, used to fade control bar. */
.vjs-fade-in {

255
docs/api.md
View File

@ -12,13 +12,13 @@ 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.
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.
{% highlight javascript %}
<code type="javascript">
var myPlayer = _V_("example_video_1");
var myPlayer = _V_("example_video_1");
{% endhighlight %}
</code>
(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 %}
<code type="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 %}
</code>
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 %}
<code type="javascript">
myPlayer.play();
myPlayer.play();
{% endhighlight %}
</code>
### pause() ###
Pause the video playback. Returns the player object
### pause()
Pause the video playback. Returns: the player object
<code type="javascript">
{% highlight javascript %}
myPlayer.pause();
myPlayer.pause();
</code>
{% 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.
<code type="javascript">
{% highlight javascript %}
myPlayer.src("http://www.example.com/path/to/video.mp4");
var whereYouAt = myPlayer.currentTime();
</code>
{% 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.
<code type="javascript">
### 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 %}
</code>
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.
<code type="javascript">
{% 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" }
]);
</code>
Returns the player object.
### currentTime() ###
Returns the current time of the video in seconds.
<code type="javascript">
var whereYouAt = myPlayer.currentTime();
</code>
### 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.
<code type="javascript">
myPlayer.currentTime(120); // 2 minutes into the video
</code>
{% 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();
<code type="javascript">
{% 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.
</code>
{% 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 %}
<code type="javascript">
### 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.
</code>
{% 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 %}
<code type="javascript">
### volume(percentAsDecimal)
Set the volume to the supplied percent (as a decimal between 0 and 1).
var howMuchIsDownloaded = myPlayer.bufferedPercent();
{% highlight javascript %}
</code>
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.
<code type="javascript">
{% highlight javascript %}
var howLoudIsIt = myPlayer.volume();
</code>
### volume(percentAsDecimal) ###
Set the volume to the supplied percent (as a decimal between 0 and 1).
<code type="javascript">
myPlayer.volume(0.5); // Set volume to half
</code>
### width() ###
Returns the current width of the video in pixels.
<code type="javascript">
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 %}
</code>
### 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 %}
<code type="javascript">
var howTallIsIt = myPlayer.height();
myPlayer.width(640);
{% endhighlight %}
</code>
### 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 %}
<code type="javascript">
myPlayer.height(480);
var howTallIsIt = myPlayer.height();
{% endhighlight %}
</code>
### 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 %}
<code type="javascript">
myPlayer.size(640,480);
myPlayer.height(480);
{% endhighlight %}
</code>
### 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 %}
<code type="javascript">
myPlayer.requestFullScreen();
myPlayer.size(640,480);
{% endhighlight %}
</code>
### 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 %}
<code type="javascript">
myPlayer.cancelFullScreen();
myPlayer.requestFullScreen();
{% endhighlight %}
</code>
### cancelFullScreen() ###
Return the video to its normal size after having been in full screen mode. Returns the player object.
<code type="javascript">
myPlayer.cancelFullScreen();
</code>
Events
------
You can attach event listeners to the player similarly to how you would for a video element.
{% highlight javascript %}
<code type="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);
</code>
You can also remove the listeners later.
{% highlight javascript %}
<code type="javascript">
myPlayer.removeEvent("eventName", myFunc);
myPlayer.removeEvent("eventName", myFunc);
{% endhighlight %}
</code>
### Event Types
@ -231,6 +272,9 @@ List of player events you can add listeners for.
<table border="0" cellspacing="5" cellpadding="5">
<tr><th>Name</th><th>Description</th></tr>
<tr><td>loadstart</td><td>Fired when the user agent begins looking for media data.</td></tr>
<tr><td>loadedmetadata</td><td>Fired when the player has initial duration and dimension information.</td></tr>
<tr><td>loadeddata</td><td>Fired when the player has downloaded data at the current playback position.</td></tr>
<tr><td>loadedalldata</td><td>Fired when the player has finished downloading the source data.</td></tr>
<tr><td>play</td><td>Fired whenever the media begins or resumes playback.</td></tr>
<tr><td>pause</td><td>Fired whenever the media has been paused.</td></tr>
<tr><td>timeupdate</td><td>Fired when the current playback position has changed. During playback this is fired every 15-250 milliseconds, depnding on the playback technology in use.</td></tr>
@ -240,4 +284,5 @@ List of player events you can add listeners for.
<tr><td>resize</td><td>Fired when the width and/or height of the video window changes.</td></tr>
<tr><td>volumechange</td><td>Fired when the volume changes.</td></tr>
<tr><td>error</td><td>Fired when there is an error in playback.</td></tr>
<tr><td>fullscreenchange</td><td>Fired when the player switches in or out of fullscreen mode.</td></tr>
</table>

135
docs/options.md
View File

@ -9,22 +9,131 @@ body_class: docs subpage
Options
=======
The Video.js emebed code is simply an HTML5 video tag with the video.js classes. So for many of the options you can use the standard tag attributes to set video.js options.
Setting Options
---------------
{% highlight html %}
<video controls autoplay preload="auto" ...>
{% endhighlight %}
The Video.js emebed code is simply an HTML5 video tag, so for many of the options you can use the standard tag attributes to set the options.
Alternatively, you can use the data-setup attribute to provide options in the JSON format. This is also how you would set options that aren't standard to the video tag.
<code type="html">
{% highlight html %}
<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>
{% endhighlight %}
<video controls autoplay preload="auto" ...>
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 setup function.
</code>
{% highlight javascript %}
_V_("myVideoID", { "controls": true, "autoplay": false, "preload": "auto" });
{% endhighlight %}
Alternatively, you can use the data-setup attribute to provide options in the [JSON](http://json.org/example.html) format. This is also how you would set options that aren't standard to the video tag.
(More options documentation coming soon.)
<code type="html">
<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>
</code>
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.
<code type="javascript">
_V_("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" });
</code>
Individual Options
------------------
> ### Note on Video Tag Attributes ###
> With HTML5 video tag attributes that can only be true or false (boolean), you simply include the attribute (no equals sign) to turn it on, or exclude it to turn it off. For example, to turn controls on:
>
> WRONG
> <code type="html">
>
> <video controls="true" ...>
>
> </code>
>
> RIGHT
> <code type="html">
>
> <video controls ...>
>
> </code>
>
> The biggest issue people run into is trying to set these values to false using false as the value (e.g. controls="false") which actually does the opposite and sets the value to true because the attribute is still included. If you need the attribute to include an equals sign for XHTML validation, you can set the attribute's value to the same as its name (e.g. controls="controls").
### 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.
<code type="html">
<video controls ...>
or
{ "controls": true }
</code>
### 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.
<code type="html">
<video autoplay ...>
or
{ "autoplay": true }
</code>
### 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.
'auto': Start loading the video immediately (if the browser agrees). Some mobile devices like iPhones and iPads will not preload the video in order to protect their users' bandwidth. This is why the value is called 'auto' and not something more final like 'true'.
'metadata': Load only the meta data of the video, which includes information like the duration and dimensions of the video.
'none': Don't preload any of the video data. This will wait until the user clicks play to begin downloading.
<code type="html">
<video preload ...>
or
{ "preload": "auto" }
</code>
### 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.
<code type="html">
<video poster="myPoster.jpg" ...>
or
{ "poster": "myPoster.jpg" }
</code>
### 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.
<code type="html">
<video loop ...>
or
{ "loop": "true" }
</code>
### width ###
The width attribute sets the display width of the video.
<code type="html">
<video width="640" ...>
or
{ "width": 640 }
</code>
### height ###
The height attribute sets the display height of the video.
<code type="html">
<video height="480" ...>
or
{ "height": 480 }
</code>

73
docs/setup.md
View File

@ -13,38 +13,75 @@ Video.js is pretty easy to set up. It can take a matter of seconds to get the pl
Step 1: Include the Video.js Javascript and CSS files in the head of your page.
------------------------------------------------------------------------------
You can download the Video.js source and host it on your own servers, or use the free CDN hosted version (thanks to Zencoder). It's often recommended now to put JavaScript before the end \</body\> tag instead of the head but Video.js includes an 'HTML5 Shiv', which needs to be in the \<head\> for older IE versions.
{% highlight html %}
You can download the Video.js source and host it on your own servers, or use the free CDN hosted version. It's often recommended now to put JavaScript before the end body tag (&lt;/body>) instead of the head (&lt;head>), but Video.js includes an 'HTML5 Shiv', which needs to be in the head for older IE versions to respect the video tag as a valid element.
<script src="http://vjs.zencdn.net/c/video.js"></script>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
> NOTE: If you're already using an HTML5 shiv like [Modernizr](http://modernizr.com/) you can include the Video.js JavaScript anywhere, however make sure your version of Modernizr includes the shiv for video.
{% endhighlight %}
### CDN Version ###
<code type="html">
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</code>
### Self Hosted. ###
With the self hosted option you'll also want to update the location of the video-js.swf file.
<code type="html">
<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"
</script>
</code>
Step 2: Add an HTML5 video tag to your page.
--------------------------------------------
Use the video tag as normal, with a few extra pieces for Video.js:
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'](http://videojs.com/docs/options/)). 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'](http://videojs.com/docs/options/)).
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.
Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video (see ['video-tag'](http://videojs.com/docs/video-tag.html)).
Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.
{% highlight html %}
<code type="html">
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<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>
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<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>
{% endhighlight %}
</code>
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.
<code type="javascript">
_V_("example_video_1", {}, function(){
// Player (this) is initialized and ready.
});
</code>
The first argument in the \_V_ 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.
The third argument is a 'ready' callback. Once Video.js has initialized it will call this function.

235
docs/tracks.md Normal file
View File

@ -0,0 +1,235 @@
---
layout: docs
title: HTML5 Video Text Tracks (Subtitles, Captions, Chapters)
description: Video.js support for captions, subtitles, and chapters through the use of the HTML5 video track element.
body_id: tracks
body_class: docs subpage
---
Tracks
======
Text Tracks are a function of HTML5 video for providing time triggered text to the viewer. Video.js makes tracks work across all browsers. There are currently five types of tracks:
- **Subtitles**: Translations of the dialogue in the video for when audio is available but not understood. Subtitles are shown over the video.
- **Captions**: Transcription of the dialogue, sound effects, musical cues, and other audio information for when the viewer is deaf/hard of hearing, or the video is muted. Captions are also shown over the video.
- **Chapters**: Chapter titles that are used to create navigation within the video. Typically they're in the form of a list of chapters that the viewer can click on to go to a specific chapter.
- **Descriptions** (not supported yet): Text descriptions of what's happening in the video for when the video portion isn't available, because the viewer is blind, not using a screen, or driving and about to crash because they're trying to enjoy a video while driving. Descriptions are read by a screen reader or turned into a separate audio track.
- **Metadata** (not supported yet): Tracks that have data meant for javascript to parse and do something with. These aren't shown to the user.
Creating the Text File
----------------------
Timed text requires a text file in [WebVTT](http://dev.w3.org/html5/webvtt/) format. This format defines a list of "cues" that have a start time, and end time, and text to display. [Microsoft has a builder](http://ie.microsoft.com/testdrive/Graphics/CaptionMaker/) that can help you get started on the file.
When creating captions, there's also additional (caption formatting techniques)[http://www.theneitherworld.com/mcpoodle/SCC_TOOLS/DOCS/SCC_FORMAT.HTML#style] that would be good to use, like brackets around sound effects. [ sound effect ]
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.
<code type="html">
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
data-setup='{"example_option":true}'>
<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>
</video>
</code>
Track Attributes
----------------
Additional settings for track tags.
### kind
One of the five track types listed above. Kind defaults to subtitles if no kind is included.
### label
The label for the track that will be show to the user, for example in a menu that list the different languages available for subtitles.
### default
The default attribute can be used to have a track default to showing. Otherwise the viewer would need to select their language from the captions or subtitles menu.
NOTE: For chapters, default is required if you want the chapters menu to show.
### srclang
The two-letter code (valid BCP 47 language tag) for the language of the text track, for example "en" for English. Here's a list of available language codes.
<table border="0" cellspacing="5" cellpadding="5">
<tr>
<td>
<table>
<tr><th>ab<th><td>Abkhazian</td></tr>
<tr><th>aa<th><td>Afar</td></tr>
<tr><th>af<th><td>Afrikaans</td></tr>
<tr><th>sq<th><td>Albanian</td></tr>
<tr><th>am<th><td>Amharic</td></tr>
<tr><th>ar<th><td>Arabic</td></tr>
<tr><th>an<th><td>Aragonese</td></tr>
<tr><th>hy<th><td>Armenian</td></tr>
<tr><th>as<th><td>Assamese</td></tr>
<tr><th>ay<th><td>Aymara</td></tr>
<tr><th>az<th><td>Azerbaijani</td></tr>
<tr><th>ba<th><td>Bashkir</td></tr>
<tr><th>eu<th><td>Basque</td></tr>
<tr><th>bn<th><td>Bengali (Bangla)</td></tr>
<tr><th>dz<th><td>Bhutani</td></tr>
<tr><th>bh<th><td>Bihari</td></tr>
<tr><th>bi<th><td>Bislama</td></tr>
<tr><th>br<th><td>Breton</td></tr>
<tr><th>bg<th><td>Bulgarian</td></tr>
<tr><th>my<th><td>Burmese</td></tr>
<tr><th>be<th><td>Byelorussian (Belarusian)</td></tr>
<tr><th>km<th><td>Cambodian</td></tr>
<tr><th>ca<th><td>Catalan</td></tr>
<tr><th>zh<th><td>Chinese (Simplified)</td></tr>
<tr><th>zh<th><td>Chinese (Traditional)</td></tr>
<tr><th>co<th><td>Corsican</td></tr>
<tr><th>hr<th><td>Croatian</td></tr>
<tr><th>cs<th><td>Czech</td></tr>
<tr><th>da<th><td>Danish</td></tr>
<tr><th>nl<th><td>Dutch</td></tr>
<tr><th>en<th><td>English</td></tr>
<tr><th>eo<th><td>Esperanto</td></tr>
<tr><th>et<th><td>Estonian</td></tr>
<tr><th>fo<th><td>Faeroese</td></tr>
<tr><th>fa<th><td>Farsi</td></tr>
<tr><th>fj<th><td>Fiji</td></tr>
<tr><th>fi<th><td>Finnish</td></tr>
</table>
</td>
<td>
<table>
<tr><th>fr<th><td>French</td></tr>
<tr><th>fy<th><td>Frisian</td></tr>
<tr><th>gl<th><td>Galician</td></tr>
<tr><th>gd<th><td>Gaelic (Scottish)</td></tr>
<tr><th>gv<th><td>Gaelic (Manx)</td></tr>
<tr><th>ka<th><td>Georgian</td></tr>
<tr><th>de<th><td>German</td></tr>
<tr><th>el<th><td>Greek</td></tr>
<tr><th>kl<th><td>Greenlandic</td></tr>
<tr><th>gn<th><td>Guarani</td></tr>
<tr><th>gu<th><td>Gujarati</td></tr>
<tr><th>ht<th><td>Haitian Creole</td></tr>
<tr><th>ha<th><td>Hausa</td></tr>
<tr><th>he<th><td>Hebrew</td></tr>
<tr><th>hi<th><td>Hindi</td></tr>
<tr><th>hu<th><td>Hungarian</td></tr>
<tr><th>is<th><td>Icelandic</td></tr>
<tr><th>io<th><td>Ido</td></tr>
<tr><th>id<th><td>Indonesian</td></tr>
<tr><th>ia<th><td>Interlingua</td></tr>
<tr><th>ie<th><td>Interlingue</td></tr>
<tr><th>iu<th><td>Inuktitut</td></tr>
<tr><th>ik<th><td>Inupiak</td></tr>
<tr><th>ga<th><td>Irish</td></tr>
<tr><th>it<th><td>Italian</td></tr>
<tr><th>ja<th><td>Japanese</td></tr>
<tr><th>jv<th><td>Javanese</td></tr>
<tr><th>kn<th><td>Kannada</td></tr>
<tr><th>ks<th><td>Kashmiri</td></tr>
<tr><th>kk<th><td>Kazakh</td></tr>
<tr><th>rw<th><td>Kinyarwanda (Ruanda)</td></tr>
<tr><th>ky<th><td>Kirghiz</td></tr>
<tr><th>rn<th><td>Kirundi (Rundi)</td></tr>
<tr><th>ko<th><td>Korean</td></tr>
<tr><th>ku<th><td>Kurdish</td></tr>
<tr><th>lo<th><td>Laothian</td></tr>
<tr><th>la<th><td>Latin</td></tr>
</table>
</td>
<td>
<table>
<tr><th>lv<th><td>Latvian (Lettish)</td></tr>
<tr><th>li<th><td>Limburgish ( Limburger)</td></tr>
<tr><th>ln<th><td>Lingala</td></tr>
<tr><th>lt<th><td>Lithuanian</td></tr>
<tr><th>mk<th><td>Macedonian</td></tr>
<tr><th>mg<th><td>Malagasy</td></tr>
<tr><th>ms<th><td>Malay</td></tr>
<tr><th>ml<th><td>Malayalam</td></tr>
<tr><th>mt<th><td>Maltese</td></tr>
<tr><th>mi<th><td>Maori</td></tr>
<tr><th>mr<th><td>Marathi</td></tr>
<tr><th>mo<th><td>Moldavian</td></tr>
<tr><th>mn<th><td>Mongolian</td></tr>
<tr><th>na<th><td>Nauru</td></tr>
<tr><th>ne<th><td>Nepali</td></tr>
<tr><th>no<th><td>Norwegian</td></tr>
<tr><th>oc<th><td>Occitan</td></tr>
<tr><th>or<th><td>Oriya</td></tr>
<tr><th>om<th><td>Oromo (Afan, Galla)</td></tr>
<tr><th>ps<th><td>Pashto (Pushto)</td></tr>
<tr><th>pl<th><td>Polish</td></tr>
<tr><th>pt<th><td>Portuguese</td></tr>
<tr><th>pa<th><td>Punjabi</td></tr>
<tr><th>qu<th><td>Quechua</td></tr>
<tr><th>rm<th><td>Rhaeto-Romance</td></tr>
<tr><th>ro<th><td>Romanian</td></tr>
<tr><th>ru<th><td>Russian</td></tr>
<tr><th>sm<th><td>Samoan</td></tr>
<tr><th>sg<th><td>Sangro</td></tr>
<tr><th>sa<th><td>Sanskrit</td></tr>
<tr><th>sr<th><td>Serbian</td></tr>
<tr><th>sh<th><td>Serbo-Croatian</td></tr>
<tr><th>st<th><td>Sesotho</td></tr>
<tr><th>tn<th><td>Setswana</td></tr>
<tr><th>sn<th><td>Shona</td></tr>
<tr><th>ii<th><td>Sichuan Yi</td></tr>
<tr><th>sd<th><td>Sindhi</td></tr>
</table>
</td>
<td>
<table>
<tr><th>si<th><td>Sinhalese</td></tr>
<tr><th>ss<th><td>Siswati</td></tr>
<tr><th>sk<th><td>Slovak</td></tr>
<tr><th>sl<th><td>Slovenian</td></tr>
<tr><th>so<th><td>Somali</td></tr>
<tr><th>es<th><td>Spanish</td></tr>
<tr><th>su<th><td>Sundanese</td></tr>
<tr><th>sw<th><td>Swahili (Kiswahili)</td></tr>
<tr><th>sv<th><td>Swedish</td></tr>
<tr><th>tl<th><td>Tagalog</td></tr>
<tr><th>tg<th><td>Tajik</td></tr>
<tr><th>ta<th><td>Tamil</td></tr>
<tr><th>tt<th><td>Tatar</td></tr>
<tr><th>te<th><td>Telugu</td></tr>
<tr><th>th<th><td>Thai</td></tr>
<tr><th>bo<th><td>Tibetan</td></tr>
<tr><th>ti<th><td>Tigrinya</td></tr>
<tr><th>to<th><td>Tonga</td></tr>
<tr><th>ts<th><td>Tsonga</td></tr>
<tr><th>tr<th><td>Turkish</td></tr>
<tr><th>tk<th><td>Turkmen</td></tr>
<tr><th>tw<th><td>Twi</td></tr>
<tr><th>ug<th><td>Uighur</td></tr>
<tr><th>uk<th><td>Ukrainian</td></tr>
<tr><th>ur<th><td>Urdu</td></tr>
<tr><th>uz<th><td>Uzbek</td></tr>
<tr><th>vi<th><td>Vietnamese</td></tr>
<tr><th>vo<th><td>Volapük</td></tr>
<tr><th>wa<th><td>Wallon</td></tr>
<tr><th>cy<th><td>Welsh</td></tr>
<tr><th>wo<th><td>Wolof</td></tr>
<tr><th>xh<th><td>Xhosa</td></tr>
<tr><th>yi<th><td>Yiddish</td></tr>
<tr><th>yo<th><td>Yoruba</td></tr>
<tr><th>zu<th><td>Zulu</td></tr>
</table>
</td>
</tr>
</table>

2
src/controls.js vendored
View File

@ -764,7 +764,7 @@ _V_.MuteToggle = _V_.Button.extend({
/* Poster Image
================================================================================ */
_V_.Poster = _V_.Button.extend({
_V_.PosterImage = _V_.Button.extend({
init: function(player, options){
this._super(player, options);

2
src/core.js
View File

@ -63,7 +63,7 @@ VideoJS.options = {
// Included control sets
components: {
"poster": {},
"posterImage": {},
"textTrackDisplay": {},
"loadingSpinner": {},
"bigPlayButton": {},

2
src/player.js
View File

@ -84,6 +84,7 @@ _V_.Player = _V_.Component.extend({
}
// Tracks defined in tracks.js
this.textTracks = [];
if (options.tracks && options.tracks.length > 0) {
this.addTextTracks(options.tracks);
}
@ -877,7 +878,6 @@ _V_.Player = _V_.Component.extend({
if (prefix == "webkit") {
isFullScreen = prefix + "IsFullScreen";
} else {
_V_.log("moz here")
isFullScreen = prefix + "FullScreen";
}
}

60
src/tracks.js
View File

@ -242,7 +242,7 @@ _V_.Track = _V_.Component.extend({
parseCues: function(srcContent) {
var cue, time, text,
lines = srcContent.split("\n"),
line = "";
line = "", id;
for (var i=1, j=lines.length; i<j; i++) {
// Line 0 should be 'WEBVTT', so skipping i=0
@ -251,14 +251,23 @@ _V_.Track = _V_.Component.extend({
if (line) { // Loop until a line with content
// First line could be an optional cue ID
// Check if line has the time separator
if (line.indexOf("-->") == -1) {
id = line;
// Advance to next line for timing.
line = _V_.trim(lines[++i]);
} else {
id = this.cues.length;
}
// First line - Number
cue = {
id: line, // Cue Number
id: id, // Cue Number
index: this.cues.length // Position in Array
};
// Second line - Time
line = _V_.trim(lines[++i]);
// Timing line
time = line.split(" --> ");
cue.startTime = this.parseCueTime(time[0]);
cue.endTime = this.parseCueTime(time[1]);
@ -286,21 +295,40 @@ _V_.Track = _V_.Component.extend({
parseCueTime: function(timeText) {
var parts = timeText.split(':'),
time = 0,
flags, seconds;
// hours => seconds
time += parseFloat(parts[0])*60*60;
// minutes => seconds
time += parseFloat(parts[1])*60;
// get seconds and flags
// TODO: Make additional cue layout settings work
flags = parts[2].split(/\s+/)
// Seconds is the first part before any spaces.
hours, minutes, other, seconds, ms, flags;
// Check if optional hours place is included
// 00:00:00.000 vs. 00:00.000
if (parts.length == 3) {
hours = parts[0];
minutes = parts[1];
other = parts[2];
} else {
hours = 0;
minutes = parts[0];
other = parts[1];
}
// Break other (seconds, milliseconds, and flags) by spaces
// TODO: Make additional cue layout settings work with flags
other = other.split(/\s+/)
// Remove seconds. Seconds is the first part before any spaces.
seconds = other.splice(0,1)[0];
// Could use either . or , for decimal
seconds = flags.splice(0,1)[0].split(/\.|,/);
time += parseFloat(seconds);
// add miliseconds
seconds = seconds.split(/\.|,/);
// Get milliseconds
ms = parseFloat(seconds[1]);
seconds = seconds[0];
// hours => seconds
time += parseFloat(hours) * 3600;
// minutes => seconds
time += parseFloat(minutes) * 60;
// Add seconds
time += parseFloat(seconds);
// Add milliseconds
if (ms) { time += ms/1000; }
return time;
},