angular 安卓video怎么监听播放结束

Question

swiper轮播中加入图片，视频轮播
安卓环境下 下面代码情况会会出现轮播图到切换到视频的时候划不动

<div class="swiper-slide" *ngIf="state.videoImg.length" >
        <video class="card-body__video" id="video" style="width: 100%;height: 100%;position: relative;"
               [src]="detail.houseVideoVO?.videoUrl"
               preload="auto"
               x5-playsinline
               playsinline
               poster="{{state.videoImg}}"
               controls (play)="playVideo(video)">
        </video>
      </div>

想到解决办法，在安卓环境下，在video上面添加遮罩img，点击img视频播放img隐藏，播放结束/暂停播放/滑动轮播的时候img显示遮住视频

<div class="swiper-slide" *ngIf="state.videoImg.length" >
       <img class="play-btn" *ngIf="isAndroid"  src="assets/img/btn_play.png"   (click)="playVideo2()"/>
        <img class="thumb-img" *ngIf="isAndroid" [src]="state.videoImg"/>
        <video class="card-body__video" id="video" style="width: 100%;height: 100%;position: relative;"
               [src]="detail.houseVideoVO?.videoUrl"
               preload="auto"
               x5-playsinline
               playsinline
               poster="{{state.videoImg}}"
               controls (play)="playVideo(video)">
        </video>
      </div>

ts:

playVideo2() {
 this.element.nativeElement.querySelector('#video').play();
    this.isShowVideoImg = false;
}
endPlay(){
    alert('over!!');
} this.element.nativeElement.querySelector('#video').addEventListener('ended', this.endPlay());

现在不知道怎么监听视频播放结束，暂停

应用场景：

安卓视频播放结束后处于置顶层，需要添加判断播放结束，