HTML5 视频标签访问进度事件属性已加载和总计

Question

我一直按照https://developer.mozilla.org/en-US/docs/Web/Events/progress 上的说明进行操作，但我无法访问/获取 HTML5 视频元素的进度事件的 Loaded 和 Total 属性的任何值。这是我的代码：

HTML5：

    <video id="myVideo" #myVideo #inlineVideo src="https://movie.mp4"
class="inline-video" (click)="videoControls()" playsinline autoplay="true" [muted]="mute" preload="auto" loop>Video not loaded yet</video>

JS：

 var vid = document.getElementById("myVideo");
 vid.addEventListener("progress", (returnValue) => {
      console.log('progress: ', returnValue.loaded, returnValue.total)
    });

我正在使用 Angular2+ 和 Ionic 3。

Answer 1

如果你想在 Angular 中使用事件，你必须像这样进行事件绑定，不要使用 javascript native addEventListener 来监听事件。像这样更改你的代码

HTML

<video id="myVideo" #myVideo #inlineVideo src="https://movie.mp4"
    class="inline-video" (click)="videoControls()" (progress)="onProgress($event)" playsinline autoplay="true" [muted]="mute" preload="auto" loop>Video not loaded yet</video>

Ts

onProgress($event){
console.log($event)
}