[PIP 모드 키기] 리액트로 Picture In Picture 창 켜보기 라이브러리 사용

PIP  모드란?

오른쪽 하단 작은 창을 의미한다.

PIP = Picture In Picture (사진 속 사진?)

 

리액트에서 라이브러리 사용하여 간단히 구현 가능하다.

 

😎 install

npm i react-use-pip

😎 import

import usePictureInPicture from 'react-use-pip'

😎Script

const videoRef = useRef(null)
    const {
        isPictureInPictureActive,           //PIP 모드가 활성인지 비활성인지 여부
        isPictureInPictureAvailable,        //PIP 모드가 지원되고 활성화되었는지 여부
        togglePictureInPicture,
    } = usePictureInPicture(videoRef)

😎HTML

<div className="App">
    <video 
        ref={videoRef} 
        autoPlay 
        muted 
        controls 
        loop 
        width="100%"
        src="https://storage.googleapis.com/media-session/caminandes/short.mp4"
    />
    {
        isPictureInPictureAvailable && 
            (
                <button onClick={() => togglePictureInPicture(!isPictureInPictureActive)}>
                    {isPictureInPictureActive ? 'Disable' : 'Enable'} Picture in Picture
                </button>
            )
    }
</div>

 

 

구현화면

버튼을 누르면 PIP모드가 활성화 된다.

유튜브 영상을 띄우고싶었는데 영상에 라이센스가 붙어있는듯 하다.

 

다음엔 유투브 영상 자동 루프 도는 코드를 작성하려한다.