Angular 2：访问组件内html5视频标签的播放和暂停

Posted 2023-03-05

【中文标题】Angular 2：访问组件内html5视频标签的播放和暂停

【英文标题】：Angular 2 : Access play and pause of html5 video tag inside component

【发布时间】：2017-09-14 02:37:30

【问题描述】：

我是 angular2 的新手，我一直在尝试访问组件内的 html5 视频标签。虽然我使用@ViewChild 装饰器来访问视频标签，但我无法访问播放和暂停功能。 我的 player.html 文件是

<video id="thisVideo" #videoplayer *ngIf="openPlayer" controls autoplay="autoplay" preload="auto" [poster]="src.thumbnailUrlHighRes" >
<source [src]="src.videoURL" type="video/mp4" />
<p>Your browser does not support the video tag.</p>
</video>

视频的自动播放设置为 true。我需要使用空格键播放和暂停视频，为此我已将事件侦听器添加到主机组件。但问题是我无法在事件中访问视频标签的播放和暂停功能听众。 谁能给我一些见解？

【参考方案1】：

我得到了它的工作：

@HostListener('document:keyup', ['$event'])
  onKeyUp(ev:KeyboardEvent) 
    if(ev.code == "Space") 
      let vid = <HTMLVideoElement>document.getElementById("thisVideo");
      if(vid.paused) 
        vid.play();
      
      else 
        vid.pause();
      
    
  

【参考方案2】：

这个话题已经得到解答，不过我相信使用template reference variables 和ViewChild 可以更简洁地实现这一目标。

在模板中，您可以像这样引用您的视频，并带有#：

<video controls #myVideo>
    <source src="http://my-url/video.mp4" type="video/mp4" />
    Browser not supported
</video>
<a (click)="playVideo()">Play video</a>

在你的 .ts 文件中：

import  Component, OnInit, ViewChild, ElementRef  from '@angular/core';

@Component(
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
)

export class MyComponent implements OnInit 
  @ViewChild('myVideo') myVideo: ElementRef; // Prior to Angular 8
  // @ViewChild('myVideo',  static: true ) myVideo: ElementRef; => Angular 8
  constructor()  

  ngOnInit() 
  

  playVideo() 
    /**
     * You are accessing a dom element directly here,
     * so you need to call "nativeElement" first.
     */
    this.myVideo.nativeElement.play();