Comment lire une vidéo en utilisant javascript ?

Question

J'ai un HTML avec un élément vidéo, aucun contrôle et un bouton pour lire la vidéo. Mais lorsque j'essaie de lire la vidéo à l'aide du bouton, cela ne fait rien.

Je ne reçois aucune erreur dans la console et la vidéo ne joue pas.

Je n'arrive pas à comprendre ce qui pourrait ne pas aller.

Lorsque j'ajoute l'attribut control dans la balise vidéo, la vidéo est lue parfaitement, mais mon objectif n'est pas d'utiliser les contrôles du navigateur et de créer les miens.

Voici mon exemple de code. J'utilise cette vidéo aléatoire ici pour que la source fonctionne.

J'espère que quelqu'un pourra vous aider. Merci d'avance.

const video = document.querySelector('video');
const playButton = document.querySelector('button');

playButton.addEventListener('click', video.play);

<video>
<source src="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/video/sintel-short.mp4" type="video/mp4"></video>
<button>Play</button>

Answer 1

Changez le listener de eventListener en :

playButton.addEventListener("click", () => video.play());

Answer 2

Le problème avec le code est que lorsque la méthode video.play est fournie en tant que fonction d'écoute d'événement, elle perd le contexte et échoue. Ce problème peut être résolu en encapsulant la méthode dans une fonction anonyme. Veuillez vérifier la fonction playButton.addEventListener(){...} ci-dessous :

const video = document.querySelector('video');
const playButton = document.querySelector('button');
playButton.addEventListener('click', function() {
 video.play();
});

 
    Play