正在播放 HTML 5 个来自 Angular 2 打字稿的视频

Question

我想在用户单击视频区域本身时从 TypeScript 开始以编程方式播放 HTML 视频。

这是我的 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() 函数不是 defined/exists。这里可能是什么错误？

Answer 1

问题是您试图使用其 id 获取对 video 元素的引用。您需要使用 模板引用变量 (#) 代替：

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

详细了解模板引用变量 here。

编辑：

此外，在您的 toggleVideo(event: any) 函数中，您需要获取 nativeElement 然后调用 play() 函数，因为您正在直接访问 DOM 元素：

@ViewChild('videoPlayer') videoplayer: ElementRef;

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

感谢@peeskillet。

Answer 2

其他人已经回答了基本问题（您必须使用nativeElement）。但是，由于 nativeElement 是 any 类型，您应该 'cast' 将其转换为更具体的元素类型（对于 <video> 标记，这是 HTMLVideoElement）。

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

这将为您提供所有支持的方法和属性的智能感知。

当然，这只是编译时间——你没有转换任何东西，如果元素不是真正的视频，你仍然会得到一个错误。

Answer 3

这是设置 videoPlayer 变量以使用 HTMLVideoElement 类型安全的另一种方法

videoPlayer: HTMLVideoElement;

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

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

Answer 4

我就是这样做的：

<video (click)="playVideo($event)">
  <source src="video.mp4" type="video/mp4">
</video>

TS

playVideo(event) {
   event.toElement.play()
}

Answer 5

这是我的 HTML 代码：

  <video controls class="video" (play)="video()" autoplay #videoPlayer>
    <source src="assets/video/movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

这是我的 TS 代码：

  @ViewChild('videoPlayer') videoplayer: ElementRef;

  video() {
    console.log('im Play!');
    this.videoplayer?.nativeElement.play();
  }

正在播放 HTML 5 个来自 Angular 2 打字稿的视频

Playing HTML 5 video from Angular 2 Typescript

html

angular2-template

angular