Video.js 指南

这些指南涵盖了 Video.js 用户的各种主题

返回指南

播放器工作流

访问页面上已创建的播放器

实例创建后，可以通过两种方式全局访问

通过调用 videojs('example_video_id');
通过直接使用 videojs.players.example_video_id;

移除播放器

无论使用什么术语，Web 应用程序正变得越来越普遍。不再所有内容都是静态的、一次加载完成的网页了！这意味着开发人员需要能够管理视频播放器的完整生命周期——从创建到销毁。Video.js 通过 dispose() 方法支持播放器移除。

`dispose()`

此方法适用于所有 Video.js 播放器和组件。它是从 DOM 和内存中移除 Video.js 播放器的唯一支持方法。例如，以下代码设置了一个播放器，并在媒体播放完成后将其销毁

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

player.on('ended', function() {
  this.dispose();
});

调用 dispose() 将产生以下效果

在播放器上触发 "dispose" 事件，允许您的集成运行任何自定义清理任务。
从播放器中移除所有事件监听器。
移除播放器的 DOM 元素。
如果使用了 restoreEl 选项，则播放器的 DOM 元素将替换为存储的元素，如果设置为 true，则为原始占位符元素的副本。

此外，这些操作会递归应用于播放器的所有子组件。

注意：请勿通过标准 DOM 移除方法移除播放器：这将在内存中留下监听器和其他对象，您可能无法清理它们！

检查播放器是否已销毁

有时，了解代码中的播放器引用是否已过时很有用。isDisposed() 方法适用于所有组件（包括播放器），可用于此目的。

未销毁播放器的迹象

看到以下错误，例如

TypeError: this.el_.vjs_getProperty is not a function

或

TypeError: Cannot read property 'vdata1234567890' of null

这表明播放器或组件在没有使用 dispose() 的情况下被从 DOM 中移除了。这通常意味着有东西试图在其上触发事件或调用方法。

显示和隐藏播放器

不建议您尝试切换 Video.js 播放器的可见性或显示。相反，应根据需要创建和销毁播放器。

这与在模态/覆盖层中显示播放器的用例相关。建议您在模态框打开时创建播放器，并在模态框关闭时销毁它，而不是在 DOM 元素中保留一个隐藏的 Video.js 播放器。

这在涉及内存/资源使用（例如移动设备）时尤其重要。

根据所使用的库/框架，实现可能如下所示

modal.on('show', function() {
  var videoEl = modal.findEl('video');
  modal.player = videojs(videoEl);
});

modal.on('hide', function() {
  modal.player.dispose();
});

更改播放器音量

播放器的音量可以通过播放器上的 volume 函数更改。该音量函数接受 0-1 之间的数字。不带参数调用它将返回当前音量。

示例

var myPlayer = videojs('some-player-id');

myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
myPlayer.ready(function() {
  // get
  var howLoudIsIt = myPlayer.volume();
  // set
  myPlayer.volume(0.5); // Set volume to half
});

音量也可以通过 muted 函数静音（而不实际改变音量值）。不带参数调用它将返回播放器当前的静音状态。

var myPlayer = videojs('some-player-id');

myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
myPlayer.ready(function() {
  // get, should be false
  console.log(myPlayer.muted());
  // set to true
  myPlayer.muted(true);
  // get should be true
  console.log(myPlayer.muted());
});

使播放器全屏

要检查播放器是否当前处于全屏模式，请像这样在播放器上调用 isFullscreen 函数。

var myPlayer = videojs('some-player-id');

myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
myPlayer.ready(function() {
  // get, should be false
  console.log(myPlayer.isFullscreen());

  // set, tell the player it's in fullscreen
  myPlayer.isFullscreen(true);

  // get, should be true
  console.log(myPlayer.isFullscreen());
});

要请求播放器进入全屏模式，请调用 requestFullscreen。

var myPlayer = videojs('some-player-id');

myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
myPlayer.ready(function() {
  myPlayer.requestFullscreen();
});

要退出全屏模式，请调用 exitFullscreen

var myPlayer = videojs('some-player-id');

myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
myPlayer.ready(function() {
  myPlayer.requestFullscreen();
  myPlayer.exitFullscreen();
});

使用播放信息函数

