Soy nuevo en angular2 y he estado tratando de acceder a la etiqueta de video html5 dentro de mi componente. Aunque usé el decorador @ViewChild para acceder a la etiqueta de video, no pude acceder a las funciones de reproducción y pausa. Mi archivo player.html es
<video id="thisVideo" #videoplayer *ngIf="openPlayer" controls autoplay="autoplay" preload="auto" [poster]="src.thumbnailUrlHighRes" width="640"> <source [src]="src.videoURL" type="video/mp4" /> <p>Your browser does not support the video tag.</p> </video>La reproducción automática del video está configurada como verdadera. Necesito reproducir y pausar el video usando la barra espaciadora y para esto he agregado un detector de eventos al componente host. Pero el problema es que no puedo acceder a la función de reproducción y pausa de la etiqueta de video dentro del detector de eventos. ¿Alguien puede darme alguna idea?
Este tema ya ha sido respondido, sin embargo, creo que hay una forma más limpia de lograr esto utilizando variables de referencia de plantilla y ViewChild .
En la plantilla, puede hacer referencia a su video de esta manera, con un # :
<video controls #myVideo> <source src="http://my-url/video.mp4" type="video/mp4" /> Browser not supported </video> <a (click)="playVideo()">Play video</a>Y en su archivo .ts:
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; @Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.scss'] }) export class MyComponent implements OnInit { @ViewChild('myVideo') myVideo: ElementRef; // Prior to Angular 8 // @ViewChild('myVideo', { static: true }) myVideo: ElementRef; => Angular 8 constructor() { } ngOnInit() { } playVideo() { /** * You are accessing a dom element directly here, * so you need to call "nativeElement" first. */ this.myVideo.nativeElement.play(); } }Lo tengo trabajando con esto:
@HostListener('document:keyup', ['$event']) onKeyUp(ev:KeyboardEvent) { if(ev.code == "Space") { let vid = <HTMLVideoElement>document.getElementById("thisVideo"); if(vid.paused) { vid.play(); } else { vid.pause(); } } }