Blazor Server项目中HLS视频无法播放问题求助

核心原因 #

Blazor Server的组件渲染机制会在状态变更时重新生成DOM节点，而Video.js实例是绑定到初始的<video>元素上的。当组件重新渲染时，旧的<video>元素被移除，导致Video.js的play()请求找不到对应的媒体元素，触发该错误。

具体修复步骤 #

1. 同步Video.js初始化与Blazor组件生命周期 #

在Blazor组件中，必须在组件渲染完成后初始化Video.js，并且在组件销毁前销毁Video.js实例，避免内存泄漏和DOM不匹配问题。

示例组件代码（Razor）：

@implements IAsyncDisposable
<div id="video-container">
    <video id="hls-player" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="360">
        <source src="/3D/test.m3u8" type="application/x-mpegURL" />
    </video>
</div>

@code {
    private IJSObjectReference? _videoJsModule;
    private IJSObjectReference? _playerInstance;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _videoJsModule = await JS.InvokeAsync<IJSObjectReference>("import", "/js/videojs-setup.js");
            _playerInstance = await _videoJsModule.InvokeAsync<IJSObjectReference>("initPlayer", "hls-player");
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (_playerInstance != null)
        {
            await _playerInstance.InvokeVoidAsync("dispose");
            await _playerInstance.DisposeAsync();
        }

        if (_videoJsModule != null)
        {
            await _videoJsModule.DisposeAsync();
        }
    }
}

2. 编写独立的Video.js初始化脚本（videojs-setup.js） #

将Video.js的初始化逻辑放在独立JS文件中，隔离Blazor渲染干扰：

export function initPlayer(elementId) {
    const player = videojs(elementId, {
        html5: {
            vhs: {
                overrideNative: true // 强制使用Video.js的HLS解析器，规避浏览器原生HLS兼容性问题
            }
        }
    });
    
    player.ready(function() {
        this.play().catch(err => {
            console.warn("自动播放失败，需用户交互触发:", err);
        });
    });
    
    return player;
}

3. 验证MIME类型与静态文件配置 #

在Program.cs中确保HLS相关文件的MIME类型正确配置：

var builder = WebApplication.CreateBuilder(args);

builder.Services.Configure<StaticFileOptions>(options =>
{
    options.ContentTypeProvider = new FileExtensionContentTypeProvider
    {
        Mappings = { [".m3u8"] = "application/x-mpegURL", [".ts"] = "video/MP2T" }
    };
});

var app = builder.Build();

app.UseStaticFiles();
// 其他中间件配置...

4. 避免组件不必要的重新渲染 #

检查组件中是否有频繁触发状态变更的逻辑，比如不必要的StateHasChanged()调用，导致<video>元素被重复销毁重建。可通过@key指令固定组件实例，或优化状态更新逻辑。

5. 处理浏览器自动播放限制 #

现代浏览器要求自动播放必须满足用户交互条件，可添加播放按钮由用户触发播放：

<button @onclick="PlayVideo">播放视频</button>

@code {
    private async Task PlayVideo()
    {
        if (_playerInstance != null)
        {
            await _playerInstance.InvokeVoidAsync("play");
        }
    }
}

排查要点 #

• 打开浏览器开发者工具，检查<video>元素是否在组件渲染后被移除或替换
• 确认Video.js实例是否在组件销毁时正确调用dispose()
• 测试手动触发播放（而非自动播放）是否正常工作

内容的提问来源于stack exchange，提问作者А.Терентьев