Video.js - HTML5视频播放器
Video.js是一个从零开始为HTML5世界打造的网页视频播放器。它支持HTML5视频和媒体源扩展,以及通过插件支持其他播放技术,如YouTube和Vimeo。它支持在桌面和移动设备上播放视频。这个项目始于2010年中期,现在这个播放器已被超过
50,000100,000200,000400,000700,000个网站使用。
目录
快速开始
感谢Fastly的优秀团队,现在有一个免费的、CDN托管的Video.js版本供所有人使用。将这些标签添加到你文档的<head>
中:
<link href="//vjs.zencdn.net/8.3.0/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/8.3.0/video.min.js"></script>
要获取最新版本的video.js及使用的URL,请查看我们网站上的入门页面。
Video.js 7版本(及更新版本)的CDN构建不会向Google Analytics发送任何数据。
在Video.js的旧版本(6及更早版本)中,在vjs.zencdn.net
CDN托管的版本中,我们包含了一个精简版的Google Analytics像素,它会跟踪从CDN加载的播放器的随机样本(目前为1%)。这允许我们大致了解野外使用的浏览器情况,以及其他有用的指标,如操作系统和设备。如果你想禁用分析,可以在通过免费CDN包含Video.js之前简单地包含以下全局变量:
<script>window.HELP_IMPROVE_VIDEOJS = false;</script>
或者,你可以通过从npm获取、从GitHub releases下载或通过unpkg或其他JavaScript CDN(如CDNjs)包含Video.js。这些发布版本完全不包含Google Analytics跟踪。
<!-- unpkg:使用最新版本的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:使用特定版本的Video.js(根据需要更改版本号) -->
<link href="https://unpkg.com/video.js@8.3.0/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js@8.3.0/dist/video.min.js"></script>
<!-- cdnjs:使用特定版本的Video.js(根据需要更改版本号) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/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">
要查看此视频,请启用JavaScript,并考虑升级到
<a href="https://videojs.com/html5-video-support/" target="_blank">
支持HTML5视频
</a>
的web浏览器
</p>
</video>
当页面加载时,Video.js将找到这个元素并自动在其位置设置一个播放器。
如果你不想使用自动设置,可以去掉data-setup
属性,并使用videojs
函数手动初始化<video>
元素:
var player = videojs('my-player');
videojs
函数还接受一个options
对象和一个当播放器准备就绪时调用的回调函数:
var options = {};
var player = videojs('my-player', options, function onPlayerReady() {
videojs.log('你的播放器已就绪!');
// 在这个上下文中,`this`是由Video.js创建的播放器。
this.play();
// 如何添加事件监听器?
this.on('ended', function() {
videojs.log('啊哦...这么快就结束了?!');
});
});
如果你准备深入了解,入门页面和文档是获取更多信息的最佳去处。如果你遇到困难,请前往我们的Slack频道!
贡献
Video.js是一个免费和开源的库,我们感谢你愿意提供的任何帮助 - 无论是修复错误、改进文档,还是提出新功能。查看贡献指南以获取更多信息!
Video.js使用BrowserStack进行兼容性测试。
行为准则
请注意,本项目发布时附带贡献者行为准则。参与本项目即表示你同意遵守其条款。
许可证
Video.js根据Apache许可证2.0版授权。