web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-17 10:46:00 +02:00
Code Releases Activity

Updated code samples to support github highlighting

Browse Source
This commit is contained in:
Steve Heffernan 2012-11-14 14:51:31 -08:00
parent 2c3f7f7177
commit 31033659bc
4 changed files with 82 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
docs/options.md
View File

@ -6,27 +6,21 @@ Setting Options
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.
<code type="html">
<video controls autoplay preload="auto" ...>
</code>
```html
<video controls autoplay preload="auto" ...>
```
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.
<code type="html">
<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>
</code>
```html
<video data-setup='{ "controls": true, "autoplay": false, "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 javascript setup function.
<code type="javascript">
_V_("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" });
</code>
```js
_V_("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" });
```
Individual Options
@ -36,42 +30,34 @@ Individual Options
> 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>
```html
<video controls="true" ...>
```
RIGHT
<code type="html">
<video controls ...>
</code>
```html
<video controls ...>
```
> 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>
```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.
<code type="html">
<video autoplay ...>
or
{ "autoplay": true }
</code>
```html
<video autoplay ...>
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.
@ -82,50 +68,40 @@ The preload attribute informs the browser whether or not the video data should b
'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>
```html
<video preload ...>
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.
<code type="html">
<video poster="myPoster.jpg" ...>
or
{ "poster": "myPoster.jpg" }
</code>
```html
<video poster="myPoster.jpg" ...>
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.
<code type="html">
<video loop ...>
or
{ "loop": "true" }
</code>
```html
<video loop ...>
or
{ "loop": "true" }
```
### width ###
The width attribute sets the display width of the video.
<code type="html">
<video width="640" ...>
or
{ "width": 640 }
</code>
```html
<video width="640" ...>
or
{ "width": 640 }
```
### height ###
The height attribute sets the display height of the video.
<code type="html">
<video height="480" ...>
or
{ "height": 480 }
</code>
```html
<video height="480" ...>
or
{ "height": 480 }
```

52
docs/setup.md
View File

@ -11,24 +11,24 @@ You can download the Video.js source and host it on your own servers, or use the
> 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.
### CDN Version ###
<code type="html">
```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/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">
```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>
<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.
@ -45,31 +45,31 @@ With Video.js you just use an HTML5 video tag to embed a video. Video.js will th
Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.
<code type="html">
```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>
</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">
```js
_V_("example_video_1", {}, function(){
// Player (this) is initialized and ready.
});
_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.

8
docs/skins.md
View File

@ -7,19 +7,19 @@ You can view the uncompressed CSS for the default skin by downloading the latest
You can either override styles in the default skin:
{% highlight css %}
```css
.vjs-default-skin .vjs-play-progress { background: #900; }
{% endhighlight %}
```
Or remove the 'vjs-default-skin' class from the video tag and create your own skin.
{% highlight html %}
```html
<video class="video-js my-custom-skin" ...>
{% endhighlight %}
```
More custom skins will be available for download soon. If you have one you'd like to contribute back, please email it to <script type="text/javascript">eval(decodeURIComponent('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%73%6b%69%6e%73%40%76%69%64%65%6f%6a%73%2e%63%6f%6d%22%3e%73%6b%69%6e%73%40%76%69%64%65%6f%6a%73%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script>.

4
docs/tracks.md
View File

@ -19,7 +19,7 @@ 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">
```html
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
@ -32,7 +32,7 @@ Once you have your WebVTT file created, you can add it to Video.js using the tra
</video>
</code>
```
Track Attributes
----------------