MVideo

Appearance

Return to top
On this page

核心 API

本章节介绍 QiuVideo 播放器的核心 API。

QiuVideo

QiuVideo 是播放器的主要类，提供了初始化和控制播放器的所有功能。

构造函数

javascript
const qiuVideo = new QiuVideo(options);

参数：

  • options：播放器配置选项对象
    • container：string | HTMLElement - 播放器容器元素或选择器
    • videoUrl：string - 视频源 URL
    • poster：string - 视频封面图片 URL
    • volume：number - 初始音量（0-1），默认 0.7
    • autoplay：boolean - 是否自动播放，默认 false
    • muted：boolean - 是否静音，默认 false
    • loop：boolean - 是否循环播放，默认 false
    • preload：string - 预加载方式 ('auto', 'metadata', 'none')，默认 'metadata'
    • playbackRate：number - 播放速率，默认 1
    • subtitles：Array - 字幕配置
      javascript
      [
  {
    url: '字幕文件URL',
    label: '字幕标签',
    srclang: '语言代码',
    default: true
  }
]
    • hls：boolean - 是否启用 HLS 支持，默认 false
    • flv：boolean - 是否启用 FLV 支持，默认 false
    • contextmenu：Array - 自定义右键菜单
    • keyboard：boolean - 是否启用键盘控制，默认 true
    • logo：Object - 播放器 Logo 配置
      javascript
      {
  url: 'logo URL',
  position: 'left-top', // left-top, right-top, left-bottom, right-bottom
  link: '点击链接'
}

方法

播放控制

play()
javascript
qiuVideo.play();

开始播放视频。

pause()
javascript
qiuVideo.pause();

暂停视频播放。

toggle()
javascript
qiuVideo.toggle();

切换播放/暂停状态。

destroy()
javascript
qiuVideo.destroy();

销毁播放器实例，释放资源。

进度控制

seek(time)
javascript
qiuVideo.seek(time);

跳转到指定时间点。

参数：

  • time：number - 目标时间（秒）
getCurrentTime()
javascript
const currentTime = qiuVideo.getCurrentTime();

获取当前播放时间（秒）。

返回值：number - 当前播放时间（秒）

getDuration()
javascript
const duration = qiuVideo.getDuration();

获取视频总时长（秒）。

返回值：number - 视频总时长（秒）

音量控制

setVolume(volume)
javascript
qiuVideo.setVolume(volume);

设置音量。

参数：

  • volume：number - 音量值（0-1）
getVolume()
javascript
const volume = qiuVideo.getVolume();

获取当前音量。

返回值：number - 当前音量（0-1）

setMuted(muted)
javascript
qiuVideo.setMuted(muted);

设置静音状态。

参数：

  • muted：boolean - 是否静音
toggleMute()
javascript
qiuVideo.toggleMute();

切换静音状态。

播放速率

setPlaybackRate(rate)
javascript
qiuVideo.setPlaybackRate(rate);

设置播放速率。

参数：

  • rate：number - 播放速率（如 0.5, 1, 1.5, 2）
getPlaybackRate()
javascript
const rate = qiuVideo.getPlaybackRate();

获取当前播放速率。

返回值：number - 当前播放速率

全屏控制

requestFullscreen()
javascript
qiuVideo.requestFullscreen();

请求进入全屏模式。

exitFullscreen()
javascript
qiuVideo.exitFullscreen();

退出全屏模式。

toggleFullscreen()
javascript
qiuVideo.toggleFullscreen();

切换全屏状态。

requestWebFullscreen()
javascript
qiuVideo.requestWebFullscreen();

请求进入网页全屏模式。

exitWebFullscreen()
javascript
qiuVideo.exitWebFullscreen();

退出网页全屏模式。

toggleWebFullscreen()
javascript
qiuVideo.toggleWebFullscreen();

切换网页全屏状态。

requestPictureInPicture()
javascript
qiuVideo.requestPictureInPicture();

请求进入画中画模式。

exitPictureInPicture()
javascript
qiuVideo.exitPictureInPicture();

退出画中画模式。

togglePictureInPicture()
javascript
qiuVideo.togglePictureInPicture();

切换画中画状态。

视频源

load(url)
javascript
qiuVideo.load(url);

加载新的视频源。

参数：

  • url：string - 新的视频 URL
changeVideo(options)
javascript
qiuVideo.changeVideo(options);

切换视频源，可同时更新封面等配置。

参数：

  • options：对象，包含视频源信息
    • url：string - 视频 URL
    • poster：string - 视频封面 URL

字幕

addSubtitle(options)
javascript
qiuVideo.addSubtitle(options);

添加字幕轨道。

参数：

  • options：字幕配置
    • url：string - 字幕文件 URL
    • label：string - 字幕标签
    • srclang：string - 语言代码
    • default：boolean - 是否默认启用
removeSubtitle(index)
javascript
qiuVideo.removeSubtitle(index);

移除字幕轨道。

参数：

  • index：number - 字幕轨道索引
setSubtitle(index)
javascript
qiuVideo.setSubtitle(index);

切换当前字幕轨道。

参数：

  • index：number - 字幕轨道索引

质量切换

setQuality(quality)
javascript
qiuVideo.setQuality(quality);

切换视频质量。

参数：

  • quality：string - 质量标识

事件

on(event, callback)

javascript
qiuVideo.on(event, callback);

注册事件监听器。

参数：

  • event：string - 事件名称
  • callback：Function - 回调函数

off(event, callback)

javascript
qiuVideo.off(event, callback);

移除事件监听器。

参数：

  • event：string - 事件名称
  • callback：Function - 回调函数

可用事件列表

事件名称说明回调参数
ready播放器准备就绪-
play开始播放-
pause暂停播放-
ended播放结束-
error播放错误error: Error
timeupdate播放时间更新currentTime: number
durationchange视频时长更新duration: number
volumechange音量改变volume: number, muted: boolean
fullscreenchange全屏状态改变fullscreen: boolean
webfullscreenchange网页全屏状态改变webfullscreen: boolean
pipchange画中画状态改变pip: boolean
seeking正在跳转-
seeked跳转完成-
loadedmetadata视频元数据加载完成-
progress加载进度更新loaded: number, total: number
qualitychange画质切换完成quality: string
subtitlechange字幕切换完成index: number
ratechange播放速率改变rate: number

静态方法

QiuVideo.version

javascript
const version = QiuVideo.version;

获取 QiuVideo 版本号。

QiuVideo.isSupported()

javascript
const isSupported = QiuVideo.isSupported();

检查浏览器是否支持播放器。

返回值：boolean - 是否支持

QiuVideo.supportsFormat(format)

javascript
const supported = QiuVideo.supportsFormat(format);

检查浏览器是否支持特定视频格式。

参数：

  • format：string - 视频格式（如 'mp4', 'webm', 'ogg'）

返回值：boolean - 是否支持

工厂函数

除了使用构造函数创建播放器实例外，还可以使用工厂函数创建：

javascript
// 创建播放器实例
const qiuVideo = QiuVideo.create(options);

// 链式调用
QiuVideo.create(options)
  .on('ready', () => console.log('播放器已准备就绪'))
  .on('play', () => console.log('开始播放'))
  .play();