视频播放器控件无法在Safari中工作

Question

在我的应用程序中，我有一个div，并且在div中正在播放视频。 div有一个click事件，它将把应用程序带到另一个页面。

期望

我应该能够播放视频并单击视频控件，并且该页面不应导航。

实际

即使我试图暂停视频，也会触发click事件并导航页面。

问题仅是野生动物园，在Chrome浏览器中效果很好。

<div (click)="displayContent()">
  <video  controls [src]="videoUrl" >Your browser does not support HTML5 video.</video>
</div>

Answer 1

您可以创建一个指令来停止event bubbling，这是示例。

import {Directive, HostListener} from "@angular/core";

@Directive({
    selector: "[stopEventBubbling]"
})
export class stopBubbling
{
    @HostListener("click", ["$event"])
    public onClick(event: any): void
    {
        event.stopPropagation();
    }
}

希望它能对您有所帮助。