react video.js #1 시작하기

react에서 video.js를 사용하여 영상 플레이어 페이지를 만들고 옵션을 설정해보자.

api가 모두 셋팅되어있다는 조건 하에 작성되었다.

1. 영상 플레이어 띄우기

• video.js를 사용하여 영상 재생 페이지를 만들려면 두개의 컴포넌트가 필요하다. 1) 플레이어 환경을 설정하는 부모 컴포넌트 2) 플레이어를 재생하는 자식 컴포넌트

  1) 플레이어 환경 설정(부모)

  • 말 그래도 플레이어를 띄워줄 화면이다.
  • 여기서 플레이어의 조건, 환경 등을 설정해 줄 수 있다.
  • 공식문서에 나와있는 그대로만 따라해도 쉽게 적용 시킬 수 있다.

    import { useRef } from 'react';
    import Player from './Player';
    
    const Page = () => {
      const playerRef = useRef(null);
    
      const videoJsOptions = {
        // 동영상 재생 조건을 여기에 작성한다. option 설명은 아래에.
        autoplay: true, 
        controls: true, 
        responsive: true, 
        fluid: true,
        sources: [{
          src: '/path/to/video.mp4',
          type: 'video/mp4'
        }]
      };
    
      const handlePlayerReady = (player) => {
        // 동영상 재생 중 이벤트를 조작하려면 이 함수 안에 작성한다.
        playerRef.current = player;
    
        player.on('waiting', () => {
          videojs.log('player is waiting');
        });
    
        player.on('dispose', () => {
          videojs.log('player will dispose');
        });
      };
    
      return (
        <div>
          <Player options={videoJsOptions} onReady={handlePlayerReady} />
        </div>
      );
    }
    
    

  2) 플레이어 재생 화면(자식)

  • 공식문서 그대로

    import { useEffect, useRef } from 'react';
    import videojs from 'video.js';
    import 'video.js/dist/video-js.css';
    
    const Player = (props) => {
      const videoRef = useRef(null);
      const playerRef = useRef(null);
      const {options, onReady} = props;
    
      useEffect(() => {
        // 플레이어 초기화는 한번만.
        if (!playerRef.current) {
          const videoElement = videoRef.current;
    
          if (!videoElement) return;
    
          const player = playerRef.current = videojs(videoElement, options, () => {
            videojs.log('player is ready');
            onReady && onReady(player);
          });
    
      useEffect(() => {
        const player = playerRef.current;
    
        return () => {
          if (player) {
            player.dispose();
            playerRef.current = null;
          }
        };
      }, [playerRef]);
    
      return (
        <div data-vjs-player>
          <video ref={videoRef} className='video-js vjs-big-play-centered' />
        </div>
      );
    }
    
    export default Player;
    

    • 이렇게만 해도 영상 플레이어는 잘 나온다

2. option 설정하기

• 위에서 설정한 VideoJsOptions는 기본값이다.

  const videoJsOptions = {
    autoplay: true, // 페이지 로드 시 영상 자동 재생 여부, default: false
    controls: true, // 유저가 재생 조작 가능 여부 - false면 autoplay: true 조건에서만 재생됨
    responsive: true, // 반응형 에서 break point 적용 여부
    fluid: true, // 유저의 화면에 유동적으로 맞춤 여부
    sources: [{
      src: '/path/to/video.mp4', // 영상의 url 입력
      type: 'video/mp4' // 영상 확장자
    }]
  };
  

theme 적용, 단축키 설정, play 시간 기록 등은 videojs 2편에서.

react video.js 공식문서