优化网页视频切换体验：多视频元素预加载技术详解

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

// 定义视频源的接口
interface VideoSource {
    id: string; // 视频的唯一标识符，例如 '视角一', 'angle2'
    url: string; // 视频文件的URL
}

// 视频播放器组件的Props
interface SeamlessVideoPlayerProps {
    sources: VideoSource[]; // 所有可切换的视频源列表
    initialSourceId: string; // 初始播放的视频ID
}

const SeamlessVideoPlayer: React.FC<SeamlessVideoPlayerProps> = ({ sources, initialSourceId }) => {
    // 使用Map来存储所有视频元素的引用，方便通过ID访问
    const videoRefs = useRef<Map<string, HTMLVideoElement>>(new Map());
    // 跟踪当前正在播放且可见的视频ID
    const [activeVideoId, setActiveVideoId] = useState<string>(initialSourceId);

    // 组件挂载后，确保初始视频开始播放
    useEffect(() => {
        const initialVideo = videoRefs.current.get(initialSourceId);
        if (initialVideo) {
            initialVideo.play().catch(e => console.error("初始视频播放失败:", e));
        }
    }, [initialSourceId]); // 依赖于initialSourceId，确保只在组件首次渲染或initialSourceId改变时执行

    /**
     * 处理视频切换逻辑
     * @param targetId 目标视频的ID
     */
    const handleVideoSwitch = (targetId: string) => {
        // 如果目标视频已经是当前活动视频，则无需切换
        if (targetId === activeVideoId) return;

        const currentActiveVideo = videoRefs.current.get(activeVideoId); // 获取当前活动视频元素
        const targetVideo = videoRefs.current.get(targetId); // 获取目标视频元素

        // 检查视频元素是否存在
        if (!currentActiveVideo || !targetVideo) {
            console.error("切换视频时未找到对应的视频元素。");
            return;
        }

        const currentTime = currentActiveVideo.currentTime; // 获取当前视频的播放时间点

        // 1. 设置目标视频的播放时间，使其与当前视频同步
        targetVideo.currentTime = currentTime;
        // 2. 尝试播放目标视频。Promise resolved表示播放成功
        targetVideo.play().then(() => {
            // 3. 目标视频开始播放后，更新状态以切换可见性
            setActiveVideoId(targetId);
            // 4. 暂停旧视频以释放资源
            currentActiveVideo.pause();
        }).catch(error => {
            // 如果目标视频因某些原因（如浏览器策略）无法自动播放，
            // 仍然尝试切换可见性，但可能不是完全无缝
            console.error("目标视频播放失败，尝试立即切换:", error);
            setActiveVideoId(targetId);
            currentActiveVideo.pause();
        });
    };

    /**
     * 辅助函数，用于将视频元素引用存储到ref Map中
     * @param id 视频ID
     * @param element 视频DOM元素
     */
    const setVideoRef = (id: string, element: HTMLVideoElement | null) => {
        if (element) {
            videoRefs.current.set(id, element);
        } else {
            videoRefs.current.delete(id); // 组件卸载时清理引用
        }
    };

    return (
        <div style={{ position: 'relative', width: '100%', maxWidth: '800px', margin: 'auto', paddingTop: '56.25%' /* 16:9 比例 */ }}>
            {sources.map((source) => (
                <video
                    key={source.id}
                    ref={(el) => setVideoRef(source.id, el)} // 绑定ref
                    src={source.url}
                    preload="auto" // 告知浏览器可以预加载媒体数据
                    playsInline // 移动端内联播放，避免全屏
                    // 通过CSS控制视频的可见性：只有activeVideoId对应的视频才显示
                    style={{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        width: '100%',
                        height: '100%',
                        objectFit: 'cover', // 保持视频宽高比并填充容器
                        display: activeVideoId === source.id ? 'block' : 'none',
                    }}
                    controls={activeVideoId === source.id} // 只有活动视频显示控制条
                    loop={activeVideoId === source.id} // 只有活动视频循环
                    muted={activeVideoId !== source.id} // 非活动视频默认静音，避免多音轨干扰
                    // 可以在这里添加其他事件监听器，例如 onLoadedData 来处理预加载完成的逻辑
                />
            ))}

            {/* 视频切换控制按钮区域 */}
            <div style={{
                position: 'absolute',
                bottom: '10px',
                left: '10px',
                zIndex: 10, // 确保按钮在视频上方
                backgroundColor: 'rgba(0,0,0,0.5)',
                padding: '10px',
                borderRadius: '5px'
            }}>
                {sources.map((source) => (
                    <button
                        key={`btn-${source.id}`}
                        onClick={() => handleVideoSwitch(source.id)}
                        disabled={activeVideoId === source.id} // 当前活动视频的按钮禁用
                        style={{
                            margin: '0 5px',
                            padding: '8px 15px',
                            cursor: 'pointer',
                            backgroundColor: activeVideoId === source.id ? '#007bff' : '#6c757d',
                            color: 'white',
                            border: 'none',
                            borderRadius: '3px'
                        }}
                    >
                        {source.id}
                    </button>
                ))}
            </div>
        </div>
    );
};

export default SeamlessVideoPlayer;

// 如何在你的应用中使用这个组件：
/*
import SeamlessVideoPlayer from './SeamlessVideoPlayer'; // 假设文件名为SeamlessVideoPlayer.tsx

function App() {
    const videoSources = [
        { id: '视角一', url: 'path/to/video1.mp4' },
        { id: '视角二', url: 'path/to/video2.mp4' },
        { id: '视角三', url: 'path/to/video3.mp4' },
    ];

    return (
        <div>
            <h1>多角度视频播放器</h1>
            <SeamlessVideoPlayer
                sources={videoSources}
                initialSourceId="视角一"
            />
        </div>
    );
}

export default App;
*/