player-workflows(播放器工作流程)


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

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

  • 通过回调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元素。
此外,这些动作将递归应用于所有播放器的子组件。

注意:不要通过标准的DOM删除方法来删除播放器:这样会把侦听器和其他对象留在内存中,您可能无法清除它们!


检查播放器是否被处置

有时,了解代码中的玩家参考是否过时很有用。isDisposed()为此,该方法在所有组件(包括播放器)上都可用。


未处置播放器的迹象

看到错误,例如:

TypeError: this.el_.vjs_getProperty is not a function
要么
TypeError: Cannot read property 'vdata1234567890' of null

说明没有使用dispose()就从DOM中删除了播放器或组件。它通常意味着试图在它上面触发事件或调用它的方法。


显示和隐藏播放器

不建议您尝试切换Video.js播放器的可见性。当涉及到Flash技术时,这样做尤其成问题。相反,应该根据需要创建并配置播放器。

这与用例有关,比如在modal/overlay中显示播放器。建议您在模式打开时创建播放器,并在模式关闭时处置它,而不是在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 将为您提供当前正在播放的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'


在播放器上使用技术

只能通过{IWillNotUseThisInPlugins: true}进入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 error with no argument
   var tech = myPlayer.tech({IWillNotUseThisInPlugins: true});
});


上一篇:options(选项) 下一篇:plugins(插件)