Issue
I am using Angular 2 (TypeScript). I want to rewrite the code below.
<video></video>
var video = document.querySelector("video");
video.src = URL.createObjectURL(localMediaStream);
video.play();
However, I don't know any way to get "video" in Angular 2. This is so far what I did.
<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?
Solution
You can get a reference to the video
element by using a local variable and @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();
}
Here's a plnkr demonstrating the case (the plnkr differs a little bit, since I couldn't load a video, apparently it's no that simple, instead I load an image as the poster for video tag. You'll get the idea)
Update
You deleted your last comment, but it was a valid question since the docs only specify one way of using @ViewChild
.The docs use the type to query for the children, but you can also use a string. See in ViewChildMetadata#L327
that it accepts a Type (Component/Directive) or a string.
Update 2
Actually the docs show this alternative, but it's in another part of it. Under Query
docs you can see it. Note that Query
is deprecated, but the syntax is still valid for ViewChild/ViewChildren
and ContentChild/ContentChildren
.
Answered By - Eric Martinez
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.