在Angular 8中,你可以通过使用@ViewChild
装饰器和ElementRef
来捕获iframe中视频的输出事件。这里是一个示例代码:
#myIframe
):
@ViewChild
装饰器来获取对iframe元素的引用:import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-video-player',
template: `
`
})
export class VideoPlayerComponent {
@ViewChild('myIframe') iframeRef: ElementRef;
ngAfterViewInit() {
const iframe = this.iframeRef.nativeElement as HTMLIFrameElement;
const video = iframe.contentWindow.document.querySelector('video');
video.addEventListener('play', () => {
console.log('视频开始播放');
});
video.addEventListener('pause', () => {
console.log('视频暂停');
});
video.addEventListener('ended', () => {
console.log('视频播放结束');
});
}
}
在ngAfterViewInit
生命周期钩子中,我们获取了iframe元素的引用,并使用contentWindow
属性来访问iframe内部的文档。然后我们使用querySelector
方法来获取文档中的video元素。最后,我们给video元素添加了三个事件监听器,分别监听play、pause和ended事件,并在事件触发时打印相应的输出。
请注意,这个示例假设iframe中有一个video元素,并且该video元素没有跨域限制。如果你的实际情况不同,请相应地修改代码来满足你的需求。