🏳️Video.js - Make your player yours | Video.js

Website faviconvideojs.com

The world's most popular open source HTML5 player framework

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)