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原生的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)
}