Lecture/pause d'une vidéo HTML 5 à l'aide de JQuery

Question

J'essaie de contrôler des vidéos HTML5 à l'aide de JQuery. J'ai deux clips dans une interface à onglets, il y a six onglets au total, les autres ne contiennent que des images. J'essaie de faire en sorte que les clips vidéo soient lus lorsque l'on clique sur leur onglet et qu'ils s'arrêtent lorsque l'on clique sur l'un des autres.

Cela doit être simple à faire mais je n'arrive pas à le faire fonctionner. Le code que j'utilise pour lire la vidéo est le suivant :

$('#playMovie1').click(function(){
  $('#movie1').play();
      });

J'ai lu que l'élément vidéo doit être exposé dans une fonction pour pouvoir le contrôler, mais je n'ai pas trouvé d'exemple. Je suis capable de le faire fonctionner en utilisant JS :

document.getElementById('movie1').play();

Tout conseil serait le bienvenu. Merci

Answer 1

Votre solution montre le problème ici play n'est pas une fonction jQuery mais une fonction de l'élément DOM. Vous devez donc l'appeler sur l'élément DOM. Vous donnez un exemple de la façon de le faire avec les fonctions natives du DOM. L'équivalent jQuery - si vous vouliez faire cela pour vous intégrer à une sélection jQuery existante - serait le suivant $('#videoId').get(0).play() . ( get récupère l'élément DOM natif de la sélection jQuery).

Answer 2

Voici comment j'ai réussi à le faire fonctionner :

jQuery( document ).ready(function($) {
    $('.myHTMLvideo').click(function() {
        $(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause();
    });
});

Toutes mes balises HTML5 ont la classe 'myHTMLvideo'.

Answer 3

Pourquoi devez-vous utiliser jQueury ? La solution que vous proposez fonctionne, et elle est probablement plus rapide que la contstruction d'un objet jQuery.

document.getElementById('videoId').play();

Answer 4

Pour mettre en pause plusieurs vidéos, j'ai constaté que cela fonctionne très bien :

$("video").each(function(){
$(this).get(0).pause();
});

Cela peut être mis dans une fonction de clic, ce qui est assez pratique.

Answer 5

En prolongement de la réponse de lonesomeday, vous pouvez également utiliser

$('#playMovie1').click(function(){
    $('#movie1')[0].play();
});

Remarquez qu'aucune fonction jQuery get() ou eq() n'est appelée. Le tableau du DOM est utilisé pour appeler la fonction play(). C'est un raccourci à garder à l'esprit.