[React] 'react-player/lazy' 라이브러리 사용 연속 재생 가능한 비디오 플레이어 만들기

 

react-player/lazy 라이브러리 사용하여 연속 재생 및 옵션들 추가한 비디오 플레이어를 생성했다.

매우 간단 간결한 코드로 구현 가능하다.

 

 

😎구현 화면

😎구현 코드

npm i react-player/lazy

import React, {useEffect, useState} from "react";
import ReactPlayer from 'react-player/lazy';

const Video = ({title, vodPlaylistId}) => {
    const [playIndex, setPlayIndex] = useState(0);
    const playList = [
        {index:1, url: 'https://https://www.youtube.com/watch?v=UVRUKtHuZh0'},
        {index:2, url: 'http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8'},
        {index:3, url: 'http://playertest.longtailvideo.com/adaptive/wowzaid3/playlist.m3u8'}
    ];

    const handleNextVideo = (video, playIndex) => {
        if(playIndex === video.length - 1){
            setPlayIndex(0);
        }else{
            setPlayIndex(playIndex + 1);
        }
    }

    const selectVideo = (index) => {
        setPlayIndex(index);
    }

    if(playList === null) return <p>Loading...</p>;

    return (
        <>
            <h2>Player Test</h2>
            <div className='player-wrapper'>
                <ReactPlayer
                    url={playList[playIndex].url}
                    playing
                    controls
                    muted
                    progressInterval={1000}
                    pip={true}
                    onEnded={() => {handleNextVideo(playList, playIndex)}}
                    width={'800px'}
                    height={'500px'}
                />
            </div>
        </>
    );
};

export default Video;