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: true,
    sources: [{
      src: 'https://example.com/path/to/video.mp4',
      type: 'video/mp4'
    }],
    controlBar: {
      children: [
        'playToggle',
        'currentTimeDisplay',
        'timeDivider',
        'durationDisplay',
        'progressControl',
        'customMenu'
      ]
    }
  };

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

  const MenuItem = videojs.getComponent('MenuItem');
  const CustomMenuButton = videojs.extend(MenuItem, {
    constructor: function() {
      MenuItem.apply(this, arguments);
      this.addClass('vjs-custom-menu-button');
      this.controlText('Custom Menu Button');
    },
    handleClick: function() {
      console.log('Custom menu button clicked');
    }
  });

  videojs.registerComponent('CustomMenuButton', CustomMenuButton);

  const customMenu = this.player.controlBar.addChild('customMenu');
  customMenu.addChild('CustomMenuButton', {});
}

在上面的代码中，我们创建了一个自定义菜单按钮，并将其添加到了 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: true,
      sources: [{
        src: 'https://example.com/path/to/video.mp4',
        type: 'video/mp4'
      }],
      controlBar: {
        children: [
          'playToggle',
          'currentTimeDisplay',
          'timeDivider',
          'durationDisplay',
          'progressControl',
          'customMenu'
        ]
      }
    };

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

    const MenuItem = videojs.getComponent('MenuItem');
    const CustomMenuButton = videojs.extend(MenuItem, {
      constructor: function() {
        MenuItem.apply(this, arguments);
        this.addClass('vjs-custom-menu-button');
        this.controlText('Custom Menu Button');
      },
      handleClick: function() {
        console.log('Custom menu button clicked');
      }
    });

    videojs.registerComponent('CustomMenuButton', CustomMenuButton);

    const customMenu = this.player.controlBar.addChild('customMenu');
    customMenu.addChild('CustomMenuButton', {});
  }

  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()`。