CefSharp浏览器中调用JS控制YouTube视频播放/暂停功能失效求助

核心问题点 #

• 视频元素定位错误：你用document.getElementById('player')找不到YouTube的视频元素，YouTube的核心视频元素是<video>标签，而非ID为player的元素，且页面结构可能存在动态加载或嵌套情况。
• JS脚本未注入页面：JS文件和C#文件同文件夹不代表CefSharp会自动加载它，必须手动将脚本注入到当前页面上下文。
• 页面加载时机问题：如果页面未完全加载就执行脚本，会因元素未渲染导致失败。

具体修复步骤 #

1. 修正视频元素定位逻辑 #

替换原JS代码中的元素选择器，直接定位YouTube的<video>标签：

function toggleVideoPlayback() {
    // 直接获取页面中的video标签，YouTube核心视频使用该标签
    const videoElement = document.querySelector('video');
    if (videoElement) {
        if (videoElement.paused) {
            // 捕获play()可能抛出的异常（比如页面未交互时的自动播放限制）
            videoElement.play().catch(err => console.error(err));
        } else {
            videoElement.pause();
        }
        return !videoElement.paused;
    } else {
        console.log("未找到视频元素");
        return false;
    }
}

2. 将JS脚本注入CefSharp页面 #

CefSharp不会自动加载本地JS文件，需在页面加载完成后手动注入：

// 绑定CefSharp的FrameLoadEnd事件，确保页面加载完成后注入脚本
private void music_player_FrameLoadEnd(object sender, FrameLoadEndEventArgs e)
{
    // 只在主框架加载完成后执行
    if (e.Frame.IsMain)
    {
        string jsFilePath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "你的JS文件名.js");
        if (File.Exists(jsFilePath))
        {
            string jsContent = File.ReadAllText(jsFilePath);
            // 注入脚本到页面
            music_player.ExecuteScriptAsync(jsContent);
        }
    }
}

记得在窗体构造函数中绑定该事件：

public YourForm()
{
    InitializeComponent();
    // 绑定FrameLoadEnd事件
    music_player.FrameLoadEnd += music_player_FrameLoadEnd;
}

3. 简化C#脚本执行逻辑（可选） #

可以直接在C#代码中内嵌JS脚本，避免依赖外部文件，同时优化错误提示：

private async void Music_Play_Pause_Button_Click(object sender, EventArgs e)
{
    try
    {
        string script = @"
            function toggleVideo() {
                const video = document.querySelector('video');
                if (!video) return false;
                if (video.paused) {
                    video.play().catch(err => console.log(err));
                } else {
                    video.pause();
                }
                return !video.paused;
            }
            toggleVideo();
        ";
        var response = await music_player.EvaluateScriptAsync(script);

        if (response.Success)
        {
            bool isPlaying = response.Result != null && Convert.ToBoolean(response.Result);
            MessageBox.Show($"视频状态: {(isPlaying ? "播放中" : "已暂停")}");
        }
        else
        {
            // 显示详细错误信息，方便排查
            MessageBox.Show($"执行失败: {response.Message}");
        }
    }
    catch (Exception ex)
    {
        MessageBox.Show($"错误信息: {ex.Message}");
    }
}

4. 基础配置检查 #

确保CefSharp启用了JavaScript（默认启用，可手动确认）：

var settings = new CefSettings();
settings.JavascriptEnabled = true;
// 初始化CefSharp
Cef.Initialize(settings);

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