web-dev-qa-db-fra.com

Lecture d'une vidéo HTML 5 à partir de Angular 2 Typescript

Je souhaite commencer à lire une vidéo HTML par programme à partir de TypeScript lorsque l'utilisateur clique sur la zone vidéo même.

Ceci est mon code HTML:

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

Ceci est mon code TypeScript:

@ViewChild('videoPlayer') videoplayer: any;

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

Le problème est que je reçois une erreur qui dit que la fonction play() n'est pas définie/existe. Quelle pourrait être l'erreur ici?

html5angularangular2-template
11
SoundStage

Le problème, c'est que vous essayez d'obtenir une référence à l'élément video en utilisant sa id. Vous devez utiliser la variable de référence template (#) à la place:

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

En savoir plus sur la variable de référence du modèle ici .

Modifier:

De plus, dans votre fonction toggleVideo(event: any), vous devez obtenir nativeElement, puis appeler la fonction play() car vous accédez directement à l'élément DOM:

@ViewChild('videoPlayer') videoplayer: ElementRef;

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

Crédits à @peeskillet pour celui-ci.

30
Stefan Svrkota

D'autres ont déjà répondu à la question de base (vous devez utiliser nativeElement). Cependant, étant donné que nativeElement est de type any, vous devez le «transtyper» vers un type d'élément plus spécifique (pour la balise <video>, il s'agit de HTMLVideoElement).

 const video: HTMLVideoElement = this.videoElement.nativeElement;
 video.play();

Cela vous donne alors intellisense pour toutes les méthodes et propriétés supportées. 

Et bien sûr, tout cela n’est qu’une compilation: vous ne convertissez rien et vous obtenez toujours une erreur si l’élément n’est pas vraiment une vidéo.

2
Simon_Weaver

Si vous avez plusieurs vidéos à lire et que vous souhaitez utiliser le même tag vidéo pour toutes les vidéos, vous pouvez différer l'appel de fonction utilisé pour la lecture des vidéos.

setTimeout(() => {
    this.yourfunction();
}, 2000) //here delaying for two seconds, you can delay for any time.
0
Adnan Sheikh

Voici un autre moyen de définir votre variable videoPlayer afin qu'elle utilise HTMLVideoElement pour le type de sécurité

videoPlayer: HTMLVideoElement;

@ViewChild('videoPlayer')
  set mainVideoEl(el: ElementRef) {
    this.videoPlayer = el.nativeElement;
  }

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