2015-09-29 20:39:05 +02:00
2014-10-17 21:55:53 +03:00
2016-02-24 08:25:04 +02:00
# [Video.js - HTML5 Video Player](http://videojs.com)
[](https://travis-ci.org/videojs/video.js)
[](https://coveralls.io/github/videojs/video.js?branch=master)
2016-08-13 05:39:18 +02:00
[](http://slack.videojs.com)
2016-02-24 08:25:04 +02:00
[](https://nodei.co/npm/video.js/)
2011-10-01 03:28:43 +03:00
2015-09-29 22:05:26 +02:00
> Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through [plugins](https://github.com/videojs/video.js/wiki/Plugins)). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over ~~50,000~~ ~~100,000~~ 200,000 websites.
2011-11-29 22:40:05 +03:00
2014-10-17 21:55:53 +03:00
## Quick start
2016-02-02 21:40:43 +02:00
Thanks to the awesome folks over at [Fastly ](http://www.fastly.com/ ), there's a free, CDN hosted version of Video.js that anyone can use.
Also, check out the [Getting Started ](http://videojs.com/getting-started/ ) page on our website which has the latest urls as well.
Simply add these includes to your document's
2014-10-17 21:55:53 +03:00
`<head>` :
```html
2016-03-29 23:50:51 +02:00
< link href = "//vjs.zencdn.net/5.8/video-js.min.css" rel = "stylesheet" >
< script src = "//vjs.zencdn.net/5.8/video.min.js" > < / script >
2014-10-17 21:55:53 +03:00
```
Then, whenever you want to use Video.js you can simply use the `<video>` element as your normally would, but with an additional `data-setup` attribute containing any Video.js options. These options
2016-02-02 21:40:43 +02:00
can include any Video.js option plus potential [plugin ](http://videojs.com/plugins/ ) options, just make sure they're valid JSON!
2014-10-17 21:55:53 +03:00
```html
< video id = "really-cool-video" class = "video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="really-cool-video-poster.jpg"
data-setup='{}'>
2016-01-26 03:11:26 +02:00
< source src = "really-cool-video.mp4" type = "video/mp4" >
< source src = "really-cool-video.webm" type = "video/webm" >
2014-10-17 21:55:53 +03:00
< p class = "vjs-no-js" >
To view this video please enable JavaScript, and consider upgrading to a web browser
that < a href = "http://videojs.com/html5-video-support/" target = "_blank" > supports HTML5 video< / a >
< / p >
< / video >
```
If you don't want to use auto-setup, you can leave off the `data-setup` attribute and initialize a video element manually.
```javascript
var player = videojs('really-cool-video', { /* Options */ }, function() {
console.log('Good to go!');
this.play(); // if you don't trust autoplay for some reason
// How about an event listener?
this.on('ended', function() {
console.log('awww...over so soon?');
});
});
```
2015-09-29 20:39:05 +02:00
If you're ready to dive in, the [documentation ](http://docs.videojs.com ) is the first place to go for more information.
2013-01-26 02:22:14 +03:00
2013-02-26 01:13:58 +03:00
## Contributing
2016-09-29 00:17:18 +02:00
Video.js is a free and open source library, and we appreciate any help you're willing to give. Check out the [contributing guide ](/CONTRIBUTING.md ).
2013-01-05 03:58:23 +03:00
2015-08-20 23:57:59 +02:00
_Video.js uses [BrowserStack ](https://browserstack.com ) for compatibility testing_
2013-07-18 03:51:29 +03:00
## Building your own Video.js from source
2016-09-29 00:17:18 +02:00
To build your own custom version read the section on [contributing code ](/CONTRIBUTING.md#contributing-code ) and ["Building your own copy" ](/CONTRIBUTING.md#building-your-own-copy-of-videojs ) in the contributing guide.
2013-04-29 03:35:21 +03:00
## License
2013-07-18 03:51:29 +03:00
Video.js is licensed under the Apache License, Version 2.0. [View the license file ](LICENSE )
