README

Video.js® - 网络视频播放器

Video.js 是一个功能齐全的开源视频播放器，适用于所有基于网络的平台。

直接使用无需安装，Video.js 支持所有在网络上使用的常见媒体格式，包括流媒体格式如 HLS 和 DASH。它适用于桌面、移动设备、平板电脑和基于网络的智能电视。它可以通过强大的插件生态系统进一步扩展和定制，如插件。

Video.js 始于 2010 年中旬，现在已在超过 ~~50,000~~ ~~100,000~~ ~~200,000~~ ~~400,000~~ ~~700,000~~ 800,000 个网站上使用。

快速入门

感谢 Fastly 上的优秀团队，现在任何人都可以免费使用由 CDN 托管的 Video.js 版本。将这些标签添加到您的文档的 <head>

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

或者，您可以通过 npm 获取 Video.js，从 GitHub 发布下载，或者通过 unpkg 或其他 JavaScript CDN（如 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/video.js@8.18.1/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js@8.18.1/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.18.1/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.18.1/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://videojs.com.cn/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </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('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?!');
  });
});

如果您准备好了，请访问入门页面和文档以获取更多信息。如果您遇到困难，请访问我们的 Slack！

videojs / video.js

维护者

详细信息

README

Video.js® - 网络视频播放器

目录

快速入门

贡献

行为准则

许可证