Воспроизведение видео в формате HTML 5 из Angular 2 Typescript

Я хочу начать воспроизведение видео в формате HTML с помощью TypeScript, когда Пользователь нажимает на область видео.

Это мой HTML-код:

<div class="video">
<video controls (click)="toggleVideo()" id="videoPlayer">
    <source src="{{videoSource}}" type="video/mp4" />
    Browser not supported
</video>
</div>

Это мой код TypeScript:

@ViewChild('videoPlayer') videoplayer: any;

toggleVideo(event: any) {
    this.videoplayer.play();
}

Проблема в том, что я получаю сообщение об ошибке, в котором говорится, что функция play() не определена/существует. Что может быть ошибкой здесь?

Ответ 1

Проблема в том, что вы пытаетесь получить ссылку на элемент video используя его id. Вместо этого вам нужно использовать переменную ссылки на шаблон (#):

<div class="video">
    <video controls (click)="toggleVideo()" #videoPlayer>
        <source src="{{videoSource}}" type="video/mp4" />
        Browser not supported
    </video>
</div>

Подробнее о ссылочной переменной шаблона здесь.

Редактировать:

Кроме того, в вашей функции toggleVideo(event: any) вам нужно получить nativeElement а затем вызвать функцию play() поскольку вы обращаетесь к элементу DOM напрямую:

@ViewChild('videoPlayer') videoplayer: ElementRef;

toggleVideo(event: any) {
    this.videoplayer.nativeElement.play();
}

Кредиты на @peeskillet для этого.

Ответ 2

Другие уже ответили на основной вопрос (вы должны использовать nativeElement). Однако, поскольку nativeElement имеет тип any вы должны "привести" его к более конкретному типу элемента (для <video> это HTMLVideoElement).

 const video: HTMLVideoElement = this.videoElement.nativeElement;
 video.play();

Это тогда дает вам intellisense для всех поддерживаемых методов и свойств.

И, конечно, это всего лишь время компиляции - вы ничего не конвертируете, и вы все равно получите ошибку, если элемент на самом деле не является видео.

Ответ 3

В случае, если у вас есть несколько видео для воспроизведения и вы хотите использовать один и тот же тег видео для всех видео, вы можете отложить вызов функции, который используется для воспроизведения видео.

setTimeout(() => {
    this.yourfunction();
}, 2000) //here delaying for two seconds, you can delay for any time.

Ответ 4

Вот еще один способ установить переменную videoPlayer для использования HTMLVideoElement для безопасности типов

videoPlayer: HTMLVideoElement;

@ViewChild('videoPlayer')
  set mainVideoEl(el: ElementRef) {
    this.videoPlayer = el.nativeElement;
  }

toggleVideo(event: any) {
    this.videoplayer.play();
}