play 可用于启动有源播放器的播放。

var myPlayer = videojs('some-player-id');

myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
myPlayer.ready(function() {
  myPlayer.play();
});

pause 可用于暂停正在播放的播放器。

var myPlayer = videojs('some-player-id');

myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
myPlayer.ready(function() {
  myPlayer.play();
  myPlayer.pause();
});

paused 可用于确定播放器当前是否已暂停。

var myPlayer = videojs('some-player-id');

myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});

myPlayer.ready(function() {
  // true
  console.log(myPlayer.paused());
  // false
  console.log(!myPlayer.paused());

  myPlayer.play();
  // false
  console.log(myPlayer.paused());
  // true
  console.log(!myPlayer.paused());

  myPlayer.pause();
  // true
  console.log(myPlayer.paused());
  // false
  console.log(!myPlayer.paused());
});

currentTime 将为您提供当前播放发生的时间（以秒为单位）。

var myPlayer = videojs('some-player-id');

myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
myPlayer.ready(function() {
  // set current time to 2 minutes into the video
  myPlayer.currentTime(120);

  // get the current time, should be 120 seconds
  var whereYouAt = myPlayer.currentTime();
});

duration 将为您提供正在播放视频的总时长

var myPlayer = videojs('some-player-id');

myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
myPlayer.ready(function() {
  var lengthOfVideo = myPlayer.duration();
});

remainingTime 将为您提供视频剩余的秒数。

var myPlayer = videojs('some-player-id');
myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
myPlayer.ready(function() {
   myPlayer.currentTime(10);

   // should be 10 seconds less than duration
   console.log(myPlayer.remainingTime());
});

buffered 将为您提供一个 timeRange 对象，表示当前可供将来播放的时间范围。

var myPlayer = videojs('some-player-id');

myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
myPlayer.ready(function() {
  var bufferedTimeRange = myPlayer.buffered();

  // number of different ranges of time have been buffered.
  // Usually 1
  var numberOfRanges = bufferedTimeRange.length,

  // Time in seconds when the first range starts.
  // Usually 0
  var firstRangeStart = bufferedTimeRange.start(0),

  // Time in seconds when the first range ends
  var firstRangeEnd = bufferedTimeRange.end(0),

  // Length in seconds of the first time range
  var firstRangeLength = firstRangeEnd - firstRangeStart;
});

bufferedPercent 将为您提供当前视频已缓冲的百分比。

var myPlayer = videojs('some-player-id');

myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
myPlayer.ready(function() {
  // example 0.11 aka 11%
  var howMuchIsDownloaded = myPlayer.bufferedPercent();
});

处理播放器的源或海报

通过 API 将源传递给播放器。（这也可以通过选项完成）

var myPlayer = videojs('some-player-id');

myPlayer.src('http://www.example.com/path/to/video.mp4');

当提供字符串作为源时，Video.js 将尝试从文件扩展名推断视频类型，但此推断并非在所有情况下都有效。建议将源作为包含类型信息的对象提供，如下所示。

源对象（或元素）： 一个包含源文件信息的 JavaScript 对象。如果您希望播放器使用类型信息来确定它是否支持该文件，请使用此方法。

var myPlayer = videojs('some-player-id');

myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});

源对象数组： 要提供源的多个版本以便它可以在不同浏览器中使用 HTML5 播放，您可以使用源对象数组。Video.js 将检测支持哪个版本并加载该文件。

var myPlayer = videojs('some-player-id');

myPlayer.src([
  {type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'},
  {type: 'video/webm', src: 'http://www.example.com/path/to/video.webm'},
  {type: 'video/ogg', src: 'http://www.example.com/path/to/video.ogv'}
]);

通过 API 更改或设置海报。（这也可以通过选项完成）

var myPlayer = videojs('example_video_1');

// set
myPlayer.poster('http://example.com/myImage.jpg');

// get
console.log(myPlayer.poster());
// 'http://example.com/myImage.jpg'

访问播放器上的 Tech

播放器上的 Tech 可以通过 tech() 访问。传递任何参数将抑制记录的警告。

var myPlayer = videojs('some-player-id');

myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
myPlayer.ready(function() {
   // tech() will log warning without any argument
   var tech = myPlayer.tech(false);
});

Videojs.com