Video.js - HTML5视频播放器

Video.js是一个从零开始为HTML5世界打造的网页视频播放器。它支持HTML5视频和媒体源扩展，以及通过插件支持其他播放技术，如YouTube和Vimeo。它支持在桌面和移动设备上播放视频。这个项目始于2010年中期，现在这个播放器已被超过~~50,000~~ ~~100,000~~ ~~200,000~~ ~~400,000~~ 700,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('啊哦...这么快就结束了？！');
  });
});