Make your player yours with the world's most popular open source HTML5 player framework
---------------------------------------------------------------------------------------
Video Player is loading.
Play Video
PlaySkip BackwardSkip Forward
Mute
Current Time 0:00
/
Duration 0:25
Loaded: 19.77%
0:00
Stream Type LIVE
Seek to live, currently behind liveLIVE
Remaining Time \-0:25
1x
Playback Rate
Chapters
* Chapters
Descriptions
* descriptions off, selected
Captions
* captions settings, opens captions settings dialog
* captions off, selected
Audio Track
* default, selected
Picture-in-PictureFullscreen
This is a modal window.
Beginning of dialog window. Escape will cancel and close the window.
TextColorWhiteBlackRedGreenBlueYellowMagentaCyanOpacityOpaqueSemi-Transparent
Text BackgroundColorBlackWhiteRedGreenBlueYellowMagentaCyanOpacityOpaqueSemi-TransparentTransparent
Caption Area BackgroundColorBlackWhiteRedGreenBlueYellowMagentaCyanOpacityTransparentSemi-TransparentOpaque
Font Size50%75%100%125%150%175%200%300%400%
Text Edge StyleNoneRaisedDepressedUniformDrop shadow
Font FamilyProportional Sans-SerifMonospace Sans-SerifProportional SerifMonospace SerifCasualScriptSmall Caps
ResetDone
Close Modal Dialog
End of dialog window.
[Get Started](/getting-started)[Demos](/advanced)
Swap Theme
* [city](/city)
* [fantasy](/fantasy)
* [forest](/forest)
* [sea](/sea)
Features
--------
Why Video.js?
Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and modern streaming formats, as well as YouTube and Vimeo.
It supports video playback on desktop and mobile devices. The project was started mid 2010, and now has hundreds of contributors and is used on over 450,000 websites.
### Plays anything
Plays “traditional” file formats such as MP4 and WebM, but also supports adaptive streaming formats such as HLS and DASH. There’s even a special UI for live streams!
### Easy to style
Video.js is designed to be a reliable and consistent base to build on top of. The player looks great out of the box, but can be easily styled with a little bit of extra CSS.
### 100s of plugins
When you need to add additional functionality, a well-documented plugin architecture has your back. The community has already built hundreds of skins and plugins that you can install, such as Chromecast, IMA, even VR.
### Supported everywhere
Your video should work everywhere your app does. The team makes an effort to support every modern browser we can, including desktop and mobile.
Used By
-------
Built by the community, used by the professionals
Example
-------
Playlist plugin
The advanced example includes the playlist plugin, along with some useful details such as what all of the player properties are, and what events have fired and how often.
Volume100
Playback Rate1
Controls
Fluid
Mute
Loop
Video Player is loading.
Play Video
PlaySkip BackwardSkip Forward
Mute
Current Time 0:00
/
Duration \-:-
Loaded: 0%
0:00
Stream Type LIVE
Seek to live, currently behind liveLIVE
Remaining Time \-\-:-
1x
Playback Rate
Chapters
* Chapters
Descriptions
* descriptions off, selected
Captions
* captions settings, opens captions settings dialog
* captions off, selected
Audio Track
Picture-in-PictureFullscreen
This is a modal window.
No compatible source was found for this media.
Beginning of dialog window. Escape will cancel and close the window.
TextColorWhiteBlackRedGreenBlueYellowMagentaCyanOpacityOpaqueSemi-Transparent
Text BackgroundColorBlackWhiteRedGreenBlueYellowMagentaCyanOpacityOpaqueSemi-TransparentTransparent
Caption Area BackgroundColorBlackWhiteRedGreenBlueYellowMagentaCyanOpacityTransparentSemi-TransparentOpaque
Font Size50%75%100%125%150%175%200%300%400%
Text Edge StyleNoneRaisedDepressedUniformDrop shadow
Font FamilyProportional Sans-SerifMonospace Sans-SerifProportional SerifMonospace SerifCasualScriptSmall Caps
ResetDone
Close Modal Dialog
End of dialog window.
1. Now Playing
Up NextDisney's Oceans
0:45
2. Now Playing
Up NextSintel
14:48
3. Now Playing
Up NextAdvanced Bip Bop
30:00
4. Now Playing
Up NextElephant's Dream (HLS with captions, audio description and chapters)
10:53
5. Now Playing
Up NextElephant's Dream (mp4 with separate text track audio description, captions, and chapters)
10:53
6. Now Playing
Up NextTears of Steel
12:13
7. Now Playing
Up NextBig Buck Bunny
9:56
* error{"code":4,"message":"No compatible source was found for this media."}
* src//vjs.zencdn.net/(…)oceans.webm
* currentSrc//vjs.zencdn.net/(…)oceans.webm
* crossOrigin
* networkState2
* preload"auto"
* buffered\[0.00, 0.00\]
* readyState0
* seekingfalse
* currentTime0
* durationnull
* pausedtrue
* defaultPlaybackRate1
* playbackRate1
* played
* seekable\[0.00, 0.00\]
* endedfalse
* autoplayfalse
* loopfalse
* controlstrue
* volume1
* mutedfalse
* audioTracks{"length":0}
* videoTracks{"length":0}
* textTracks{"length":0}
* width0
* height0
* currentWidth1002
* currentHeight572.562
* videoWidth0
* videoHeight0
* poster//vjs.zencdn.net/(…)oceans.png
* readyState0
* loadstart2
* suspend0
* abort0
* error3
* emptied1
* stalled0
* loadedmetadata0
* loadeddata0
* canplay0
* canplaythrough0
* playing0
* waiting0
* seeking0
* seeked0
* ended0
* durationchange0
* timeupdate1
* progress0
* play0
* pause0
* ratechange0
* resize0
* volumechange0
Sponsors
--------
The folks who help make this happen
Brightcove is the main sponsor of the project, employing many of the core members and investing thousands of engineering hours every year in Video.js and Video.js plugins.
The Brightcove Player is built on Video.js and used on thousands of video websites, ensuring Video.js can handle the most professional use cases.
[
Corporate Shepherd
](https://brightcove.com)
[
CDN
](https://fastly.com)
[
Website
](https://mux.com)
[
Device Testing
](https://browserstack.com)
[
Static Hosting
](https://netlify.com)
Implementation
--------------
When to use Video.js over the <video> element?
Feature
Video.js
HTML5
Cross-browser "Skins"
Looks good everywhere with CSS-based Skins
Looks different in every browser
Adaptive Streaming (adjusting to the viewer’s bandwidth)
HLS supported everywhere. DASH supported everywhere but iOS Safari.
HLS and DASH not playable in Chrome or Firefox by default.
Social Video Platforms
Play Youtube, Vimeo, and more with added plugins.
Not supported
Community-built Plugins
Hundreds!
Probably?
Browser API Inconsistencies
Makes them disappear
Many
Get involved
------------
We make it easy for anyone to jump in and be a part of the Video.js community.
[
Demuxed conference
](https://demuxed.com)
[
video js slack
](https://slack.videojs.com)
[
Video-dev / #Videojs
](https://video-dev.org)
[
Video js twitter
](https://twitter.com/videojs)
[
Code of conduct
](https://github.com/videojs/video.js/blob/main/CODE_OF_CONDUCT.md)
[
Demuxed conference
](https://demuxed.com)