react videojs 自定义控制栏

要在 React 中使用 Video.js 并添加自定义控制栏，你可以按照以下步骤：

1. 安装 Video.js 和 React Video.js

在你的 React 项目中安装 Video.js 和 React Video.js：

npm install --save video.js react-videojs

2. 导入 Video.js 和 React Video.js

在你的组件中导入 Video.js 和 React Video.js：

import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import VideoJS from 'react-videojs';

3. 创建自定义控制栏

在 `componentDidMount` 生命周期中创建自定义控制栏。你可以使用 Video.js API 创建控制栏，例如：

componentDidMount() {
  const videoJsOptions = {
    controls: false,
    sources: [{
      src: 'https://example.com/path/to/video.mp4',
      type: 'video/mp4'
    }]
  };

  this.player = videojs(this.videoNode, videoJsOptions);

  const ControlBar = videojs.getComponent('ControlBar');

  const CustomControlBar = videojs.extend(ControlBar, {
    constructor: function() {
      ControlBar.apply(this, arguments);
      this.addClass('vjs-custom-control-bar');
    }
  });

  videojs.registerComponent('CustomControlBar', CustomControlBar);

  const customControlBar = new CustomControlBar(this.player);

  this.player.addChild(customControlBar);
  customControlBar.addChild('playToggle');
  customControlBar.addChild('currentTimeDisplay');
  customControlBar.addChild('timeDivider');
  customControlBar.addChild('durationDisplay');
  customControlBar.addChild('progressControl');
  customControlBar.addChild('volumePanel');
  customControlBar.addChild('fullscreenToggle');
}

在上面的代码中，我们创建了一个自定义控制栏，并将其添加到了 Video.js 播放器中。控制栏包含了常用的控制按钮和进度条。

4. 渲染 Video.js 播放器

在 `render` 方法中，渲染 Video.js 播放器：

render() {
  return (
    <div data-vjs-player>
      <video ref={ node => this.videoNode = node } className="video-js"></video>
    </div>
  )
}

这将在 DOM 中创建一个 `<video>` 元素并将其传递给 Video.js。

5. 完整代码示例

下面是一个完整的代码示例，演示如何在 React 中使用 Video.js 并添加自定义控制栏：

import React, { Component } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import VideoJS from 'react-videojs';

export default class VideoPlayer extends Component {
  componentDidMount() {
    const videoJsOptions = {
      controls: false,
      sources: [{
        src: 'https://example.com/path/to/video.mp4',
        type: 'video/mp4'
      }]
    };

    this.player = videojs(this.videoNode, videoJsOptions);

    const ControlBar = videojs.getComponent('ControlBar');

    const CustomControlBar = videojs.extend(ControlBar, {
      constructor: function() {
        ControlBar.apply(this, arguments);
        this.addClass('vjs-custom-control-bar');
      }
    });

    videojs.registerComponent('CustomControlBar', CustomControlBar);

    const customControlBar = new CustomControlBar(this.player);

    this.player.addChild(customControlBar);
    customControlBar.addChild('playToggle');
    customControlBar.addChild('currentTimeDisplay');
    customControlBar.addChild('timeDivider');
    customControlBar.addChild('durationDisplay');
    customControlBar.addChild('progressControl');
    customControlBar.addChild('volumePanel');
    customControlBar.addChild('fullscreenToggle');
  }

  componentWillUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }

  render() {
    return (
      <div data-vjs-player>
        <video ref={ node => this.videoNode = node } className="video-js"></video>
      </div>
    )
  }
}

注意，如果你需要在组件卸载时销毁 Video.js 播放器，请确保在 `componentWillUnmount` 生命周期中调用 `this.player.dispose()`。