如何在React中实现多视频无缝循环播放？解决移动端控件刷新问题

我用以下代码实现多视频连续播放：

import React, { useState ,useEffect,useRef} from 'react'

export function VideoPlayer({playlist}) {

    const [currentlyPlaying, setCurrentlyPlaying] = useState(playlist[0]);


    const player=useRef(null);
    const playNext=()=>{
        let currentIndex=playlist.indexOf(currentlyPlaying);
        if(currentIndex<playlist.length-1){
            setCurrentlyPlaying(playlist[currentIndex+1]);
        }
        else{
            setCurrentlyPlaying(playlist[0]);
        }
        //reset the player
        player.current.load();

    }


    return (
        <div>
            <video width="320" height="240" controls ref={player} autoPlay onEnded={playNext} ref={player}>

                <source src={currentlyPlaying} type="video/mp4"/>
                Your browser does not support the video tag.
            </video>
        </div>
    )

}

这段代码在桌面端表现尚可，但移动端每次切换视频都会刷新控件，显得十分突兀（视频仅几秒长）。请问是否存在更无缝的多视频连续播放实现方式？

方案1：预加载下一个视频 + 动态修改source不重载播放器 #

核心是避免调用load()重置播放器，直接修改<source>的src属性，同时提前预加载下一个视频，消除切换时的空白与控件刷新。

修改后的代码：

import React, { useState, useRef, useEffect } from 'react'

export function VideoPlayer({ playlist }) {
    const [currentIndex, setCurrentIndex] = useState(0);
    const playerRef = useRef(null);
    const nextVideoRef = useRef(null);

    // 预加载下一个视频
    useEffect(() => {
        const nextIdx = (currentIndex + 1) % playlist.length;
        if (nextVideoRef.current) {
            nextVideoRef.current.src = playlist[nextIdx];
            nextVideoRef.current.load(); // 预加载但不播放
        }
    }, [currentIndex, playlist]);

    const playNext = () => {
        const nextIdx = (currentIndex + 1) % playlist.length;
        setCurrentIndex(nextIdx);
        // 直接替换当前播放器的source，不重载整个播放器
        const sourceEl = playerRef.current.querySelector('source');
        sourceEl.src = playlist[nextIdx];
        playerRef.current.play();
    };

    return (
        <div>
            <video 
                width="320" 
                height="240" 
                controls 
                ref={playerRef} 
                autoPlay 
                onEnded={playNext}
            >
                <source src={playlist[currentIndex]} type="video/mp4"/>
                Your browser does not support the video tag.
            </video>
            {/* 隐藏的预加载视频元素 */}
            <video ref={nextVideoRef} style={{ display: 'none' }} preload="auto"></video>
        </div>
    )
}

方案2：双视频元素切换（零控件刷新） #

使用两个<video>元素，一个处于显示播放状态，另一个后台预加载下一个视频，播放结束后直接切换显示状态，完全保留控件的DOM状态，避免刷新。

代码示例：

import React, { useState, useRef, useEffect } from 'react'

export function VideoPlayer({ playlist }) {
    const [currentIndex, setCurrentIndex] = useState(0);
    const videoRefs = useRef([React.createRef(), React.createRef()]);
    const activeVideoIdx = useRef(0);

    useEffect(() => {
        // 初始化加载第一个视频并播放
        videoRefs.current[0].current.src = playlist[0];
        videoRefs.current[0].current.play();
        // 预加载第二个视频
        const nextIdx = (currentIndex + 1) % playlist.length;
        videoRefs.current[1].current.src = playlist[nextIdx];
        videoRefs.current[1].current.load();
    }, []);

    const playNext = () => {
        const prevIdx = activeVideoIdx.current;
        activeVideoIdx.current = 1 - activeVideoIdx.current;
        const nextIdx = (currentIndex + 1) % playlist.length;
        setCurrentIndex(nextIdx);
        
        // 切换视频显示状态并播放
        videoRefs.current[prevIdx].current.style.display = 'none';
        const currentVideo = videoRefs.current[activeVideoIdx.current];
        currentVideo.current.style.display = 'block';
        currentVideo.current.play();

        // 预加载下一个视频到闲置的video元素
        const idleIdx = 1 - activeVideoIdx.current;
        const nextLoadIdx = (nextIdx + 1) % playlist.length;
        videoRefs.current[idleIdx].current.src = playlist[nextLoadIdx];
        videoRefs.current[idleIdx].current.load();
    };

    return (
        <div style={{ position: 'relative', width: '320px', height: '240px' }}>
            {videoRefs.current.map((ref, idx) => (
                <video
                    key={idx}
                    ref={ref}
                    width="320"
                    height="240"
                    controls
                    style={{ 
                        position: 'absolute', 
                        top: 0, 
                        left: 0,
                        display: idx === activeVideoIdx.current ? 'block' : 'none'
                    }}
                    onEnded={playNext}
                >
                    <source type="video/mp4"/>
                    Your browser does not support the video tag.
                </video>
            ))}
        </div>
    )
}

关键优化说明 #

• 移除player.current.load()：该方法会重置整个播放器的DOM状态，是移动端控件刷新的核心诱因。
• 预加载机制：提前加载下一个视频，确保切换时视频已就绪，减少空白等待。
• 复用DOM元素：通过动态修改source或切换显示状态，保留控件的原有DOM节点，避免重新渲染导致的刷新。

内容的提问来源于stack exchange，提问作者user2741831