C#滑块向CefSharp中YouTube视频同步进度的实现问题

你已经完成了视频进度到C#滑块的同步，现在要实现滑块拖动同步到视频播放时间，核心是通过CefSharp的EvaluateScriptAsync调用浏览器端的JavaScript来控制YouTube视频的播放位置。

解决方案代码 #

修改你的Music_ProgressBar_Scroll方法为异步方法，通过执行JS脚本设置视频的播放时间：

private async void Music_ProgressBar_Scroll(object sender, ScrollEventArgs e)
{
    int sliderValue = Music_ProgressBar.Value;
    // 构造JS脚本：根据滑块百分比计算目标播放时间并设置
    string script = $@"
        const video = document.querySelector('video');
        if (video && !isNaN(video.duration)) {{
            const targetTime = ({sliderValue} / 100) * video.duration;
            video.currentTime = targetTime;
        }}";
    // 执行脚本
    await music_player.GetMainFrame().EvaluateScriptAsync(script);
}

关键说明 #

1. 获取YouTube视频元素：YouTube的视频播放元素可以通过document.querySelector('video')直接获取，无需依赖进度条的DOM元素。
2. 播放时间计算：滑块值是0-100的百分比，需要结合视频总时长video.duration计算出对应的播放秒数，再赋值给video.currentTime。
3. 异步执行脚本：EvaluateScriptAsync是异步方法，所以要把事件方法标记为async void（WinForms/WPF事件方法允许这种写法）。

优化建议 #

• 防抖处理：滑块拖动时会频繁触发Scroll事件，可添加防抖逻辑（比如延迟500ms再执行脚本），避免频繁调用JS脚本影响性能。
• 状态判断：可以增加判断视频是否处于可播放状态（video.readyState >= 2），避免在视频未加载完成时执行脚本出错。

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