videojs点击视频暂停react

在 React 中使用 Video.js 来实现点击视频暂停的功能，你可以按照以下步骤进行操作：

1. 首先，确保你已经安装了 Video.js 和 React：

npm install video.js react react-dom

2. 在你的 React 组件文件中引入 Video.js 的样式和组件：

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

3. 创建一个 React 组件来渲染视频播放器：

const VideoPlayer = () => {
  const videoRef = useRef(null);
  let player = null;

  useEffect(() => {
    player = videojs(videoRef.current, {}, () => {
      // 播放器初始化完成后的回调函数
    });

    return () => {
      // 组件卸载时销毁播放器实例
      if (player) {
        player.dispose();
      }
    };
  }, []);

  const handleVideoClick = () => {
    if (player.paused()) {
      player.play();
    } else {
      player.pause();
    }
  };

  return (
    <div>
      <video ref={videoRef} className="video-js"></video>
      <button onClick={handleVideoClick}>暂停/播放</button>
    </div>
  );
};

export default VideoPlayer;

在上面的代码中，我们创建了一个 `VideoPlayer` 组件，其中使用了 `useRef` 来获取视频元素的引用，并使用 `useEffect` 来初始化 Video.js 播放器实例。我们还定义了一个 `handleVideoClick` 函数，在按钮点击时切换视频的播放状态。

4. 在你的应用中使用 `VideoPlayer` 组件：

import React from 'react';
import VideoPlayer from './VideoPlayer';

const App = () => {
  return (
    <div>
      <h1>视频播放器</h1>
      <VideoPlayer />
    </div>
  );
};

export default App;

在这个示例中，我们将 `VideoPlayer` 组件用在 `App` 组件中，你可以根据自己的需求进行调整和扩展。

这样，当你点击按钮时，视频就会暂停或播放。请注意，这只是一个基本的示例，你可以根据自己的项目需求进行更多的定制和调整。