在Blazor中使用Video.js播放YouTube视频——如何切换视频源

要实现切换YouTube视频源，你需要修改Blazor组件的参数监听逻辑，并在JavaScript中添加更新视频源的方法，具体步骤如下：

1. 修改Blazor组件代码 #

将Url参数改为带监听的属性，当URL变化时触发视频源更新：

<video id="my-player" controls class="video-js"></video>

@code {
    [Parameter] public int Width { get; set; } = 640;
    [Parameter] public int Height { get; set; } = 360;

    private string _url;
    [Parameter]
    public string Url
    {
        get => _url;
        set
        {
            if (_url != value)
            {
                _url = value;
                StateHasChanged();
                _ = UpdateVideoSourceAsync();
            }
        }
    }

    [Inject] private IJSRuntime JsRuntime { get; set; }

    private async Task UpdateVideoSourceAsync()
    {
        // 调用JS方法更新视频源
        await JsRuntime.InvokeVoidAsync("updateYouTubeVideoSource", "my-player", _url);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JsRuntime.InvokeVoidAsync("loadPlayer", "my-player", new
            {
                controls = true,
                autoplay = false,
                preload = "auto",
                width = Width,
                height = Height,
                techOrder = new[] { "youtube" },
                sources = new[]
                {
                    new { type = "video/youtube", src = Url }
                }
            });
        }
    }
}

2. 添加JavaScript方法 #

在项目全局JS文件（比如wwwroot/js/app.js）中添加以下方法，用来初始化播放器并更新视频源：

// 保存播放器实例，方便后续调用
let playerInstance;

function loadPlayer(playerId, options) {
    playerInstance = videojs(playerId, options);
}

function updateYouTubeVideoSource(playerId, newUrl) {
    // 优先使用已保存的实例，也可以通过videojs.getPlayer获取
    const player = playerInstance || videojs.getPlayer(playerId);
    
    if (player) {
        // 更新视频源
        player.src({ type: 'video/youtube', src: newUrl });
        // 加载新视频
        player.load();
        // 如果需要自动播放可以添加这行（注意浏览器自动播放限制）
        // player.play();
    }
}

关键说明 #

• 监听Url参数的变化：当父组件传入新的YouTube URL时，会自动触发UpdateVideoSourceAsync方法
• 复用播放器实例：避免重复初始化播放器，直接在已创建的实例上切换源
• 调用player.src()和player.load()：这两个方法是Video.js切换视频源的核心API，YouTube插件会自动处理新URL的加载

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