网页视频无缝切换技术：利用多视频元素实现即时播放切换

const videoRef = useRef<HTMLVideoElement>(null);

const setTrackUrl = (url: string) => {
    const video = videoRef.current!;
    const currentTime = video.currentTime || 0;
    video.addEventListener("loadeddata", () => {
        video.currentTime = currentTime;
    }, { once: true }); // 确保事件只触发一次
    video.setAttribute('src', url);
    video.load();
    video.play();
}

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

interface VideoSource {
    id: string;
    url: string;
    label: string;
}

const videoSources: VideoSource[] = [
    { id: 'angle1', url: 'video1.mp4', label: '角度一' },
    { id: 'angle2', url: 'video2.mp4', label: '角度二' },
    { id: 'angle3', url: 'video3.mp4', label: '角度三' },
];

const SeamlessVideoSwitcher: React.FC = () => {
    // 使用一个Map来存储所有视频元素的引用
    const videoRefs = useRef<Map<string, HTMLVideoElement>>(new Map());
    // 当前活跃的视频ID
    const [activeVideoId, setActiveVideoId] = useState<string>(videoSources[0].id);
    // 跟踪所有视频是否都已加载好元数据
    const [loadedStates, setLoadedStates] = useState<Record<string, boolean>>({});

    // 初始化或更新视频元素
    const setupVideo = useCallback((videoElement: HTMLVideoElement | null, source: VideoSource) => {
        if (videoElement && !videoRefs.current.has(source.id)) {
            videoRefs.current.set(source.id, videoElement);
            // 预加载所有视频，但只有活跃视频可见
            videoElement.src = source.url;
            videoElement.muted = true; // 后台视频通常是静音的
            videoElement.load();

            // 监听loadeddata事件，确保元数据加载完成
            videoElement.addEventListener('loadeddata', () => {
                setLoadedStates(prev => ({ ...prev, [source.id]: true }));
                // 如果是初始活跃视频，并且已加载，则开始播放
                if (source.id === activeVideoId) {
                    videoElement.play().catch(e => console.error("Error playing video:", e));
                }
            }, { once: true }); // 只监听一次
        }
    }, [activeVideoId]);

    // 切换视频逻辑
    const switchVideo = useCallback((newVideoId: string) => {
        const currentVideo = videoRefs.current.get(activeVideoId);
        const nextVideo = videoRefs.current.get(newVideoId);

        if (currentVideo && nextVideo) {
            const currentTime = currentVideo.currentTime;

            // 停止当前视频播放（可选，但有助于节省资源）
            currentVideo.pause();
            currentVideo.style.display = 'none'; // 隐藏当前视频

            // 同步时间并播放新视频
            nextVideo.currentTime = currentTime;
            nextVideo.muted = false; // 新活跃视频取消静音
            nextVideo.style.display = 'block'; // 显示新视频

            nextVideo.play().catch(e => console.error("Error playing new video:", e));
            setActiveVideoId(newVideoId);
        }
    }, [activeVideoId]);

    // 确保初始活跃视频在加载完成后开始播放
    useEffect(() => {
        const initialActiveVideo = videoRefs.current.get(activeVideoId);
        if (initialActiveVideo && loadedStates[activeVideoId]) {
            initialActiveVideo.muted = false; // 初始活跃视频取消静音
            initialActiveVideo.play().catch(e => console.error("Error playing initial video:", e));
        }
    }, [activeVideoId, loadedStates]);


    return (
        <div style={{ position: 'relative', width: '640px', height: '360px' }}>
            {videoSources.map(source => (
                <video
                    key={source.id}
                    ref={el => setupVideo(el, source)}
                    style={{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        width: '100%',
                        height: '100%',
                        display: source.id === activeVideoId ? 'block' : 'none',
                    }}
                    preload="metadata" // 预加载元数据
                    playsInline // 移动端内联播放
                />
            ))}

            <div style={{ position: 'absolute', bottom: '10px', left: '10px', zIndex: 10 }}>
                {videoSources.map(source => (
                    <button
                        key={source.id}
                        onClick={() => switchVideo(source.id)}
                        disabled={activeVideoId === source.id || !loadedStates[source.id]}
                        style={{ margin: '5px', padding: '8px 15px', cursor: 'pointer' }}
                    >
                        {source.label} {loadedStates[source.id] ? '' : '(加载中...)'}
                    </button>
                ))}
            </div>
        </div>
    );
};

export default SeamlessVideoSwitcher;