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 。
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>\”>
<!-- 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对象和播放器准备时要调用的回调：
video.js.
this.play();
// How about an event listener?
this.on(\’ended\’, function() {
videojs.log(\’Awww…over so soon?!\’);
});
});\”>
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。的注册商标。
