Angular 2 Typescript에서 HTML 5 비디오 재생

Question

사용자가 비디오 영역 자체를 클릭하면 TypeScript에서 프로그래밍 방식으로 HTML 비디오를 재생하기를 원합니다.

이 내 HTML 코드입니다 :

@ViewChild('videoPlayer') videoplayer: any; 

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

문제는 내가 play() 기능이있는/정의되지 않았습니다라는 오류가 있다는 것입니다 :

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

이 내 타이프 라이터 코드입니다. 여기에 무슨 실수가있을 수 있니?

Answer 1

문제는 id을 사용하여 video 요소에 대한 참조를 얻으려고하고 있습니다. 대신 템플릿 참조 변수 (#)를 사용해야합니다

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

템플릿 참조 변수 here에 대해 자세히 알아보십시오.

편집 :

@ViewChild('videoPlayer') videoplayer: any; 

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

크레딧이 하나 @peeskillet하기 : 직접 DOM 요소에 액세스하기 때문에

또한, 귀하의 toggleVideo(event: any) 기능에, 당신은 play() 함수를 호출 한 후 nativeElement을 얻을 필요 .