Phát HTML 5 video từ Angular 2 Typescript

Question

Tôi muốn bắt đầu phát video HTML theo lập trình từ TypeScript khi Người dùng nhấp vào chính khu vực Video.

Đây là mã HTML của tôi:

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

Đây là mã nguyên cảo của tôi:

@ViewChild('videoPlayer') videoplayer: any; 

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

Vấn đề là tôi nhận được một lỗi mà nói play() chức năng không được định nghĩa/tồn tại. Điều gì có thể là sai lầm ở đây?

Answer 1

Sự cố là bạn đang cố gắng tham chiếu đến video phần tử bằng cách sử dụng id. Bạn cần phải sử dụng mẫu tham khảo biến (#) thay vì:

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

Đọc thêm về biến tham chiếu mẫu here.

Edit:

Ngoài ra, trong chức năng toggleVideo(event: any) của bạn, bạn cần phải nhận được nativeElement và sau đó gọi các play() chức năng bởi vì bạn đang truy cập vào phần tử DOM trực tiếp:

@ViewChild('videoPlayer') videoplayer: any; 

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

Tín dụng cho @peeskillet cho một này .