如何在 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.tw/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.tw/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 中建立影片播放器。