使用示例

本章节提供 QiuVideo 播放器的各种使用场景示例，帮助您快速上手和深入应用。

基础示例

简单播放器

最基本的播放器初始化：

html

<div id="player"></div>
<script src="path/to/qiu-video.min.js"></script>
<script>
  const player = new QiuVideo({
    container: '#player',
    videoUrl: 'https://example.com/video.mp4',
    poster: 'https://example.com/poster.jpg'
  });
</script>

自动播放

启用自动播放（注意：浏览器策略可能限制自动播放）：

javascript

const player = new QiuVideo({
  container: '#player',
  videoUrl: 'https://example.com/video.mp4',
  autoplay: true,
  muted: true // 某些浏览器要求静音才能自动播放
});

字幕示例

单字幕轨道

添加单个字幕轨道：

javascript

const player = new QiuVideo({
  container: '#player',
  videoUrl: 'https://example.com/video.mp4',
  subtitles: [
    {
      url: 'https://example.com/subtitles.srt',
      label: '中文字幕',
      srclang: 'zh-CN',
      default: true
    }
  ]
});

多语言字幕

添加多个语言的字幕轨道：

javascript

const player = new QiuVideo({
  container: '#player',
  videoUrl: 'https://example.com/video.mp4',
  subtitles: [
    {
      url: 'https://example.com/subtitles-zh.srt',
      label: '中文字幕',
      srclang: 'zh-CN',
      default: true
    },
    {
      url: 'https://example.com/subtitles-en.srt',
      label: 'English',
      srclang: 'en',
      default: false
    },
    {
      url: 'https://example.com/subtitles-ja.vtt',
      label: '日本語',
      srclang: 'ja',
      default: false
    }
  ]
});

// 运行时切换字幕
player.on('ready', () => {
  // 切换到英文（索引为1）
  player.setSubtitle(1);
});

直播流示例

HLS 直播

播放 HLS 格式的直播流：

javascript

const player = new QiuVideo({
  container: '#player',
  videoUrl: 'https://example.com/live/index.m3u8',
  hls: true,
  live: true,
  poster: 'https://example.com/live-poster.jpg'
});

// 监听直播状态
player.on('live', (isLive) => {
  console.log('直播状态:', isLive ? '在线' : '离线');
});

FLV 直播

播放 FLV 格式的直播流：

javascript

const player = new QiuVideo({
  container: '#player',
  videoUrl: 'https://example.com/live/stream.flv',
  flv: true,
  live: true
});

自定义功能

自定义控制栏

自定义播放器控制栏按钮和行为：

javascript

const player = new QiuVideo({
  container: '#player',
  videoUrl: 'https://example.com/video.mp4',
  controls: {
    playButton: true,
    volume: true,
    fullscreen: true,
    pip: true,
    progress: true,
    timeDisplay: true,
    quality: true,
    subtitle: true,
    playbackRate: true,
    // 自定义控制按钮
    custom: [
      {
        icon: '<svg>...</svg>', // 自定义图标
        tooltip: '自定义功能',
        click: () => {
          console.log('自定义按钮被点击');
          // 执行自定义操作
        }
      }
    ]
  }
});

自定义右键菜单

自定义播放器右键菜单：

javascript

const player = new QiuVideo({
  container: '#player',
  videoUrl: 'https://example.com/video.mp4',
  contextmenu: [
    {
      text: '关于我们',
      link: 'https://example.com/about'
    },
    {
      text: '分享视频',
      click: () => {
        // 分享功能
        navigator.share({
          title: '精彩视频',
          text: '我发现了一个精彩视频！',
          url: window.location.href
        });
      }
    },
    'separator', // 分隔线
    {
      text: '报告问题',
      click: () => {
        alert('请联系我们报告问题');
      }
    }
  ]
});

高级应用

多播放器管理

在同一页面管理多个播放器实例：

javascript

// 创建播放器集合
const players = [];

// 创建第一个播放器
players.push(new QiuVideo({
  container: '#player1',
  videoUrl: 'https://example.com/video1.mp4',
  poster: 'https://example.com/poster1.jpg'
}));

// 创建第二个播放器
players.push(new QiuVideo({
  container: '#player2',
  videoUrl: 'https://example.com/video2.mp4',
  poster: 'https://example.com/poster2.jpg'
}));

// 控制所有播放器
function playAll() {
  players.forEach(player => player.play());
}

function pauseAll() {
  players.forEach(player => player.pause());
}

function muteAll() {
  players.forEach(player => player.setMuted(true));
}

// 销毁所有播放器
function destroyAll() {
  players.forEach(player => player.destroy());
  players.length = 0;
}

视频列表播放

实现视频列表连续播放功能：

javascript

const videoList = [
  { url: 'https://example.com/video1.mp4', title: '视频 1', poster: 'https://example.com/poster1.jpg' },
  { url: 'https://example.com/video2.mp4', title: '视频 2', poster: 'https://example.com/poster2.jpg' },
  { url: 'https://example.com/video3.mp4', title: '视频 3', poster: 'https://example.com/poster3.jpg' }
];

let currentIndex = 0;

const player = new QiuVideo({
  container: '#player',
  videoUrl: videoList[currentIndex].url,
  poster: videoList[currentIndex].poster
});

// 更新当前播放信息
function updateVideoInfo() {
  document.getElementById('video-title').textContent = videoList[currentIndex].title;
  // 更新UI其他部分...
}

