시작하기 전에 비디오 버퍼 메모리를 읽는 [React]

규격.

react에 구성 요소를 설치할 때 appi에서 가져온 URL을 비디오의 원본에 넣고 읽기 시작합니다. 모든 버퍼 메모리를 읽은 후 재생 단추를 누르십시오.
이용자의 경험을 고려할 때 영상을 다 읽지 않고 재생할 수 없다면 조금 나쁘다고 느낄 수도 있지만, 앱 때문에 영상을 중도에 정지하는 게 더 낫다는 판단에 따라 이 같은 방법으로 바뀐 것이다.
일정 시간 동안 모두 읽을 수 없으면 재생을 건너뜁니다.

proeload 속성 추가

이번에 실시된 방법은react-helmet에preload 속성을 추가한 링크 라벨을 사용하여 읽을 동영상의 원본을 미리 불러오는 방법입니다.

import { useEffect } from 'react';
import Helmet from 'react-helmet';
import useVideoData from './path/to/useVideoData';

export const App = () => {   
    const { videoState, fetchVideo } = useVideoData();
    
    useEffect(() => {
        fetchVideo();
    }, [])
    
    return (
        <div>
           <Helmet>
                <link rel='preload' href={videoState.url} as='video' />
            </Helmet> 
            <video src={videoState.url} />
        </div>
    )
}

위의 소스는 설치할 때 미리 불러올 수 있으며, 이렇게 하면 버퍼 메모리를 완전히 읽지 않은 상태에서도 재생할 수 있다.
이번 설치는 모든 버퍼를 읽는 단계에서 재생됩니다.

버퍼가 duration과 같지 않으면 동영상을 숨깁니다

setInterval에서 비디오가 어느 정도 읽혔는지 확인하고 읽은 상태를 판단할 준비가 되어 있으며, 이 상태로 숨기기를 제어합니다.

import { useEffect, useRef, useState } from 'react';
import Helmet from 'react-helmet';
import useVideoData from './path/to/useVideoData';

export const App = () => {   
    const { videoState, fetchVideo } = useVideoData();
    const [isCompleted, setIsCompleted] = useState(false);
    const videoRef = useRef(null);
    
    useEffect(() => {
        fetchVideo();
    }, [])

    useEffect(() => {
    if (!isCompleted) {
        const intervalId = setInterval(() => {
            const videoBuf = videoRef.current.buffered;
            const videoDuration = videoBuf.duration;
            const videoBufEnd = videoBuf.end(0);

            if (videoBufEnd / videoDuration === 1 ) {
                setIsCompleted(true);
                clearInterval(intervalId);
            }
        }, 1000);

        setTimeout(() => {
            clearInterval(intervalId);
        }, 10000);
    }
    }, [isCompleted])
    
    return (
        <div>
           <Helmet>
                <link rel='preload' href={videoState.url} as='video' />
            </Helmet>
            { isCompleted && <video src={videoState.url} ref={videoRef} /> }
        </div>
    )
}

끝맺다

실제 실시에서 여기서부터 다양한 조정이 이루어졌는데 기본적인 논리는 이렇다.