video.js网络视频播放器和框架
更新： 2026年初的video.js 10中发生了重大变化！阅读讨论。
video.js是所有基于Web的平台的完整，开源的视频播放器。
开箱即用， video.js支持网络上使用的所有常见媒体格式，包括HLS和DASH等流媒体格式。它可用于台式机，移动设备，平板电脑和基于Web的智能电视。可以通过强大的插件生态系统进一步扩展和自定义它。
video.js于2010年5月开始，此后：
- 数以百万计的网站随着时间的推移使用了视频J（源构建）
- 每月只有CDN托管副本的数十亿个最终用户（源统计）
- 900多个video.js核心的惊人贡献者
- 数百个插件
目录
- 快速开始
- 贡献
- 行为守则
- 执照
快速开始
多亏了迅速的很棒的人们，有一个免费的CDN托管版本的video.js版本。将这些标签添加到您的文档的<head> ：
< link href =" //vjs.zencdn.net/8.23.3/video-js.min.css " rel =" stylesheet " >
< script src =" //vjs.zencdn.net/8.23.3/video.min.js " > </ script >另外，您可以通过从NPM获取视频，从github发行或通过unpkg或其他JavaScript CDN（例如CDNJS）来包含video.js 。
<!-- unpkg : use the latest version of video.js -->
< link href =" https://unpk*g.co*m/*video\.js/dist/video-js.min.css " rel =" stylesheet " >
< script src =" https://u*np*kg.co*m/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.c*o**m/video\.js@8.23.3/dist/video-js.min.css " rel =" stylesheet " >
< script src =" https://unpkg*.c**om/video\.js@8.23.3/dist/video.min.js " > </ script >
<!-- cdnjs : use a specific version of video.js (change the version numbers as necessary) -->
< link href =" https://cdnjs.**c*loudflare.com/ajax/libs/video\.js/8.23.3/video-js.min.css " rel =" stylesheet " >
< script src =" https://cdnjs.*clou*df*lare.com/ajax/libs/video\.js/8.23.3/video.min.js " > </ script >
接下来，使用video.js就像创建<video>元素一样简单，但具有附加的data-setup属性。至少，此属性必须具有'{}'的值，但是它可以包含任何video.js选项 - 只需确保它包含有效的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://video*js*.c*om/html5-video-support/ " target =" _blank " >
supports HTML5 video
</ a >
</ p >
</ video >当页面加载时， video.js会找到此元素并自动设置播放器。
如果您不想使用自动设置，则可以使用videojs函数手动删除data-setup属性，并初始化<video>元素：
var player = videojs ( 'my-player' ) ; videojs函数还接受一个options对象和播放器准备时要调用的回调：
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?!' ) ;
} ) ;
} ) ;
如果您准备好潜水，那么入门页面和文档是获得更多信息的最佳场所。如果您卡住了，请前往我们的懈怠！
贡献
video.js是一个免费的开源库，我们感谢您愿意提供的任何帮助 - 无论是修复错误，改进文档还是建议新功能。查看贡献指南以获取更多信息！
video.js使用浏览器进行兼容性测试。
行为守则
请注意，该项目已使用贡献者的行为准则发布。通过参加该项目，您同意遵守其条款。
执照
video.js已获得Apache许可证的许可，版本2.0。
video.js是Brightcove，Inc。的注册商标。
通过命令行克隆项目: