我正在使用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以来这是一个有效的问题.文档使用该类型来查询子项,但您也可以使用字符串.请参阅ViewChildMetadata#L327,它接受类型(组件/指令)或字符串.
更新2
实际上,文档显示了这种替代方案,但它是另一部分.在Query文档下,您可以看到它.请注意,不推荐使用Query,但语法对ViewChild / ViewChildren和ContentChild / ContentChildren仍然有效.
