Tutorial: player-workflows | Video.js Documentation

播放器工作流

本文档概述了在高级播放器工作流中使用 Video.js 的许多注意事项。请务必先阅读 《setup 指南》！

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

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

  1. 通过调用 videojs('example_video_id'); 访问
  2. 直接通过 videojs.players.example_video_id; 访问

删除播放器

无论使用什么术语，web 应用程序都变得越来越普遍。web 页面并不是所有的东西都是静态的、只需加载一次就结束的！这意味着开发人员需要能够管理视频播放器的整个生命周期——从创建到销毁。Video.js 支持通过dispose() 方法删除播放器。

dispose()

此方法适用于所有 Video.js 播放器和组件。这是从 DOM 和内存中删除 Video.js 播放器的唯一受支持的方法。例如，以下代码设置播放机，然后在媒体播放完成后对其进行删除：

  1. var player = videojs('my-player');
  3. player.on('ended', function() {
  4.   this.dispose();
  5. });

Calling dispose() will have a few effects:

调用 dispose() 会产生以下效果：

  1. 在播放器上触发一个 "dispose" 事件，允许运行您整合的所有自定义清理任务。
  2. 从播放器中删除所有事件侦听器。
  3. 删除播放器的 DOM 元素。

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

注意：不要通过标准的 DOM 删除方法删除播放器：这将使侦听器和内存中的其他对象无法清理！

检查播放器是否被删除

有时，了解代码中的播放器引用是否过时很有用。isDisposed() 方法在所有组件（包括播放器）上都可用于确认这件事。

处理未删除的播放器

当看到这个错误：

  1. TypeError: this.el_.vjs_getProperty is not a function

或

  1. TypeError: Cannot read property 'vdata1234567890' of null

