videojs中文网|vidojs中文教程|videojs中文手册|video.js中文帮助文档

获取播放器

初始化播放器以后，你可以通过以下两个方法访问它

videojs(‘example_video_id’);
videojs.players.example_video_id;

如果是video的id为中划线，使用第二种方法访问的时候要加方括号，比如id为my-player,可以这样访问。videojs.players['my-player']

buffered

返回将要被播放的视频片段的时间范围。

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

返回被缓存的视频片段所占的百分比

controls

获取或者设置播放器是否显示滚动条，参数为布尔类型，true显示滚动条，false隐藏滚动条

videojs('my-player').controls(true)

currentHeight

获取组件计算后的高度值,返回值不带单位。

videojs('my-player').currentHeight() // 400

currentSource

返回当前播放的视频源对象

videojs('my-player').currentSource()
// {type: 'video/mp4', src: 'https://www.runoob.com/try/demo_source/movie.mp4'}

currentSources

返回视频源对象组成的数组

videojs('my-player').currentSources()
// [{type: 'video/mp4', src: 'https://www.runoob.com/try/demo_source/movie.mp4'}]

currentSrc

放回当前播放的视频源地址

videojs('my-player').currentSrc()
// 'https://www.runoob.com/try/demo_source/movie.mp4'

currentTime

返回当前播放器已播放的时间，单位s

currentType

放回当前播放的视频源类型

currentWidth

获取组件计算后的宽度

videojs('my-player').currentWidth()

dispose

这个方法video.js所有的播放器和组件上都可以用，这是唯一一个支持在dom和内存在删除播放器的方法。

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

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

在播放器上触发 dispose 事件时，允许你执行一些清理任务。
移除播放器上所有的侦听器
移除播放器元素。

移除播放器后，会循环在子组件上执行相同的操作。

使用 isDisposed() 方法,可以判断播放器是否被移除

duration

返回当前播放视频的总长度

ended

返回当前视频是否播放结束

exitFullscreen

如果想让播放器退出全屏，可以调用该函数。

isFullscreen

调用该函数，可以返回当前播放器是否全屏。

loop

获取或者设置，播放器的循环播放。

videojs('my-player').loop(true)

muted

使用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());
});

options

获取或者设置播放器的配置项，如果是设置配置项，新设置的配置项会跟已有的配置型，深度合并。返回一个新的配置项。

videojs('my-player').options({loop:false})

个人亲测：设置配置项，并不能改变播放器已有的行为，可能是因为播放器已经初始化完成，所以再设置就没有效果了

pause

让播放器暂停

paused

用来判断播放器是否是播放状态

play

让播放器开始播放

playbackRate

设置或者返回当前播放器的播放速度，1是正常速度，0.5是0.5倍速度

videojs('my-player').playbackRate(5)
videojs('my-player').playbackRate() // 5

playbackRates

设置倍速选项，设置后会更新控制条上的倍速选项，如果设置空数组，就会隐藏控制台上的倍速选项，如果设置非数组的值，则会忽略该值。

videojs('my-player').playbackRates([0.5,1,2])

poster

修改视频封面

var myPlayer = videojs('example_video_1');

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

preload

设置或者获取播放器的预加载项

ready

当播放器准备就绪会触发该函数，不同于事件监听器，当ready事件触发的时候，会立即调用该函数

videojs('my-player').ready(function(){
    console.log('ready')  
})

readyState

返回当前播放器状态

HAVE_NOTHING (0) 没有关于媒体资源的信息
HAVE_METADATA (1) 已获得足够的资源，资源的持续时间可用
HAVE_CURRENT_DATA (2) 当前播放位置的数据可用。
HAVE_FUTURE_DATA (3) 当前播放位置的数据是可用的，以及足够的数据供用户代理在播放方向上推进当前播放位置。
HAVE_ENOUGH_DATA (4) 有足够多的数据，可以不间断播放

player.ready(function(){
  console.log(player.readyState()) // 0
})
player.on('ended',function(){
  console.log(player.readyState()) // 4
})

remainingTime

放回当前视频的剩余时间，单位s

requestFullscreen

如果想让播放器全屏，可以调用该函数。

volume

可以使用 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
});

reset

重置播放器

src

设置视频的播放源

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

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

也可以传一个对象

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

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

还可以传一个数组

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'}
]);

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();
});

videojs的方法非常多，以上是常用的一些方法，更多方法，请点击链接查看。更多方法