Question

在我和我的团队正在开发的应用中，我们正在利用HTML5视频组件以全屏显示.mp4视频。该应用程序是在后端使用SignalR的ASP.NET Web API，它是在前端使用Angular 4的Electron应用程序。它的工作方式如下：

一旦启动Electron应用程序，它将对API进行ping操作
后端为应用提供网址，以通过SignalR播放
然后，应用会加载视频并通知后端视频已加载并开始播放
一旦触发(ended)，我们就会通知后端视频已结束
然后，该应用将在可配置的时间内显示其他内容（由后端提供）
一旦超时在后端过期，我们会通知Electron应用显示下一个要播放的视频
单击当前显示的视频将中断它，并显示其他内容。超时过期后，后端将提供被中断的视频
重复

我们最近发现的问题之一是有时 (ended)不会在视频结束时触发，并且我们的应用程序保持停滞状态，因为它从未产生过回调以视频已经结束。

代码如下：

视频显示组件

<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();
            });
    }

从后端收到视频后立即加载：

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();
        });
}

我检查了是否可能与视频本身有关，但是所有已配置的视频可以播放4-5个小时，然后突然停止播放，(ended)也不会触发。还有其他解决方法吗？任何帮助将不胜感激！

视频结束时，有时不会触发HTML5视频“结束”事件

0 个答案: