3

我开始与 Blazor 合作。我的意图是一个接一个地播放一个随机视频。因此我想使用 Blazor 事件监听器。但是 onended 事件没有触发（onclick 一切正常）。

视频元素：

<figure id="video-player">
    <video autoplay="autoplay" @onended="NewVideo">
        @videoUrl
    </video>
</figure>

代码块：

private MarkupString videoUrl;

    protected override void OnInitialized()
    {
        NewVideo();
    }

    private void NewVideo()
    {
        videoUrl = new MarkupString($"<source src=\"videos/{tv.GetRandomVideoFileName()}\" type=\"video/mp4\">");

    }

OnInitialized 正在按预期工作，如果我将 onended 更改为 onclick 一切也正常。

提一下：我知道，只更改源不会启动下一个视频。那将是我在列表中的下一个任务:)。首先，我只想更改 DOM 中的源。

4

1 回答 1

2

简而言之，这是不支持的，也没有发布 v5 版本。在此处查看问题：

https://github.com/dotnet/aspnetcore/issues/24323

更长的故事是你必须启动一些 JS 互操作。参考在这里： https ://docs.microsoft.com/en-us/aspnet/core/blazor/call-dotnet-from-javascript?view=aspnetcore-5.0#component-instance-method-call

在 JS 方面，你需要这样的东西：

var player = document.getElementById('player');
player.onended = (e) => {
    DotNet.invokeMethodAsync('{assembly_name_here}', 'SongEnded');
};

程序集名称可能是项目的名称，例如MyBlazorApp. 然后在你的组件中，你需要一个静态动作来连接东西：

    protected override void OnInitialized()
    {
        action = UpdateMessage;
    }
    private static Action action;

    private void UpdateMessage()
    {
        // DO STUFF HERE
    }

    [JSInvokable]
    public static void SongEnded()
    {
        action.Invoke();
    }

当然，这有点笨拙，但本质上您是将 JS 事件映射到组件上的静态方法。您可能在想，“好吧，如果我有多个组件实例怎么办？” 在这种情况下，您必须在将上下文传递给静态方法并找到正确的实例方面有点创意。再次，检查上面的参考，它有很多例子。

于 2020-10-14T02:57:32.850 回答