video.js README

The project's README from github.com/videojs/video.js. As one markdown file: README.md.

Video.js logo

Video.js - Web Video Player & Framework

NPM

Update: Big changes coming in Video.js 10, early 2026! Read the discussion.

Video.js is a full featured, open source video player for all web-based platforms.

Right out of the box, Video.js supports all common media formats used on the web including streaming formats like HLS and DASH. It works on desktops, mobile devices, tablets, and web-based Smart TVs. It can be further extended and customized by a robust ecosystem of plugins.

Video.js was started in May 2010 and since then:

Table of Contents

Quick Start

Thanks to the awesome folks over at Fastly, there's a free, CDN hosted version of Video.js that anyone can use. Add these tags to your document's <head>:

<link href="//vjs.zencdn.net/8.23.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/8.23.6/video.min.js"></script>

Alternatively, you can include Video.js by getting it from npm, downloading it from GitHub releases or by including it via unpkg or another JavaScript CDN, like CDNjs.

<!-- unpkg : use the latest version of Video.js -->
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>

<!-- unpkg : use a specific version of Video.js (change the version numbers as necessary) -->
<link href="https://unpkg.com/[email protected]/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/video.min.js"></script>

<!-- cdnjs : use a specific version of Video.js (change the version numbers as necessary) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.24.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.24.0/video.min.js"></script>

Next, using Video.js is as simple as creating a <video> element, but with an additional data-setup attribute. At a minimum, this attribute must have a value of '{}', but it can include any Video.js options - just make sure it contains valid JSON!

<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="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 the data-setup attribute and initialize a <video> element manually using the videojs function:

var player = videojs('my-player');

The videojs function also accepts an options object and a callback to be invoked when the player is ready:

var options = {};

var player = videojs('my-player', options, function onPlayerReady() {
  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, the Getting Started page and documentation are the best places to go for more information. If you get stuck, head over to our Slack!

Contributing

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 the contributing guide for more! Contributions and project decisions are overseen by the Video.js Technical Steering Committee (TSC).

By submitting a pull request, you agree that your contribution is provided under the Apache 2.0 License and may be included in future releases. No contributor license agreement (CLA) has ever been required for contributions to Video.js. See the Developer's Certificate of Origin 1.1 .

Code of Conduct

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

License

Video.js is licensed under the Apache License, Version 2.0. "Video.js" is a registered trademark of Brightcove, Inc.

Sponsorship

Project development is sponsored by the role of Corporate Shepherd, held by various companies throughout the project history:

Video.js uses BrowserStack for compatibility testing.

The free CDN-hosted copy of the libray is sponsored by Fastly.

Website hosting is sponsored by Netlify

video.js (videojs/video.js)

Searching Database…

40K ·GitHub
Video.js
这是什么东西？Video.js 是一个免费开源的视频播放器，适用于所有基于网页的平台：它是一个功能齐全的 HTML5 播放器，同时也可以作为一个框架（v10），用来在 HTML 和 React 中构建播放器。
它是面向开发者的框架，还是可以随手放进网页就能用的现成播放器？两者都是：在页面上放一个带 data-setup 属性的元素就能得到一个可用的播放器，同时它也是一个框架，可以用数百个现成的插件来扩展。
怎么把它添加到我的网站上？可以从免费的 Fastly CDN、npm、GitHub release，或者 unpkg/CDNjs 引入。一个带 data-setup 属性的元素（哪怕值只是 '{}'）会在页面加载时自动初始化，你也可以用 videojs() 函数手动创建播放器。
它到底能在哪些地方运行——只有桌面浏览器吗？网页能运行的地方它都能运行：台式电脑、手机、平板，以及基于网页的智能电视。
真的可以免费使用吗？许可证上有没有什么坑？它是一个基于 Apache License 2.0 的免费开源库——也不要求贡献者签署 CLA。唯一的坑是：'Video.js' 是 Brightcove, Inc. 的注册商标。
Video.js 经过了多充分的实战检验？非常充分：它始于 2010 年 5 月，多年来已被数百万网站使用；仅 CDN 托管的版本每月就服务数十亿终端用户，拥有 900 多位核心贡献者和数百个插件。
Video.js 10 会有什么变化？README 预告了 2026 年初 Video.js 10 将带来重大变化，并附有一个讨论链接；这个版本被定位为面向 HTML 和 React 的媒体播放器框架。
我可以跳过自动初始化吗？可以——不加 data-setup 属性，改用 videojs() 函数手动初始化。这个函数还可以接受一个选项对象和一个在播放器就绪时调用的回调函数。
What are similar projects?DPlayer, react-player, plyr, hls.js, flv.js, BBLL, GSYVideoPlayer, android-airplay-server
Which topics is it in?smart-tv, dash, hls, player, media-player, html5, video-player, svelte, streaming, video, vue, customization
Creator
videojs
Size
257.2 MB
Stars
40K
Updated
CommitOct 19Release[email protected]Oct 12
Age
16y
Commits · 90 Days