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?
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.
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.
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.
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();
}