Angular HTML5视频“；完"；事件有时在视频结束时不触发

在我和我的团队正在开发的应用程序中，我们利用HTML5视频组件全屏显示

.mp4

视频。该应用程序在后端是ASP.NET Web API，在前端是Electron应用程序，在前端是Angular 4。其工作方式如下：

• 一旦Electron应用程序启动，它就会ping API
• 后端提供应用程序的url，以便通过信号器播放
• 然后，应用程序加载视频并通知后端视频已加载并启动
• 一旦触发

  （结束）

  ，我们将通知后端视频已结束
• 然后，该应用程序在可配置的时间内显示一些其他内容（由后端提供）
• 一旦后端超时过期，我们通知Electron应用程序显示下一个要播放的视频
• 单击当前显示的视频将中断视频，并显示其他内容。超时过期后，后端将为中断的视频提供服务
• 重复

我们最近发现的一个问题是，有时当视频结束时，

（end）

不会被触发，我们的应用程序一直处于停滞状态，因为它从未向后端生成视频已结束的回调

代码如下：

用于视频显示的组件

<div (click)="clickOnScreen()" class="full-size" [@fadeInOut]>
    <video muted autoplay preload="auto" (ended)="onVideoEnded()" #videoplayer>
        <source [src]="sanitizeUrl(videoPath)" type="video/mp4" />
    </video>
</div>

onVideoEnded() {
        this.logger.info("Video ended.");
        const videoEnded = new VideoEnded();

        const subscription = this.videoPlayerService.videoEnded(videoEnded).subscribe(
            (success) => {
                this.logger.info("Successfully notified Backend that the video has ended.");
                subscription.unsubscribe();
            },
            (error) => {
                this.logger.error(error);
                subscription.unsubscribe();
            });
    }

---

我已经查看了是否有与视频本身相关的内容，但是所有配置的视频都可以播放4-5个小时，然后突然停止，并且

（结束）

不会被触发。是否有其他方法对此进行故障排除？任何帮助都将不胜感激

HTML视频公开了一个事件。您是否也尝试过跟踪错误事件，以防其他事情妨碍您？@offbeatmal是的，昨天就这样做了，让它在夜间运行。还是没什么。我在日志中看到它只是在某个时刻停止，就是这样-我必须通过点击屏幕手动触发它。然而，今天早上我注意到的一件有趣的事情是：

错误：gles2_cmd_decoder.cc（9636）][DisplayCompositor-0E0AA130]渲染警告：绑定到纹理单元0的纹理不可渲染。它可能不是2的幂次函数，并且具有不兼容的纹理过滤。

我将进一步调查，但仍不清楚发生了什么。

private loadVideo(videos: Videos[]) {
        this.videos = videos;

        if (this.videos === null || this.videos.length === 0) {
            this.logger.warn("no videos sent!");
            return;
        }

        this.logger.info("Starting playback...");
        this.startPlayback();

        this.logger.info("Playback started! Notifying Backend that the video has been displayed...");    
        const subscription = this.videoPlayerService.videoDisplayedOnScreen().subscribe(
            (success) => {
                this.logger.info("Successfully notified Backend that the video has been displayed!");
                subscription.unsubscribe();
            },
            (error) => {
                this.logger.error(error);
                subscription.unsubscribe();
            });
    }

private startPlayback() {
        this.videoNumber = this.videos[0].orderNumber;
        this.videoPath = this.videos[0].videoPath;

        this.videoplayer.nativeElement.currentTime = this.videos[0].currentTime;
        this.videoplayer.nativeElement.load();
        this.cd.markForCheck(); 
    }

clickOnVideo() {        
    const subscription = this.touchService.clickOnVideo().subscribe(
        (success) => {
            subscription.unsubscribe();
        },
        (error) => {
            this.logger.error(error);
            subscription.unsubscribe();
        });
}