ブラウザでビデオプレーヤーを実装するための基本的な考え方とコード

//1 秒のビデオに必要なストレージ容量は次のとおりです。
1920*1080*3*24バイト
//30分のビデオに必要なストレージ容量:
1920*1080*3*24 * 60*30=250.28GB

<ビデオ コントロール poster="1.jpg" src="1.mp4" ループ ミュート></ビデオ>
<オーディオコントロール src="1.mp3"></オーディオ>

関数formatDuration(期間) {
    var sec_num = parseInt(duration, 10); // 2番目のパラメータを忘れないでください
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (時間 * 3600) - (分 * 60);

    if (時間 < 10) {時間 = "0"+時間;}
    if (分 < 10) {分 = "0"+分;}
    if (秒 < 10) {秒 = "0"+秒;}
    時間+':'+分+':'+秒を返します。
}

React をインポートし、{createRef、useState} を 'react' から取得します。
'./VideoPlayer.css' をインポートします
関数 VideoPlayer({src}){
    定数ビデオDom = createRef()
    // 現在のビデオ再生時間 const [curTime,setCurTime]=useState(0)
    // ビデオの長さ const [duration,setDuration]=useState(0)
    // ビデオの状態、一時停止するかどうか const [isPause,setPause]=useState(true)
    // ビデオの実際のサイズ const [size,setSize]=useState({width:1920,height:1080})
    // ビデオ読み込み const [waiting,setWaiting]=useState(true)

    // ビデオメタデータが正常に読み込まれました const onLoad=(e)=>{
        定数 {期間、ビデオ幅、ビデオ高さ} = e.target
        setDuration(継続時間)
        setSize({幅:ビデオ幅、高さ:ビデオ高さ})
        待機中(false)
    }
    // 再生の一時停止を制御する const handlePlay=(play)=>{
        定数 v = videoDom.current
        if(プレイ){
            一時停止を設定します(false)
            v.play()
        }それ以外{
            一時停止を設定します(true)
            v.一時停止()
        }

    }
    // スライダーをドラッグするとビデオの現在の時間が変更されます
    定数 onSliderChange=(e)=>{
        setCurTime(e.target.value)
        videoDom.current.currentTime=e.target.value

    }
    // ビデオの時間更新をリッスンする
    定数 onTimeUpdate=()=>{
        定数 v = videoDom.current
        setCurTime(v.currentTime)
        if(v.ended){
            ハンドルプレイ(false)
            v.現在の時間=0
        }
    }
    //スタックしたら、読み込みプロンプトを表示します const onWaiting=()=>{
        待機中(true)
    }
    // ビデオを再生できる場合は、読み込みプロンプトを非表示にします const onCanPlay=()=>{
        待機中(false)
    }
    <div className="video-wrapper"> を返します。
            <ビデオ ref={videoDom} src={src} onLoadedMetadata={onLoad} onTimeUpdate={onTimeUpdate} onWaiting={onWaiting} onCanPlay={onCanPlay} ></ビデオ>
            動画の読み込み中に読み込み中と表示されます */
            {待機中 && <div className="waiting">読み込み中...</div>}
            <div className="ビデオコントロール">
                再生ボタン */
                {isPause? <button onClick={()=>{handlePlay(true)}}>再生</button>: <button onClick={()=>{handlePlay(false)}}>一時停止</button>}
                {/* 進捗バー */
                <input type="range" min="0" max={duration} value={curTime} onChange={onSliderChange}/>
                時刻情報と解像度情報*/
                {formatDuration(現在の時間)}/{formatDuration(期間)}
                <span>解像度: {size.width}x{size.height}}</span>
            </div>
        </div>
}
デフォルトの VideoPlayer をエクスポートする

.ビデオラッパー{
    幅:800ピクセル;
}
.video-wrapper>ビデオ{
    幅: 100%;
}

.ビデオコントロール{
    上マージン: 20px;
}