- Notifications
You must be signed in to change notification settings - Fork0
Video.js - open source HTML5 & Flash video player
License
JavaScriptsShare/video.js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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 (throughplugins). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over
50,000100,000200,000400,000 websites.
Thanks to the awesome folks over atFastly, there's a free, CDN hosted version of Video.js that anyone can use. Add these tags to your document's<head>:
<linkhref="//vjs.zencdn.net/7.3.0/video-js.min.css"rel="stylesheet"><scriptsrc="//vjs.zencdn.net/7.3.0/video.min.js"></script>
For the latest version of video.js and URLs to use, check out theGetting Started page on our website.
Video.js version 7 (and newer) CDN builds do not send any data to Google Analytics.
In older versions of Video.js (6 and earlier), in thevjs.zencdn.net CDN-hosted versions we include astripped down Google Analytics pixel that tracks a random sampling (currently 1%) of players loaded from the CDN. This allows us to see (roughly) what browsers are in use in the wild, along with other useful metrics such as OS and device. If you'd like to disable analytics, you can simply include the following global before including Video.js via the free CDN:
<script>window.HELP_IMPROVE_VIDEOJS=false;</script>
Alternatively, you can include Video.js by getting it fromnpm, downloading fromGitHub releases or by including it viaunpkg or another JavaScript CDN like CDNjs. These releasesdo not include Google Analytics tracking at all.
<!-- unpkg : use the latest version of Video.js --><linkhref="https://unpkg.com/video.js/dist/video-js.min.css"rel="stylesheet"><scriptsrc="https://unpkg.com/video.js/dist/video.min.js"></script><!-- unpkg : use a specific version of Video.js (change the version numbers as necessary) --><linkhref="https://unpkg.com/video.js@6.11.0/dist/video-js.min.css"rel="stylesheet"><scriptsrc="https://unpkg.com/video.js@6.11.0/dist/video.min.js"></script><!-- cdnjs : use a specific version of Video.js (change the version numbers as necessary) --><linkhref="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.7.3/video-js.min.css"rel="stylesheet"><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.7.3/video.min.js"></script>
Next, using Video.js is as simple as creating a<video> element, but with an additionaldata-setup attribute. At a minimum, this attribute must have a value of'{}', but it can include any Video.jsoptions - just make sure it contains valid JSON!
<videoid="my-player"class="video-js"controlspreload="auto"poster="//vjs.zencdn.net/v/oceans.png"data-setup='{}'><sourcesrc="//vjs.zencdn.net/v/oceans.mp4"type="video/mp4"></source><sourcesrc="//vjs.zencdn.net/v/oceans.webm"type="video/webm"></source><sourcesrc="//vjs.zencdn.net/v/oceans.ogv"type="video/ogg"></source><pclass="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that<ahref="https://videojs.com/html5-video-support/"target="_blank"> supports HTML5 video</a></p></video>
When the page loads, Video.js will find this element and automatically setup a player in its place.
If you don't want to use automatic setup, you can leave off thedata-setup attribute and initialize a<video> element manually using thevideojs function:
varplayer=videojs('my-player');
Thevideojs function also accepts anoptions object and a callback to be invokedwhen the player is ready:
varoptions={};varplayer=videojs('my-player',options,functiononPlayerReady(){videojs.log('Your player is ready!');// In this context, `this` is the player that was created by Video.js.this.play();// How about an event listener?this.on('ended',function(){videojs.log('Awww...over so soon?!');});});
If you're ready to dive in, theGetting Started page anddocumentation are the best places to go for more information. If you get stuck, head over to ourSlack channel!
Video.js is a free and open source library, and we appreciate any help you're willing to give - whether it's fixing bugs, improving documentation, or suggesting new features. Check out thecontributing guide for more!
Video.js usesBrowserStack for compatibility testing.
Please note that this project is released with aContributor Code of Conduct. By participating in this project you agree to abide by its terms.
Video.js islicensed under the Apache License, Version 2.0.
About
Video.js - open source HTML5 & Flash video player
Resources
License
Code of conduct
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Languages
- JavaScript96.4%
- CSS3.5%
- HTML0.1%