Videojs 视频播放模块

Video.js 是一个通用的 HTML5 视频播放器框架。在最新的 Video.js 10（Beta版/预发布版本）中，库的设计进一步向现代 Web 标准靠拢，移除了大量对旧版浏览器的兼容代码，并增强了对现代音视频格式（如 HLS、DASH）、ES 模块化以及响应式布局的原生支持。

以下是关于 Video.js 10 Beta 的日常开发使用方法和常见场景的详细说明。

1. 安装与基础引入

在项目中使用 10 Beta 版本，通常需要指定安装对应的 Beta 标签或特定版本：

# 使用 npm 安装最新测试版
npm install video.js@next --save
# 或者安装指定的 10.x beta 版本（根据实际发布版本调整）
npm install video.js@10.0.0-beta.x --save

在 JS 文件中，除了引入主模块外，千万不要忘记引入配套的 CSS 样式文件：

// 引入 JS
import videojs from 'video.js';

// 引入样式（必须）
import 'video.js/dist/video-js.css';

2. 基础初始化

Video.js 推荐通过声明 HTML 容器，然后使用 JavaScript 进行编程式初始化。

HTML 结构

<!-- 使用 video-js 类名激活默认皮肤，vjs-big-play-centered 可以让播放按钮居中 -->
<div class="video-container">
  <video 
    id="my-video" 
    class="video-js vjs-default-skin vjs-big-play-centered"
  ></video>
</div>

JavaScript 初始化

const options = {
  controls: true,        // 是否显示控制条
  autoplay: false,       // 是否自动播放（注意：大部分浏览器要求静音才能自动播放）
  preload: 'auto',       // 预加载方式
  fluid: true,           // 响应式自适应容器大小
  playbackRates: [0.5, 1, 1.5, 2], // 倍速菜单
  sources: [{
    src: 'https://example.com/path/to/video.mp4',
    type: 'video/mp4'
  }],
  controlBar: {
    children: [
      'playToggle',
      'volumePanel',
      'currentTimeDisplay',
      'timeDivider',
      'durationDisplay',
      'progressControl',
      'playbackRateMenuButton',
      'fullscreenToggle'
    ]
  }
};

// 初始化播放器
const player = videojs('my-video', options, function onPlayerReady() {
  console.log('播放器准备就绪');
});

3. 日期常控制与常用 API

在日常开发中，需要通过调用播放器实例的方法来控制播放行为或获取状态：

// 1. 播放与暂停
player.play();
player.pause();

// 2. 跳转到指定时间（单位：秒）
player.currentTime(120); // 跳转到第 2 分钟

// 3. 获取当前播放时间和总时长
const currentTime = player.currentTime();
const duration = player.duration();

// 4. 音量与静音控制
player.volume(0.5); // 设置音量 (0 到 1 之间)
player.muted(true); // 静音

// 5. 动态更换视频源
player.src({
  src: 'https://example.com/new-video.mp4',
  type: 'video/mp4'
});
player.load(); // 重新加载新视频源

4. 监听事件 (Event Listeners)

Video.js 支持标准的 HTML5 媒体事件以及自定义事件。

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

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

// 监听播放进度（频繁触发，可用于记录观看时长）
player.on('timeupdate', () => {
  console.log('当前时间：', player.currentTime());
});

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

// 监听错误
player.on('error', () => {
  const error = player.error();
  console.error('播放器报错：', error.code, error.message);
});

5. 播放 HLS (.m3u8) / DASH (.mpd) 流媒体

在较新的版本（包括 v10 Beta）中，Video.js 默认内置了 HTTP Streaming (VHS) 技术，无需像以前一样额外安装外部插件即可直接播放 HLS 和 DASH。

player.src({
  src: 'https://example.com/live/index.m3u8',
  type: 'application/x-mpegURL' // HLS 必须指定此 type
});

// 或者 DASH
player.src({
  src: 'https://example.com/live/index.mpd',
  type: 'application/dash+xml' // DASH 必须指定此 type
});

6. 在现代前端框架（如 React / Vue 3）中使用

在单页面应用（SPA）中，最关键的一点是：在组件销毁时，必须手动销毁播放器实例，以防止内存泄漏。

Vue 3 示例

<template>
  <div class="video-wrapper">
    <video ref="videoRef" class="video-js"></video>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

const videoRef = ref(null);
let player = null;

onMounted(() => {
  if (videoRef.value) {
    player = videojs(videoRef.value, {
      controls: true,
      fluid: true,
      sources: [{ src: 'https://example.com/video.mp4', type: 'video/mp4' }]
    });
  }
});

onBeforeUnmount(() => {
  // 必须调用 dispose() 销毁实例，该方法会同时移除 DOM 元素
  if (player) {
    player.dispose();
  }
});
</script>

7. 常见注意事项与 10 Beta 版特性

废弃旧版浏览器支持： Video.js 10 Beta 进一步移除了对 IE11 等老旧浏览器的 polyfill。如果你的业务场景需要支持极低版本的浏览器，建议留在 Video.js 7 或 8 分支。
销毁残留问题：千万不要只使用 v-if 或 v-show 去移除 <video> 标签而不执行 player.dispose()。直接移除 DOM 节点会导致 Video.js 的事件监听和内部定时器依然常驻内存。
样式自定义：你可以通过重写 CSS 来修改播放器的外观，例如改变主色调（默认是蓝色）：
```
.video-js {
  color: #ff6600; /* 修改进度条、按钮悬停时的颜色 */
}
```