Angular 8 - 有没有办法绑定到视频元素来确定它何时加载/开始播放？

Question

鉴于：

<video poster="assets/videos/poster.png"
       #videoPlayer 
       onloadedmetadata="this.muted = true">
     <source src="assets/videos/video.mp4" type="video/mp4">
</video>

在角度中：

...

public videoLoaded: boolean = false;

...

如何绑定 videoLoaded 以在视频开始播放后进行更新？（或已加载）我在网上查看并看到一些较旧的 jquery 实现似乎无法在较新版本的 chrome 中工作，并且想知道如何实现此目的的最新方法

谢谢

Answer 1

您可以做的是使用 Angular 引用视频播放器本身ViewChild并检查它是否被单击。

@ViewChild('videoPlayer') videoPlayer: ElementRef;

videoClicked = false;

startVideo(): void {
    this.videoClicked = true;
    this.videoPlayer.nativeElement.play();
}

该startVideo()方法将在 HTML 内部使用来触发更改。附加段落用于查看更改。

<video (click)="startVideo()" width="400"
       #videoPlayer>
     <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

<p>Video clicked: {{videoClicked}}</p>

请参阅此 StackBlitz 作为上述行为的示例。

编辑
更好的方法是使用HTMLMediaElement'sonplaying和loadeddataevent。请参阅 MDN 以获取有关 onplaying 的文档和有关loadeddata 的文档。在普通的 JavaScript 中，它看起来像这样：

const video = document.querySelector('video');

video.onplaying = (event) => {
  console.log('Video is no longer paused.');
};

在 Angular 中，需要进行一些小的更改。HTML 可以保持相当干净。

<video controls width="400"
       #videoPlayer>
     <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

<p>Video loaded: {{dataLoaded}}</p>
<p>Video started: {{videoStarted}}</p>

最大的变化是在组件中，ngAfterViewInit检查初始化视图后元素是否存在。loadeddata当媒体当前播放位置的帧完成加载（准备播放）时触发该事件。接下来，您可以访问元素的onplaying事件来检查视频是否未暂停。

@ViewChild('videoPlayer') videoPlayer: ElementRef;

dataLoaded = false;
videoStarted = false;

ngAfterViewInit() {
    this.videoPlayer.nativeElement.onloadeddata = (event) => {
        console.log('Video data is loaded.');
        this.dataLoaded = true;
    };

    this.videoPlayer.nativeElement.onplaying = (event) => {
        console.log('Video is no longer paused.');
        this.videoStarted = true;
    };
}

这里有一个StackBlitz 例子来展示这个例子。