如何在ReactJS中使用VideoJS插件？解决videojs-offset报错问题

你遇到的TypeError: this.player.offset is not a function错误，大概率是因为videojs-offset插件没有正确注册到VideoJS的播放器实例上，或者调用时机不对。我给你整理了一套完整的解决步骤和代码示例：

第一步：确认依赖安装正确 #

先确保你已经安装了所有必要的依赖包，如果没装的话，执行下面的命令：

npm install video.js videojs-offset videojs-contrib-hls --save
# 或者用yarn
yarn add video.js videojs-offset videojs-contrib-hls

第二步：调整导入与插件注册顺序 #

很多时候插件无法生效，是因为导入顺序不对，而且部分插件需要手动注册到VideoJS上。你需要先导入VideoJS，再导入插件，然后手动调用插件的注册方法：

import React from 'react';
import './App.css';
import "video.js/dist/video-js.css";
import videojs from 'video.js';
import videoJsContribHls from 'videojs-contrib-hls';
import offset from 'videojs-offset';

// 关键：手动将插件注册到VideoJS上
offset(videojs);
videoJsContribHls(videojs); // HLS插件同样需要手动注册

第三步：正确初始化播放器并调用offset方法 #

要注意，必须等VideoJS播放器完全初始化完成后，再调用offset方法，最好放在播放器的初始化回调里。同时要记得在组件卸载时销毁播放器，避免内存泄漏：

export default class VideoPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.videoRef = React.createRef();
    this.player = null;
  }

  componentDidMount() {
    // 初始化播放器，传入配置项，在回调里处理插件逻辑
    this.player = videojs(this.videoRef.current, this.props.options, () => {
      console.log('播放器初始化完成');
      // 这里调用offset方法就不会出错了
      this.player.offset({
        start: 10, // 设置从第10秒开始播放
        end: 30    // 设置到第30秒结束播放
      });
    });
  }

  componentWillUnmount() {
    // 组件卸载时销毁播放器
    if (this.player) {
      this.player.dispose();
    }
  }

  render() {
    return (
      <div data-vjs-player>
        <video
          ref={this.videoRef}
          className="video-js vjs-big-play-centered"
        />
      </div>
    );
  }
}

可选：添加默认配置和类型校验 #

为了让组件更健壮，可以加上默认的播放器配置和props类型校验：

import PropTypes from 'prop-types';

// 定义props类型
VideoPlayer.propTypes = {
  options: PropTypes.object
};

// 默认播放器配置
VideoPlayer.defaultProps = {
  options: {
    controls: true,
    responsive: true,
    fluid: true,
    sources: [{
      src: '你的视频地址.m3u8', // 替换成你的HLS视频地址
      type: 'application/x-mpegURL'
    }]
  }
};

额外排查点 #

如果按照上面的步骤还是出错，可以检查这两点：

• 版本兼容性：确认videojs-offset的版本和你使用的video.js版本是否匹配，有些旧版插件可能不支持新版VideoJS。
• 重复导入：检查项目中是否有其他地方重复导入了video.js，导致插件注册到了不同的实例上。

内容的提问来源于stack exchange，提问作者Vishwajeet Vatharkar