MVideo

Appearance

Return to top
On this page

使用方法

本章节详细介绍 QiuVideo 播放器的使用方法和高级功能。

初始化方法

HTML标签方式

通过HTML标签直接初始化播放器是最简单的方式：

html
<qiu-video-player 
  url="path/to/video.mp4" 
  poster="path/to/poster.jpg"
  controls="true"
  loop="false"
  muted="false"
  volume="0.8"
  theme="#FF5722"
  live="false"
  stream-type="auto"
></qiu-video-player>

JavaScript初始化方式

工厂函数方式

javascript
const player = QiuVideo({
  container: '#player-container', // 容器选择器或DOM元素
  url: 'path/to/video.mp4',
  poster: 'path/to/poster.jpg',
  autoplay: false,
  loop: false,
  muted: false,
  volume: 0.8,
  theme: '#FF5722',
  controls: true,
  isLiveStream: false,
  streamType: 'auto',
  contextMenu: [
    { label: '自定义菜单项', callback: () => console.log('自定义菜单项点击') }
  ]
});

链式调用方式

javascript
const player = QiuVideo.create('#player-container')
  .src('path/to/video.mp4')
  .poster('path/to/poster.jpg')
  .autoplay(false)
  .volume(0.8)
  .loop(false)
  .muted(false)
  .theme('#FF5722')
  .on('play', () => console.log('播放开始'))
  .on('ended', () => console.log('播放结束'))
  .mount();

配置选项

QiuVideo播放器支持以下配置选项：

选项类型默认值说明
urlstring''视频URL地址
posterstring''视频封面图片URL
autoplaybooleanfalse是否自动播放（注意：受浏览器策略限制）
loopbooleanfalse是否循环播放
mutedbooleanfalse是否静音
volumenumber1.0音量大小（0.0-1.0）
themestring'#FF5722'主题颜色
controlsbooleantrue是否显示控制条
isLiveStreambooleanfalse是否为直播流
streamTypestring'auto'直播流类型：'hls'、'flv'、'auto'
contextMenuarray[]自定义右键菜单项

播放器控制方法

播放控制

javascript
// 播放视频
player.play();

// 暂停视频
player.pause();

// 切换播放/暂停状态
player.togglePlay();

// 重新加载视频
player.loadVideo('path/to/new/video.mp4');

进度控制

javascript
// 获取当前播放时间（秒）
const currentTime = player.currentTime;

// 设置当前播放时间（秒）
player.seek(30); // 跳转到30秒处

// 获取视频总时长（秒）
const duration = player.duration;

音量控制

javascript
// 获取当前音量
const volume = player.volume;

// 设置音量（0.0-1.0）
player.volume = 0.5;

// 切换静音状态
player.toggleMute();

// 获取静音状态
const isMuted = player.muted;

// 设置静音状态
player.muted = true;

全屏控制

javascript
// 切换全屏
player.toggleFullscreen();

// 进入全屏
player.enterFullscreen();

// 退出全屏
player.exitFullscreen();

// 获取全屏状态
const isFullscreen = player.isFullscreen;

事件监听

QiuVideo播放器提供了丰富的事件接口，您可以监听这些事件来实现自定义功能：

javascript
// 监听播放事件
player.addEventListener('play', () => {
  console.log('视频开始播放');
});

// 监听暂停事件
player.addEventListener('pause', () => {
  console.log('视频暂停');
});

// 监听播放结束事件
player.addEventListener('ended', () => {
  console.log('视频播放结束');
});

// 监听加载开始事件
player.addEventListener('loadstart', () => {
  console.log('视频开始加载');
});

// 监听加载完成事件
player.addEventListener('loadedmetadata', () => {
  console.log('视频元数据加载完成');
});

// 监听错误事件
player.addEventListener('error', (error) => {
  console.error('视频播放错误:', error);
});

// 监听进度更新事件
player.addEventListener('timeupdate', () => {
  console.log('当前播放时间:', player.currentTime);
});

// 监听音量变化事件
player.addEventListener('volumechange', () => {
  console.log('音量变化:', player.volume);
});

// 监听全屏变化事件
player.addEventListener('fullscreenchange', () => {
  console.log('全屏状态变化:', player.isFullscreen);
});

字幕功能

javascript
// 添加字幕
player.addSubtitle({
  label: '中文字幕',
  src: 'path/to/subtitles.ass',
  type: 'ass', // 支持 'ass'、'vtt' 等格式
  default: true
});

// 切换字幕显示
player.toggleSubtitle();

// 设置字幕样式
player.setSubtitleStyle({
  size: 'medium', // small, medium, large, xlarge
  color: '#ffffff',
  backgroundColor: 'rgba(0, 0, 0, 0.5)',
  hasBackground: true
});

直播流播放

HLS直播流

javascript
const hlsPlayer = QiuVideo({
  container: '#hls-container',
  url: 'https://example.com/live/index.m3u8',
  isLiveStream: true,
  streamType: 'hls'
});

FLV直播流

javascript
const flvPlayer = QiuVideo({
  container: '#flv-container',
  url: 'https://example.com/live/stream.flv',
  isLiveStream: true,
  streamType: 'flv'
});

自定义右键菜单

javascript
// 通过配置添加自定义右键菜单
const player = QiuVideo({
  container: '#player-container',
  url: 'path/to/video.mp4',
  contextMenu: [
    {
      label: '关于播放器',
      icon: 'info',
      callback: () => alert('QiuVideo播放器 v1.0.0')
    },
    {
      label: '分享视频',
      callback: () => console.log('分享视频')
    }
  ]
});

多播放器管理

当页面中需要多个播放器时，可以分别初始化并管理：

javascript
// 初始化第一个播放器
const player1 = QiuVideo.create('#player1').src('video1.mp4').mount();

// 初始化第二个播放器
const player2 = QiuVideo.create('#player2').src('video2.mp4').mount();

// 控制第一个播放器
player1.play();

// 控制第二个播放器
player2.pause();

播放器销毁

当不再需要播放器时，应该正确销毁它以释放资源：

javascript
// 销毁播放器
player.destroy();

常见问题

自动播放不生效

浏览器通常会阻止未经用户交互的自动播放。您可以：

  • 提示用户点击播放按钮
  • 在用户交互事件中触发播放
  • 使用静音自动播放（某些浏览器允许）

视频无法播放

  • 检查视频格式是否被浏览器支持
  • 验证视频URL是否正确
  • 确认跨域设置是否正确
  • 查看控制台错误信息

直播流加载失败

  • 确认直播流URL有效
  • 验证网络连接
  • 检查streamType设置是否正确