西瓜播放器 HTML5 video video.js 播放器 HTML5播放器 mp4 hls hls.js flv flv.js dash dash.js 无缝切换

API

player是播放器的实例对象。

let player=new Player({
  id:'mse',
  url:'/mp4/'
})

属性

属性名含义备注
hasStart当前播放时间/视频时长布尔值
autoplay设置/返回 自动播放属性
buffered返回当前缓冲的TimeRange对象集合
crossOrigin设置/返回是否跨域
currentSrc设置/返回视频播放地址
currentTime设置/返回视频当前播放时间
defaultMuted设置/返回视频默认静音
duration返回视频时长,单位:秒
ended返回视频是否播放结束
error视频错误信息,该错误会返回当前语言的文本
loop是否开启了循环播放
muted重播交互与提示
networkState返回视频状态,自动返回当前语言的文本
readyState返回视频的播放状态,自动返回当前语言的文本
src设置/返回当前视频的地址
volume设置/返回视频的音量
root播放器外层容器 DOM
controls播放器控制条外层容器 DOM
fullscreen播放器是否处于全屏状态布尔值
bullet播放器弹幕是否开启布尔值
textTrack播放器外挂字幕是否开启布尔值
pip播放器画中画是否开启布尔值

方法

play

  • 说明: 播放

  • 举例:

player.play()

pause

  • 说明: 暂停

  • 举例:

player.pause()

reload

  • 说明: 重新加载视频

  • 举例:

player.reload()

destroy

  • 说明: 播放器销毁

  • 举例:

player.destroy()

注意

利用 destroy 方法可以实现视频间(可以是不同格式)的动态切换,参考代码如下:

if (player) {
  player.destroy();
}
setTimeout(function () {
  player = null;
  player = new Xgplayer({
    id: 'domId',
    url: 'newUrl'
  });
}, 0);

canPlayType

  • 说明: 检测您的浏览器是否能播放不同类型的视频

  • 举例:

player.canPlayType('video/mp4; codecs="avc1.64001E, mp4a.40.5"')

getBufferedRange

  • 说明: 返回当前的缓冲片段时间范围,start表示缓冲起始时间,end表示缓存截止时间

  • 返回值 [start,end]

  • 举例:

player.getBufferedRange()

start

  • 说明: 启动播放器,start一般都是播放器内部隐式调用,主要功能是将video添加到DOM

  • 参数: url 视频地址

  • 举例:

player.start(url)

replay

  • 说明: 播放器重播,重播的组件就调用了这个方法,支持beforeReplay钩子,如果beforeReplay返回为false阻止重播动作。

  • 举例:

player.replay()

install 【静态方法】

  • 说明: 插件的安装方法

  • 举例:

Player.install('play',function(){})

事件

事件名含义
play播放
playing继续播放
pause暂停
ended结束
error错误
seekingseek播放
seekedseek播放结束
timeupdate播放时间改变
waiting等待加载数据
canplay视频可以播放
canplaythrough视频可以流畅播放
durationchange时长发生变化
volumechange音量发生变化
bufferedChange缓冲发生变化
requestFullscreen进入全屏
exitFullscreen退出全屏

事件注册/注销

永久注册

player.on('事件名',function(){
  //事件名称可以在上述查询
})

一次注册

player.once('事件名',function(){

})

事件注销

player.off('事件名',function(){

})

事件触发

player.emit('事件名')

生命周期

实例化完成

播放器调用Player进行实例化,实例化结束后会触发 ready 事件,通过对 ready 的监听可以确定实例化是否完成。实例化主要包括自定义UI生成、事件绑定、插件化实例化工作。代码如下:

let player=new Player({/*配置*/});
player.once('ready',()=>{console.log('ready')})

视频生成结束

考虑到节约视频流量和HTTP连接数的限制,PC端播放器在实例化的时候只是UI生效并未生成video视频,只有点击播放后才会创建video标签拉取视频进行播放。如果想捕获创建video的时机,监听 complete 事件。代码如下:

let player=new Player({/*配置*/});
player.once('complete',()=>{console.log('complete')})

不过值得注意的是,没有使用白名单的手机端会创建的原生的video。由于部分机型对插入的video有bug,所以播放器实例化的时候会直接生成video,这个动作的执行是在mobile插件,所以意味着 complete 事件会先于 ready 事件。

实例已销毁

播放器在销毁实例的时候会触发 destroy 事件,代码如下:

let player=new Player({/*配置*/});
player.once('destroy',()=>{console.log('destroy')})

注意

ready事件和complete事件是在实例化的时候已经触发,为了保证“后监听”方式能捕获到事件,请勿使用异步操作来监听,如setTimeout、Promise等,如果需要使用这些异步操作,请在响应函数内完成。

  • 错误的使用方式

    let player=new Player({/*配置*/});
    setTimeout(function () {
      player.once('ready',()=>{console.log('ready')})
    }, 1000);
    
  • 正确的使用方式

let player=new Player({/*配置*/});
player.once('ready',()=>{
  setTimeout(function () {
    console.log('ready')
  }, 1000);
})

辅助库

util

  • createDom
  • hasClass
  • addClass
  • removeClass
  • toggleClass
  • findDom
  • format
  • event

sniffer

  • browser
  • platform
  • version
  • device