React Web应用中如何实现多视角视频的无缝即时切换？

问题背景 #

开发的Web应用核心功能是提供同一事件的多视角录像，用户播放视频时切换至另一视角需保留当前播放进度。当前已实现切换功能，但切换过程存在轻微延迟，无法做到完全无缝、即时的切换效果。现有React代码片段如下：

const videoRef = useRef<HTMLVideoElement>(null);

const setTrackUrl = (url: string) => {
    const video = videoRef.current!;
    const currentTime = video.currentTime || 0;
    video.addEventListener("loadeddata", () => {
        video.currentTime = currentTime;
    })
    video.setAttribute('src', url);
    video.load();
    video.play();
}

需求是让浏览器在新视频加载完成前保持播放状态，实现无感知切换。

核心解决方案：双Video元素预加载 #

单Video元素切换src必然存在加载间隙，要实现无缝切换，需同时维护两个Video元素：一个负责当前播放，另一个提前加载目标视角的视频，等加载完成后直接切换显示，同时继续预加载下一个可能的视角。

具体实现步骤 #

• 创建双Video容器：在组件中渲染两个绝对定位的<video>元素，默认仅显示正在播放的实例。
• 预加载机制：用户触发视角切换时，将目标视频URL赋值给隐藏的Video元素，监听其canplaythrough事件（确保视频已加载足够数据可流畅播放）。
• 无缝切换：隐藏视频加载完成后，立即交换两个Video元素的显示状态，同步播放进度、音量、播放状态等参数，随后将原播放的Video元素作为下一次预加载的容器。
• 清理事件监听：每次切换后移除旧的事件监听，避免内存泄漏。

修改后的React代码示例 #

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

const MultiViewVideoPlayer = () => {
    // 维护两个video实例：current用于播放，next用于预加载
    const currentVideoRef = useRef<HTMLVideoElement>(null);
    const nextVideoRef = useRef<HTMLVideoElement>(null);
    // 标记当前显示的是current还是next
    const [showCurrent, setShowCurrent] = useState(true);
    // 记录当前播放状态：进度、播放状态、音量
    const [playState, setPlayState] = useState({
        currentTime: 0,
        isPlaying: false,
        volume: 1
    });

    // 同步当前播放视频的状态到状态变量
    useEffect(() => {
        const currentVideo = currentVideoRef.current;
        if (!currentVideo) return;

        const syncState = () => {
            setPlayState({
                currentTime: currentVideo.currentTime,
                isPlaying: !currentVideo.paused,
                volume: currentVideo.volume
            });
        };

        // 监听播放状态相关事件
        currentVideo.addEventListener('timeupdate', syncState);
        currentVideo.addEventListener('play', syncState);
        currentVideo.addEventListener('pause', syncState);
        currentVideo.addEventListener('volumechange', syncState);

        return () => {
            // 组件卸载或依赖变化时移除监听
            currentVideo.removeEventListener('timeupdate', syncState);
            currentVideo.removeEventListener('play', syncState);
            currentVideo.removeEventListener('pause', syncState);
            currentVideo.removeEventListener('volumechange', syncState);
        };
    }, []);

    const switchTrack = (url: string) => {
        const currentVideo = currentVideoRef.current!;
        const nextVideo = nextVideoRef.current!;
        const { currentTime, isPlaying, volume } = playState;

        // 配置预加载视频的参数
        nextVideo.src = url;
        nextVideo.currentTime = currentTime;
        nextVideo.volume = volume;
        nextVideo.load();

        // 视频加载完成后执行切换
        const onVideoReady = () => {
            nextVideo.removeEventListener('canplaythrough', onVideoReady);
            
            // 同步播放状态
            if (isPlaying) {
                nextVideo.play().catch(err => console.error('播放失败:', err));
            } else {
                nextVideo.pause();
            }

            // 切换显示的视频元素
            setShowCurrent(prev => !prev);

            // 交换两个ref的角色，为下一次切换做准备
            [currentVideoRef.current, nextVideoRef.current] = [nextVideoRef.current, currentVideoRef.current];
        };

        nextVideo.addEventListener('canplaythrough', onVideoReady);
    };

    return (
        <div style={{ position: 'relative', width: '100%', maxWidth: '800px', margin: '0 auto' }}>
            <video
                ref={currentVideoRef}
                style={{ 
                    width: '100%', 
                    display: showCurrent ? 'block' : 'none',
                    position: 'absolute',
                    top: 0,
                    left: 0
                }}
                controls
            />
            <video
                ref={nextVideoRef}
                style={{ 
                    width: '100%', 
                    display: showCurrent ? 'none' : 'block',
                    position: 'absolute',
                    top: 0,
                    left: 0
                }}
                controls
            />
            {/* 示例视角切换按钮，可根据实际视角列表动态生成 */}
            <div style={{ marginTop: '10px', display: 'flex', gap: '8px' }}>
                <button onClick={() => switchTrack('/video-angle-1.mp4')}>视角1</button>
                <button onClick={() => switchTrack('/video-angle-2.mp4')}>视角2</button>
                <button onClick={() => switchTrack('/video-angle-3.mp4')}>视角3</button>
            </div>
        </div>
    );
};

export default MultiViewVideoPlayer;

额外优化方向 #

• 智能预加载：根据用户操作习惯（如频繁切换相邻视角）提前预加载潜在目标视频，进一步缩短切换等待时间。
• 缓存利用：借助浏览器缓存机制，确保同一视角视频再次切换时无需重新加载，提升重复切换体验。
• 错误处理：为Video元素添加error事件监听，处理视频加载失败的情况，例如自动切回原视角并提示用户。

内容的提问来源于stack exchange，提问作者Gábor Kővesdán