这可能是因为在不使用 `dispose() 的情况下从 DOM 中删除了播放器或组件。它通常意味着试图在播放器上触发事件或调用方法。

显示和隐藏播放器

不建议您尝试切换 Video.js 播放器的 visibility 或 display。相反，播放器应该根据需要创建和删除。

特别是像在弹窗(modal)/遮罩(overlay)中显示播放器这样的用例，建议您在弹窗打开时创建播放器，并在弹窗关闭时进行删除，而不是在 DOM 元素中保留一个隐藏的 Video.js 播放器。

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

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

  1. modal.on('show', function() {
  2.   var videoEl = modal.findEl('video');
  3.   modal.player = videojs(videoEl);
  4. });
  6. modal.on('hide', function() {
  7.   modal.player.dispose();
  8. });

改变播放器的音量

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

示例

  1. var myPlayer = videojs('some-player-id');
  3. myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
  4. myPlayer.ready(function() {
  5.   // get
  6.   var howLoudIsIt = myPlayer.volume();
  7.   // set
  8.   myPlayer.volume(0.5); // Set volume to half
  9. });

也可以使用 muted 方法设置静音（而不实际更改音量的值）。不带参数调用它将返回播放器上静音的当前状态。

  1. var myPlayer = videojs('some-player-id');
  3. myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
  4. myPlayer.ready(function() {
  5.   // get, should be false
  6.   console.log(myPlayer.muted());
  7.   // set to true
  8.   myPlayer.muted(true);
  9.   // get should be true
  10.   console.log(myPlayer.muted());
  11. });

全屏播放

要检查播放器当前是否全屏，可以像这样调用播放器上的 isFullscreen 方法。

  1. var myPlayer = videojs('some-player-id');
  3. myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
  4. myPlayer.ready(function() {
  5.   // get, should be false
  6.   console.log(myPlayer.isFullscreen());
  8.   // set, tell the player it's in fullscreen
  9.   myPlayer.isFullscreen(true);
  11.   // get, should be true
  12.   console.log(myPlayer.isFullscreen());
  13. });

调用 requestFullscreen 指示播放器进入全屏模式。

  1. var myPlayer = videojs('some-player-id');
  3. myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
  4. myPlayer.ready(function() {
  5.   myPlayer.requestFullscreen();
  6. });

调用 exitFullscreen 退出全屏

  1. var myPlayer = videojs('some-player-id');
  3. myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
  4. myPlayer.ready(function() {
  5.   myPlayer.requestFullscreen();
  6.   myPlayer.exitFullscreen();
  7. });

播放相关的方法

play 可以用于播放指定了源的播放器。

  1. var myPlayer = videojs('some-player-id');
  3. myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
  4. myPlayer.ready(function() {
  5.   myPlayer.play();
  6. });

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

  1. var myPlayer = videojs('some-player-id');
  3. myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
  4. myPlayer.ready(function() {
  5.   myPlayer.play();
  6.   myPlayer.pause();
  7. });

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

  1. var myPlayer = videojs('some-player-id');
  3. myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
  5. myPlayer.ready(function() {
  6.   // true
  7.   console.log(myPlayer.paused());
  8.   // false
  9.   console.log(!myPlayer.paused());
  11.   myPlayer.play();
  12.   // false
  13.   console.log(myPlayer.paused());
  14.   // true
  15.   console.log(!myPlayer.paused());
  17.   myPlayer.pause();
  18.   // true
  19.   console.log(myPlayer.paused());
  20.   // false
  21.   console.log(!myPlayer.paused());
  22. });

currentTime 可以设置或获取当前的播放位置/时间 (以秒为单位)。

  1. var myPlayer = videojs('some-player-id');
  3. myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
  4. myPlayer.ready(function() {
  5.   // set current time to 2 minutes into the video
  6.   myPlayer.currentTime(120);
  8.   // get the current time, should be 120 seconds
  9.   var whereYouAt = myPlayer.currentTime();
  10. });

duration 可以获取当前正在播放的视频的总长度（时间）

  1. var myPlayer = videojs('some-player-id');
  3. myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
  4. myPlayer.ready(function() {
  5.   var lengthOfVideo = myPlayer.duration();
  6. });

remainingTime 可以获取当前视频剩余秒数。

  1. var myPlayer = videojs('some-player-id');
  2. myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
  3. myPlayer.ready(function() {
  4.    myPlayer.currentTime(10);
  6.    // should be 10 seconds less than duration
  7.    console.log(myPlayer.remainingTime());
  8. });

buffered 提供一个 timeRange 对象，该对象表示已经缓冲的，准备在将来某个时间播放的时间范围。

  1. var myPlayer = videojs('some-player-id');
  3. myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
  4. myPlayer.ready(function() {
  5.   var bufferedTimeRange = myPlayer.buffered();
  7.   // number of different ranges of time have been buffered.
  8.   // Usually 1
  9.   var numberOfRanges = bufferedTimeRange.length,
  11.   // Time in seconds when the first range starts.
  12.   // Usually 0
  13.   var firstRangeStart = bufferedTimeRange.start(0),
  15.   // Time in seconds when the first range ends
  16.   var firstRangeEnd = bufferedTimeRange.end(0),
  18.   // Length in seconds of the first time range
  19.   var firstRangeLength = firstRangeEnd - firstRangeStart;
  20. });

bufferedPercent 可以获取当前视频缓冲的百分比。

  1. var myPlayer = videojs('some-player-id');
  3. myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
  4. myPlayer.ready(function() {
  5.   // example 0.11 aka 11%
  6.   var howMuchIsDownloaded = myPlayer.bufferedPercent();
  7. });

处理播放器上的 source（源文件）和 poster（预览图片/海报）

通过 API 将 source 传递给播放器。（这也可以使用 options 完成）

  1. var myPlayer = videojs('some-player-id');
  3. myPlayer.src('http://www.example.com/path/to/video.mp4');

当提供一个字符串作为 source 时，Video.js 将尝试从文件扩展名推断视频类型，但这种推断并非在所有情况下都有效。建议 source 通过包含 type 的对象格式提供，如下所示。

Source 对象（或元素）：包含 source 源文件信息的 javascript 对象。如果希望播放器使用 type 确定是否支持该文件，请使用此方法。

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

Sources 对象数组： 要提供 source 源文件的多个版本，以便使用 HTML5 跨浏览器播放，可以使用对象数组格式。Video.js 将监测支持哪个版本并加载该文件。

  1. var myPlayer = videojs('some-player-id');
  3. myPlayer.src([
  4.   {type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'},
  5.   {type: 'video/webm', src: 'http://www.example.com/path/to/video.webm'},
  6.   {type: 'video/ogg', src: 'http://www.example.com/path/to/video.ogv'}
  7. ]);

通过 API 更改或设置 poster。（这也可以通过 options 完成）

  1. var myPlayer = videojs('example_video_1');
  3. // set
  4. myPlayer.poster('http://example.com/myImage.jpg');
  6. // get
  7. console.log(myPlayer.poster());
  8. // 'http://example.com/myImage.jpg'

访问播放器的 Tech

可以通过 tech() 访问播放器上的 tech。传递任何参数都将屏蔽它的警告提示。

  1. var myPlayer = videojs('some-player-id');
  3. myPlayer.src({type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4'});
  4. myPlayer.ready(function() {
  5.    // tech() will log warning without any argument
  6.    var tech = myPlayer.tech(false);
  7. });

使用 Video.js 与…

jQuery

React

See ReactJS integration example

Ember

Angular

Vue

See Vue integration example