如何在Angular 2(TypeScript)中编写替代代码“document.querySel
发布时间:2020-12-17 07:56:54 所属栏目:安全 来源:网络整理
导读:我正在使用Angular 2(TypeScript).我想重写下面的代码. video/videovar video = document.querySelector("video");video.src = URL.createObjectURL(localMediaStream);video.play(); 但是,我不知道如何在Angular 2中获得“视频”.这是迄今为止我所做的. vid
我正在使用Angular 2(TypeScript).我想重写下面的代码.
<video></video> var video = document.querySelector("video"); video.src = URL.createObjectURL(localMediaStream); video.play(); 但是,我不知道如何在Angular 2中获得“视频”.这是迄今为止我所做的. <video [src]="videoSrc"></video> videoSrc:string; … this.videoSrc = URL.createObjectURL(stream); // Since I don't know any way to get "video",// do I have any way to use video.play() here?
您可以使用局部变量和@ViewChild获取对视频元素的引用
@Component({ selector: 'my-app',template : `<video #my-video></video>` }) export class App implements AfterViewInit { // myVideo == #my-video @ViewChild('myVideo') myVideo: any; afterViewInit() { let video = this.myVideo.nativeElement; video.src = URL.createObjectURL(yourBlob); video.play(); } 这是一个plnkr演示案例(plnkr有点不同,因为我无法加载视频,显然它不是那么简单,而是我加载图像作为视频标签的海报.你会得到这个想法) 更新 您删除了上次评论,但自从使用@ ViewChild的docs only specify one way以来这是一个有效的问题.文档使用该类型来查询子项,但您也可以使用字符串.请参阅 更新2 实际上,文档显示了这种替代方案,但它是另一部分.在 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |