视频播放器控件在 Safari 中不起作用答案

【问题标题】：Video player controls not working in safari视频播放器控件在 Safari 中不起作用
【发布时间】：2019-05-23 12:18:57
【问题描述】：

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

期待

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

实际

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

问题只是 safari，在 chrome 中可以正常工作。

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

【问题讨论】：

safari 有错误吗？
这种情况下没有错误。浏览器正在选择父 div 的点击事件，而不是播放/暂停事件。
知道了，你试过'event.preventdefault();'吗？
我只需要播放器控件即可工作。其他区域应该从 div 中选择点击事件。如何识别是点击了播放器控件还是点击了播放器的其他部分。
您可以创建一个指令来停止事件传播。因此，由于我们的指令，只有 div 点击事件触发了其他 div 点击事件。

标签： angular safari html5-video

【解决方案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();
    }
}

希望对你有帮助。

【讨论】：