Solución:
El problema es que intentas obtener una referencia a video elemento usando su id. Necesitas usar variable de referencia de plantilla (#) en lugar de:
<div class="video">
<video controls (click)="toggleVideo()" #videoPlayer>
<source src="https://foroayuda.es/{{videoSource}}" type="video/mp4" />
Browser not supported
</video>
</div>
Lea más sobre la variable de referencia de la plantilla aquí.
Editar:
Además, en tu toggleVideo(event: any) función, necesitas conseguir nativeElement y luego llamar al play() función porque está accediendo al elemento DOM directamente:
@ViewChild('videoPlayer') videoplayer: ElementRef;
toggleVideo(event: any) {
this.videoplayer.nativeElement.play();
}
Créditos a @peeskillet por este.
Otros ya han respondido la pregunta básica (debes usar nativeElement). Sin embargo, desde nativeElement es de tipo any deberías ‘lanzarlo’ a un tipo de elemento más específico (para el <video> etiqueta esto es HTMLVideoElement).
const video: HTMLVideoElement = this.videoElement.nativeElement;
video.play();
Esto le da intellisense para todos los métodos y propiedades compatibles.
Y, por supuesto, todo esto es solo tiempo de compilación: no está convirtiendo nada y aún obtendrá un error si el elemento no es realmente un video.
Aquí hay otra forma de configurar su videoPlayer variable a utilizar HTMLVideoElement para seguridad de tipo
videoPlayer: HTMLVideoElement;
@ViewChild('videoPlayer')
set mainVideoEl(el: ElementRef) {
this.videoPlayer = el.nativeElement;
}
toggleVideo(event: any) {
this.videoplayer.play();
}