Управление проигрывателем видео не работает в Safari

Question

В моем приложении у меня есть div, и внутри div я играю видео. У div есть событие click, которое перенесет приложение на другую страницу.

Expectation

Я должен иметь возможность воспроизводить видео и нажимать на элементы управления видео, и страница не должна перемещаться.

Фактический

Даже если я пытаюсь поставить видео на паузу, происходит событие щелчка, и страница перемещается.

Проблема только в сафари, отлично работает в 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();
    }
}

Надеюсь, это поможет вам.