Angular 8 - 有没有一种方法可以绑定到视频元素以确定它何时 loaded/starts 播放？

Question

鉴于：

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

在Angular中：

...

public videoLoaded: boolean = false;

...

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

谢谢

Answer 1

您可以使用 HTML Audio/Video 由 html 5 视频属性提供的事件。

loadeddata -> 当浏览器加载了 audio/video

的当前帧时触发

loadedmetadata -> 当浏览器加载了 audio/video

的元数据时触发

loadstart -> 当浏览器开始寻找 audio/video

时触发

Answer 2

您可以做的是使用 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>

参见 this StackBlitz as an example of above behaviour。

编辑
更好的方法是使用 HTMLMediaElement 的 onplaying 和 loadeddata 事件。请参阅 documentation on onplaying and documentation on onplaying 的 MDN。在正常情况下 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 example to show this example。

Angular 8 - 有没有一种方法可以绑定到视频元素以确定它何时 loaded/starts 播放？

Angular 8 - Is there a way to bind to a video element to determine when it is loaded/starts playing?

html

angular

angular8