Odtwarzanie wideo HTML 5 z Angular 2 Maszynek do pisania

Question

Chcę zacząć programowo odtwarzać wideo HTML z TypeScript, gdy użytkownik kliknie na obszar Video sam.

To jest mój kod HTML:

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

To jest mój kod maszynopis:

@ViewChild('videoPlayer') videoplayer: any; 

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

Problem jest, że pojawia się błąd, który mówi play() funkcja nie jest zdefiniowana/istnieje. Jaki może być błąd?

Answer 1

Problem polega na tym, że próbujesz uzyskać odniesienie do elementu video przy użyciu jego id. Trzeba użyć szablonu zmienną referencyjną (#) zamiast:

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

Więcej o zmiennej referencyjnej here szablonu.

Edit:

Ponadto, w swojej funkcji toggleVideo(event: any), trzeba dostać nativeElement a następnie wywołać funkcję play() ponieważ uzyskiwania dostępu elementu DOM bezpośrednio:

@ViewChild('videoPlayer') videoplayer: any; 

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

kredytów @peeskillet dla tego jednego .