Same HTML/CSS skin and JavaScript API for HTML5 and Flash Video
Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video, today. This is also known as an "HTML5 Video Player". Video.js provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like fullscreen and subtitles, manages the fallback to Flash or other playback technologies when HTML5 video isn't supported, and also provides a consistent JavaScript API for interacting with the video.
HTML is the markup language that makes up every page on the web. The newest version, HTML5, includes specifications for a <video> tag, that's meant to allow web developers to add a video to a page in the same way they would add an image. In order for this to work, web browser developers have built video playback functionality into their browsers.
Playing video in a web page may not seem so special since you can already view video on a web page through plugins like Flash Player, Quicktime, and Silverlight. However, this is actually a big step forward for standardizing video playback across web browsers and devices. The goal is that in the future, developers will only need to use one method for embedding a video, based on open standards (not controlled by one company), and it will work everywhere. Additionally, HTML5 video can improve video performance by not requiring a second application (a plugin) to be running, and opens the door to creating interactions between video and other elements on the page that hasn't been possible before.
An HTML5 Video Player is a JavaScript library that builds a custom set of controls over top of the HTML5 video element to provide a consistent look between HTML5 browsers. Video.js builds on this by fixing many cross browser bugs or inconsistencies, adding new features that haven't been implemented by all browsers (like fullscreen and subtitles), as well as providing one consistent JavaScript API for both HTML5, Flash, and other playback technologies.
Video.js is an open source project, which allows everyone to dig into the code and contribute updates. Brightcove hosts the project on their CDN for free which means:
With other web players, creating a custom skin requires a complicated skinning language, or isn't an option at all. Video.js uses the same CSS code for HTML5, Flash, and any other playback technology, opening the door for customization using markup we're already familiar with.
HTML5, Flash, and other playback technologies all have different JavaScript APIs for interacting with the video. Video.js provides a single API that can be used consistently across platforms so you only have to write code once.
Most Flash video players are HUGE. Hundreds of additional kilobytes loaded in addition to the video being played. The Video.js custom Flash fallback player is less than 10k! This means your videos load faster even when Flash is used.
Whether a user has the latest version of a browser, or something ancient like Internet Explorer 6, they'll get a similar experience with Video.js which uses a super-lightweight Flash player for browsers that don't support HTML5 video.
Many mobile devices perform better using HTML5 to play video, while others simply require it. Video.js supports iOS (iPhone, iPad), Android, Windows Phone 7, Blackberry, and others.
Web video formats can get complicated. Video.js can make it easier by using a single MP4 file for all users, or additional formats like WebM, Ogg, and even HTTP Live Streaming for greater HTML5 compatibility.
| Browsers | Ogg Theora | MP4 | WebM | Market Share |
|---|---|---|---|---|
| Firefox 4.0 + | 17.06% | |||
| Firefox 3.5 - 3.6 | 4.90% | |||
| Safari 3 + | 7.45% | |||
| Chrome 6 + | 27.09% | |||
| Chrome 3 - 5 | 6.19% | |||
| Opera 10.6 + | 3.59% | |||
| Opera 10.5 | 0.48% | |||
| IE 9 + | 10.74% | |||
| All HTML5 Browsers | 59.31% | 51.47% | 47.74% | 77.50% |
For Browsers & devices that don't support HTML5, Video.js provides a lightweight flash player.
| Browsers | Ogg Theora | MP4 | WebM | Market Share |
|---|---|---|---|---|
| All Flash Browsers | * | 99.0% |
* Adobe has said they'll support WebM in a future release.
Second SetupAll of the Video.js files are hosted for you on a CDN sponsored by Brightcove, so there’s no need to download and host them yourself (although that’s still an option).
To get Video.js running on a web page, just copy the following lines into your HTML document:
The javascript must be in the
for older IEs to accept the HTML5 tags. If you already have an HTML5 shiv for video you can put it anywhere.<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
Use the HTML5 Video Tag as normal, with added classes and a data-setup attribute. Also check out our Embed Builder.
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
<source src="my_video.mp4" type='video/mp4'>
<source src="my_video.webm" type='video/webm'>
</video>
Profit! You should now see our demo video playing on your web page. From here you can customize the video tag using the embed builder, change the video skin, or read more in the docs.
Don’t forget to follow us on twitter and/or sign up for our email newsletter to stay up-to-date on new features and versions.
(required for HTTPS)
Updated plugins for other platforms coming soon.