Maison > interface Web > tutoriel CSS > Comment puis-je lire et mettre en pause des vidéos HTML5 à l'aide de jQuery dans une interface à onglets ?

Comment puis-je lire et mettre en pause des vidéos HTML5 à l'aide de jQuery dans une interface à onglets ?

Mary-Kate Olsen
Libérer: 2024-12-08 16:54:12
original
905 Les gens l'ont consulté

How Can I Play and Pause HTML5 Videos Using jQuery in a Tabbed Interface?

Lecture et mise en pause de vidéos HTML5 avec jQuery

Dans ce scénario, vous souhaitez contrôler les vidéos HTML5 dans une interface à onglets à l'aide de jQuery. L'objectif est de lire une vidéo lorsque l'on clique sur son onglet associé et de la mettre en pause lorsqu'un autre onglet est activé.

La solution jQuery

Pour lancer la lecture vidéo, vous utilisez le code jQuery suivant :

$('#playMovie1').click(function() {
  $('#movie1').play();
});
Copier après la connexion

Cependant, le problème survient en raison de l'utilisation de la fonction « play ». Contrairement aux fonctions jQuery, « play » est une méthode native du DOM. Par conséquent, vous devez cibler l'élément DOM pour l'exécuter efficacement.

L'équivalent jQuery de l'accès à l'élément DOM natif est « get ». En l'intégrant dans votre code, vous pouvez obtenir le comportement de lecture souhaité :

$('#videoId').get(0).play();
Copier après la connexion

Explication

La méthode 'get' récupère l'élément DOM natif de la sélection jQuery . En combinant cela avec la fonction « lecture », vous pouvez contrôler directement la lecture vidéo à l'aide de jQuery, garantissant ainsi une expérience transparente dans votre interface à onglets.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal