Video.js 播放器使用教程

项目介绍

Video.js 是一个为 HTML5 世界从头构建的网络视频播放器。它支持 HTML5 视频和媒体源扩展，以及其他播放技术，如 YouTube 和 Vimeo（通过插件）。Video.js 支持在桌面和移动设备上进行视频播放。该项目始于 2010 年年中，现在已被超过 700,000 个网站使用。

项目快速启动

引入 Video.js

首先，在你的 HTML 文档头部添加以下标签来引入 Video.js 的 CSS 和 JavaScript 文件：

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

创建视频元素

接下来，创建一个 <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，并考虑升级到支持 HTML5 视频的网络浏览器。
  </p>
</video>

手动初始化播放器

如果你不想使用自动设置，可以去掉 data-setup 属性，并使用 videojs 函数手动初始化 <video> 元素：

var player = videojs('my-player');

你还可以传递一个选项对象和一个回调函数，当播放器准备好时调用：

var options = {};
var player = videojs('my-player', options, function onPlayerReady() {
  videojs.log('你的播放器已准备就绪!');
  this.play();
  this.on('ended', function() {
    videojs.log('视频已结束');
  });
});

应用案例和最佳实践

自定义皮肤

Video.js 允许你自定义播放器的外观。你可以通过修改 CSS 文件来实现这一点。例如，更改播放按钮的颜色：

.video-js .vjs-play-control {
  color: #ff0000;
}

添加插件

Video.js 支持通过插件扩展功能。例如，你可以添加一个插件来显示视频的当前时间和总时间：

<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-time-tooltip/1.0.0/videojs-time-tooltip.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-time-tooltip/1.0.0/videojs-time-tooltip.min.css" rel="stylesheet">

然后在你的 JavaScript 代码中初始化插件：

videojs.registerPlugin('timeTooltip', function() {
  // 插件代码
});
var player = videojs('my-player');
player.timeTooltip();

典型生态项目

Video.js 插件

Video.js 有一个丰富的插件生态系统，你可以通过这些插件来扩展播放器的功能。例如：

• videojs-contrib-hls: 支持 HLS 流媒体播放。
• videojs-youtube: 支持在 Video.js 中播放 YouTube 视频。
• videojs-contrib-quality-levels: 支持视频质量级别的切换。

相关工具

• videojs-contrib-hls: 用于在 Video.js 中播放 HLS 流