Playing HTML 5 video from Angular 2 Typescript

问题

I want to start playing a HTML video programmatically from TypeScript when the User clicks on the Video area itself.

This is my HTML code:

<div class="video">
<video controls (click)="toggleVideo()" id="videoPlayer">
    <source src="{{videoSource}}" type="video/mp4" />
    Browser not supported
</video>
</div>

This is my TypeScript code:

@ViewChild('videoPlayer') videoplayer: any;

toggleVideo(event: any) {
    this.videoplayer.play();
}

The issue is that I get an error that says play() function is not defined/exists. What could be the mistake here?

回答1:

Problem is you're trying to get a reference to video element using its id. You need to use template reference variable (#) instead:

<div class="video">
    <video controls (click)="toggleVideo()" #videoPlayer>
        <source src="{{videoSource}}" type="video/mp4" />
        Browser not supported
    </video>
</div>

Read more about template reference variable here.

Edit:

Also, in your toggleVideo(event: any) function, you need to get nativeElement and then call the play() function because you are accessing DOM element directly:

@ViewChild('videoPlayer') videoplayer: ElementRef;

toggleVideo(event: any) {
    this.videoplayer.nativeElement.play();
}

Credits to @peeskillet for this one.

回答2:

Others have already answered the basic question (you must use nativeElement). However, since nativeElement is of type any you should 'cast' it to a more specific element type (for the <video> tag this is HTMLVideoElement).

 const video: HTMLVideoElement = this.videoElement.nativeElement;
 video.play();

This then gives you intellisense for all the supported methods and properties.

And of course this is all just compile time - you're not converting anything and you'll still get an error if the element is not really a video.

回答3:

Here's another way to set your videoPlayer variable to use HTMLVideoElement for type safety

videoPlayer: HTMLVideoElement;

@ViewChild('videoPlayer')
  set mainVideoEl(el: ElementRef) {
    this.videoPlayer = el.nativeElement;
  }

toggleVideo(event: any) {
    this.videoplayer.play();
}

回答4:

<div class="col-md-9" style="padding-right:0">
            <video style="width: 100%;height: fit-content;" controls="controls" #videoPlayer
                src="http://localhost:3001/api/v1.0/media/{{movieId}}/stream">
            </video>

        </div>

#videoPlayer and controls="controls gives the functions for video playing for more customisation please refer clickhere

来源：https://stackoverflow.com/questions/40360174/playing-html-5-video-from-angular-2-typescript

标签

html5

angular

angular2-template