mirror of
https://github.com/videojs/video.js.git
synced 2024-11-24 08:42:25 +02:00
64 lines
3.3 KiB
Markdown
64 lines
3.3 KiB
Markdown
|
|
|
|
# [Video.js - HTML5 Video Player](http://videojs.com)
|
|
[](https://travis-ci.org/videojs/video.js)
|
|
[](https://coveralls.io/github/videojs/video.js?branch=master)
|
|
|
|
[](https://nodei.co/npm/video.js/)
|
|
|
|
> 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.
|
|
|
|
## Quick start
|
|
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
|
|
`<head>`:
|
|
|
|
```html
|
|
<link href="//vjs.zencdn.net/5.0/video-js.min.css" rel="stylesheet">
|
|
<script src="//vjs.zencdn.net/5.0/video.min.js"></script>
|
|
```
|
|
|
|
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
|
|
can include any Video.js option plus potential [plugin](http://videojs.com/plugins/) options, just make sure they're valid JSON!
|
|
|
|
```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='{}'>
|
|
<source src="really-cool-video.mp4" type="video/mp4">
|
|
<source src="really-cool-video.webm" type="video/webm">
|
|
<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?');
|
|
});
|
|
});
|
|
```
|
|
|
|
If you're ready to dive in, the [documentation](http://docs.videojs.com) is the first place to go for more information.
|
|
|
|
## Contributing
|
|
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).
|
|
|
|
_Video.js uses [BrowserStack](https://browserstack.com) for compatibility testing_
|
|
## Building your own Video.js from source
|
|
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.
|
|
## License
|
|
|
|
Video.js is licensed under the Apache License, Version 2.0. [View the license file](LICENSE)
|