如何实现视频流应用全客户端同步播放下一个视频？.NET Web应用问询

嗨，这个需求其实和搭建一个在线同步的电视频道一模一样，我之前在.NET项目里落地过类似的功能，给你拆解下核心思路和具体实现步骤，确保1000个用户能完美同步：

绝对不能让客户端自己判断视频结束时间，必须由后端维护一个全局统一的播放时间表，所有客户端的播放状态都跟着后端的指令走。这样不管客户端网络状况如何，只要能收到后端的通知，就能保证同步切换到下一个视频。

• 维护全局播放状态服务：创建一个单例服务（比如ChannelPlaybackService），用来存储当前播放的视频信息、已播放时长、下一个视频的URL和计划切换的UTC时间戳。这个服务要保证线程安全，用lock或者ConcurrentDictionary处理并发访问。
• 用SignalR做实时推送：SignalR是.NET生态里做实时双向通信的首选，支持WebSocket，延迟极低，适合给大量客户端广播通知。当当前视频临近结束时（比如提前10秒），后端主动给所有连接的客户端发送NextVideoReady消息，包含下一个视频的播放地址和精确的开始UTC时间戳。
• 处理客户端连接/重连逻辑：当新用户进来或者用户重连时，后端要能返回当前的播放状态（当前视频URL、已播放时长、下一个视频的切换时间），让客户端能快速同步到全局进度，而不是从头开始播放。

举个后端SignalR Hub的简化示例：

public class VideoSyncHub : Hub
{
    private readonly ChannelPlaybackService _playbackService;

    public VideoSyncHub(ChannelPlaybackService playbackService)
    {
        _playbackService = playbackService;
    }

    // 客户端请求当前播放状态
    public async Task<PlaybackStateDto> GetCurrentPlaybackState()
    {
        var state = await _playbackService.GetCurrentStateAsync();
        return new PlaybackStateDto
        {
            CurrentVideoUrl = state.CurrentVideo.Url,
            ElapsedSeconds = state.ElapsedSeconds,
            NextVideoUrl = state.NextVideo?.Url,
            NextVideoStartTimeUtc = state.NextVideo?.StartTimeUtc.ToUnixTimeMilliseconds()
        };
    }

    // 内部方法，由播放服务调用，广播下一个视频通知
    public async Task BroadcastNextVideo(NextVideoDto videoInfo)
    {
        await Clients.All.SendAsync("ReceiveNextVideo", videoInfo);
    }
}

• 监听SignalR通知：前端连接到SignalR Hub后，注册ReceiveNextVideo的回调。收到消息后，不要立刻播放，而是根据后端返回的UTC时间戳，计算本地需要等待的时长，到点再自动加载并播放下一个视频。
• 初始化同步：页面加载完成后，先调用后端的GetCurrentPlaybackState接口，拿到当前视频的进度，设置视频元素的currentTime到对应位置后再播放，避免新用户从头看起。
• 定期校准进度：为了应对网络延迟或视频加载异常，前端可以每5秒向后端请求一次当前播放进度，如果本地视频的currentTime和后端返回的进度偏差超过2秒，就自动调整到正确的进度，保证全局同步。

前端JS的简化示例：

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/videoSyncHub")
    .build();

// 监听下一个视频通知
connection.on("ReceiveNextVideo", (videoInfo) => {
    const now = Date.now();
    const delay = videoInfo.nextVideoStartTimeUtc - now;
    const videoElement = document.getElementById("main-video");

    if (delay > 0) {
        // 提前预加载下一个视频的元数据
        videoElement.preload = "metadata";
        videoElement.src = videoInfo.nextVideoUrl;
        // 到点自动播放
        setTimeout(() => {
            videoElement.play();
        }, delay);
    } else {
        // 如果已经过了开始时间，直接播放并调整进度
        videoElement.src = videoInfo.nextVideoUrl;
        videoElement.currentTime = (now - videoInfo.nextVideoStartTimeUtc) / 1000;
        videoElement.play();
    }
});

// 页面初始化时同步当前播放状态
async function initVideoPlayback() {
    try {
        await connection.start();
        const playbackState = await connection.invoke("GetCurrentPlaybackState");
        const videoElement = document.getElementById("main-video");
        
        videoElement.src = playbackState.currentVideoUrl;
        videoElement.currentTime = playbackState.elapsedSeconds;
        videoElement.play();
    } catch (err) {
        console.error(err);
    }
}

// 页面加载完成后初始化
window.addEventListener("load", initVideoPlayback);

• 统一用UTC时间：所有时间戳都用UTC，避免时区差异导致的同步错误，前端转换成本地时间计算等待时长即可。
• 集群部署用SignalR背板：如果你的.NET应用是多服务器集群部署，需要配置Redis作为SignalR的背板，这样消息能同步到所有服务器节点，保证所有客户端都能收到通知。
• 预加载优化：收到下一个视频的通知后，前端可以提前加载视频的部分内容（设置preload="auto"），减少切换时的加载卡顿。

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