如何在 ReactJS 中设置 Video.js？

---

Video.js 是一款简单、直接且易于使用的现代视频播放器，支持各种视频播放格式，例如 mp4、FLV 等，以及 YouTube、Vimeo、flash 等现代格式。

Video.js 最好的地方在于它非常容易导入和使用到我们的项目中。在本文中，我们将通过几个例子来了解如何在我们的 React 项目中使用 video.js 库。

如何在 ReactJS 中设置 Video.js？

为了在我们的 React.js 项目中使用 video.js，我们首先需要在项目中创建一个 React 组件，然后我们可以在项目的各个地方使用该组件。

在本教程的这一部分，我们将了解如何创建一个函数组件以及如何在项目中使用它。然后，在本教程的后半部分，我们将尝试了解如何创建一个 video-js 类组件以及如何在项目中使用它。

函数组件 (useEffect)

让我们首先使用 useEffect React hook 创建一个 video-js 函数组件，它将返回一个带有“video-js”类的视频元素，稍后我们可以在项目的不同部分重复使用它。

请考虑以下 react.js 示例，以创建 videojs 的函数组件。

import React from 'react';
import videojs from 'video.js';
import 'video-js.css';
export const VideoJS = (props) => {
   const videoReference = React.useRef(null);
   const playerReference = React.useRef(null);
   const {options, onReady} = props;
   React.useEffect(() => {
      // Initializing video.js player
      if (!playerReference.current) {
         const videoElement = videoReference.current;
         if (!videoElement) return;
         const player = playerReference.current =
         videojs(videoElement, options, () => {
            videojs.log('Video player is ready');
            onReady && onReady(player);
         });
      }
   }, [options, videoReference]);

   // Destroy video.js player on component unmount
   React.useEffect(() => {
      const player = playerReference.current;
      return () => {
         if (player) {
            player.dispose();
            playerReference.current = null;
         }
      };
   }, [playerReference]);
   // wrap player with data-vjs-player` attribute
   // so no additional wrapper are created in the DOM
   return (
      <div data-vjs-player>
         <video ref={videoRef} className='video-js vjs-big-playcentered'/>
      </div>
   );
}
export default VideoJS;

在上面的代码片段中，我们做了以下操作：

• 首先，我们导入了 react-js、video-js 和 video-js-css。

• 然后，我们创建了一个名为“VideoJS”的函数组件，它返回一个视频播放器或<video>元素，其 className 为 'video-js'

• 如果当前没有可用的视频引用，则函数组件将初始化视频播放器并记录“Video Player is ready”。

• 它还在函数组件卸载时销毁播放器引用。

现在我们已经创建了一个 Video.js 函数组件，让我们看看如何在项目中使用这个组件。

import React from 'react';

// importing the VideoJS Functional component
import VideoJS from './VideoJS'

const App = () => {
   const playerReference = React.useRef(null);
   
   // setting the video-js option for the player
   const videoJsOptions = {
      autoplay: true,
      controls: true,
      responsive: true,
      fluid: true,
      sources: [{
      src: 'https://tutorialspoint.com/videos/sample480.mp4',
      type: 'video/mp4'
      }]
   };
   
   const playerReady = (player) => {
      playerReference.current = player;
      
      // handling video player
      player.on('waiting', () => {
         videojs.log('Video Player is waiting');
      });
      player.on('dispose', () => {
         videojs.log('Video player will dispose');
      });
   };
   return (
      <>
         <VideoJS options={videoJsOptions} onReady={playerReady} />
      </>
   );
}

在上面的示例中，我们首先导入了之前在文章中创建的 VideoJS 函数组件。我们在页面底部初始化了 VideoJs 组件，并使用了 videoJsOptions 和一些 onReady 函数。

videoJsOptions 也已定义，我们在其中为视频播放器设置一些属性，例如 controls、autoplay、responsive、fluid 等，以及 sources 视频数组。sources 数组包含我们要添加的视频文件的路径及其 MIME 类型。

“playerReady”处理所有将在我们的视频播放器处于“等待”状态或被释放时执行的函数和处理程序。

在您的 React 项目中执行上述代码将在 Web 浏览器中创建一个 mp4 视频播放器。现在我们已经了解了函数组件，让我们看看如何创建类组件。

类组件

在类组件中，我们将再次使用 video-js 初始化视频播放器引用。这次我们将使用 React 生命周期钩子，如“componentDidMount”和“componentWillUnmount”，来处理视频播放器的各个阶段。

请考虑以下代码示例，以创建一个返回 video-js 播放器的 video-js 类组件。

import React from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
export default class VideoJSPlayer extends React.Component {

   // Initialize video.js player instance
   componentDidMount() {
      this.player = videojs(this.videoNode, this.props, () => {
         videojs.log('video player ready', this);
      });
   }
   
   // Destroy video.js player reference
   componentWillUnmount() {
      if (this.player) {
         this.player.dispose();
      }
   }
   
   // wrap player with data-vjs-player` attribute
   // so no additional wrapper are created in the DOM
   render() {
      return (
         <div data-vjs-player>
            <video ref={node => this.videoNode = node}
 className="video-js"></video>
         </div>
      );
   }
}

在上面的类组件示例中，我们做了以下操作：

• 首先，我们导入了 reactjs、video-js 和 video-js css。

• 接下来，我们创建了一个名为 VideoJSPlayer 的类组件，它返回一个使用 className 为“video-js”创建的视频播放器。

• 我们使用 react componentDidMount() hook 在组件挂载时初始化视频播放器，并在组件卸载时使用 componentWillUnmount() hook 销毁视频播放器引用。

现在我们已经创建了一个 Video.js 类组件，让我们看看如何在项目中使用这个组件。

请考虑以下代码，以使用 VideoJSPlayer 类组件：

import React from 'react';

// importing the VideoJS Functional component
import VideoJSPlayer from './VideoJS'
const App = () => {

   // setting the video-js option for the player
   const videoJsOptions = {
      autoplay: true,
      controls: true,
      responsive: true,
      fluid: true,
      sources: [{
         src: 'https://tutorialspoint.com/videos/sample480.mp4',
         type: 'video/mp4'
      }]
   };
   return <VideoJSPlayer {...videoJsOptions} />
}

在上面的代码片段中，我们首先导入了我们在文章前面创建的“VideoJSPlayer”类组件。接下来，我们为视频播放器设置了一些选项，例如 autoplay、controls、responsive 和 fluid，以及 sources 数组。sources 数组包含我们需要为其创建视频播放器的所有视频文件的路径和类型。稍后在代码片段的底部，我们返回了 VideoJSPlayer 和 videoJSOptions。

执行上述代码将在 Web 浏览器中为 mp4 文件创建一个视频播放器，但这次我们使用了类组件而不是函数组件。

结论

在本教程中，我们了解了如何在项目中使用 React.js 框架设置 video.js。我们查看了两种可以在 React.js 中创建 video.js 组件的方法。此外，我们创建了 video.js 函数组件，并通过示例了解了其用法。在本教程的第二部分中，我们创建了一个类组件，并再次了解了如何使用它在 React.js 中创建视频播放器。