// 播放下一个视频
function playNext() {
  currentIndex = (currentIndex + 1) % videoList.length;
  player.changeVideo({
    url: videoList[currentIndex].url,
    poster: videoList[currentIndex].poster
  });
  updateVideoInfo();
}

// 播放上一个视频
function playPrevious() {
  currentIndex = (currentIndex - 1 + videoList.length) % videoList.length;
  player.changeVideo({
    url: videoList[currentIndex].url,
    poster: videoList[currentIndex].poster
  });
  updateVideoInfo();
}

// 监听播放结束事件，自动播放下一个
player.on('ended', playNext);

// 初始化
updateVideoInfo();

// 绑定按钮事件
document.getElementById('next-btn').addEventListener('click', playNext);
document.getElementById('prev-btn').addEventListener('click', playPrevious);

画质切换

实现多画质切换功能：

javascript

const player = new QiuVideo({
  container: '#player',
  videoUrl: 'https://example.com/video/720p.mp4',
  qualities: [
    {
      name: '自动',
      url: 'https://example.com/video/adaptive.m3u8'
    },
    {
      name: '超清 1080p',
      url: 'https://example.com/video/1080p.mp4'
    },
    {
      name: '高清 720p',
      url: 'https://example.com/video/720p.mp4',
      default: true
    },
    {
      name: '标清 480p',
      url: 'https://example.com/video/480p.mp4'
    },
    {
      name: '流畅 360p',
      url: 'https://example.com/video/360p.mp4'
    }
  ]
});

// 监听画质切换事件
player.on('qualitychange', (quality) => {
  console.log('当前画质:', quality);
});

// 手动切换画质
document.getElementById('quality-selector').addEventListener('change', (e) => {
  player.setQuality(e.target.value);
});

移动端适配

响应式播放器

创建响应式播放器，适应不同屏幕尺寸：

html

<style>
  .player-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
  }
  .player-container #player {
    width: 100%;
    height: 100%;
  }
</style>

<div class="player-container">
  <div id="player"></div>
</div>

<script>
  const player = new QiuVideo({
    container: '#player',
    videoUrl: 'https://example.com/video.mp4',
    mobileControls: true, // 启用移动端优化控制
    gestureControl: true, // 启用手势控制（双击播放/暂停，滑动调节音量/进度）
    orientationLock: true // 移动端方向锁定
  });
</script>

画中画模式

在移动端使用画中画功能：

javascript

const player = new QiuVideo({
  container: '#player',
  videoUrl: 'https://example.com/video.mp4',
  pip: true
});

// 监听画中画状态变化
player.on('pipchange', (isInPip) => {
  if (isInPip) {
    // 画中画模式，可以隐藏页面上的其他元素
    document.getElementById('content').style.display = 'none';
  } else {
    // 退出画中画，恢复页面显示
    document.getElementById('content').style.display = 'block';
  }
});

// 手动触发画中画
document.getElementById('pip-btn').addEventListener('click', () => {
  if (document.pictureInPictureElement) {
    player.exitPictureInPicture();
  } else {
    player.requestPictureInPicture();
  }
});

性能优化

懒加载

实现播放器懒加载，提高页面加载速度：

javascript

// 使用 Intersection Observer API 检测播放器容器是否可见
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 容器可见时初始化播放器
      const player = new QiuVideo({
        container: '#player',
        videoUrl: 'https://example.com/video.mp4',
        preload: 'metadata' // 仅预加载元数据
      });
      
      // 初始化后停止观察
      observer.unobserve(entry.target);
    }
  });
}, {
  threshold: 0.5 // 当容器50%可见时触发
});

// 开始观察播放器容器
observer.observe(document.getElementById('player'));

内存管理

管理播放器内存，避免内存泄漏：

javascript

let player = null;

// 初始化播放器
function initPlayer() {
  if (player) {
    destroyPlayer();
  }
  
  player = new QiuVideo({
    container: '#player',
    videoUrl: 'https://example.com/video.mp4'
  });
  
  // 添加必要的事件监听器
  player.on('ready', handlePlayerReady);
  player.on('error', handlePlayerError);
}

// 销毁播放器并清理资源
function destroyPlayer() {
  if (player) {
    // 移除事件监听器
    player.off('ready', handlePlayerReady);
    player.off('error', handlePlayerError);
    
    // 销毁播放器实例
    player.destroy();
    player = null;
  }
}

// 页面切换时销毁播放器
window.addEventListener('beforeunload', destroyPlayer);

// SPA 应用路由变化时
router.on('change', () => {
  if (!isPlayerPage()) {
    destroyPlayer();
  }
});

// 初始化
initPlayer();

使用示例 #

基础示例 #

简单播放器 #

自动播放 #

字幕示例 #

单字幕轨道 #

多语言字幕 #

直播流示例 #

HLS 直播 #

FLV 直播 #

自定义功能 #

自定义控制栏 #

自定义右键菜单 #

高级应用 #

多播放器管理 #

视频列表播放 #

画质切换 #

移动端适配 #

响应式播放器 #

画中画模式 #

性能优化 #

懒加载 #

内存管理 #

使用示例

基础示例

简单播放器

自动播放

字幕示例

单字幕轨道

多语言字幕

直播流示例

HLS 直播

FLV 直播

自定义功能

自定义控制栏

自定义右键菜单

高级应用

多播放器管理

视频列表播放

画质切换

移动端适配

响应式播放器

画中画模式

性能优化

懒加载

内存管理