jquery afficher la vidéo cachée

À l'ère du développement rapide d'Internet, les vidéos sont devenues un élément indispensable de la vie quotidienne des gens. Dans la construction de sites Web, si les vidéos doivent être utilisées comme éléments d'affichage, il est particulièrement important de savoir comment réaliser avec élégance l'affichage et le masquage dynamiques des vidéos.

Dans cet article, je vais partager avec vous comment utiliser jQuery pour afficher et masquer des vidéos.

La première étape consiste à introduire le fichier de bibliothèque jQuery

Pour utiliser jQuery, vous devez d'abord introduire le fichier de bibliothèque jQuery dans la page Web.

Si vous n'utilisez pas jQuery dans votre projet, vous pouvez télécharger le fichier de la bibliothèque jQuery depuis le site officiel de jQuery https://jquery.com/.

Ajoutez le code suivant dans la balise  :

<script src="path/to/jquery.min.js"></script>

Changez path/to/jquery.min.js par le chemin du fichier que vous avez réellement téléchargé.

La deuxième étape consiste à implémenter la fonction d'affichage et de masquage des vidéos

Ensuite, nous utiliserons jQuery pour obtenir l'effet d'afficher et de masquer des vidéos. L'implémentation spécifique est la suivante :

1. Code HTML

Dans le code HTML, nous devons ajouter un conteneur (div) pour afficher la vidéo, ajouter une balise vidéo à l'intérieur et cliquer sur le bouton pour afficher/masquer le vidéo (bouton).

Le code spécifique est le suivant :

<div class="video-container">
    <button class="show-video">显示视频</button>
    <video src="path/to/video.mp4"></video>
</div>

Parmi eux, l'attribut src dans la balise vidéo est le chemin du fichier vidéo, qui peut être modifié en fonction de la situation réelle.

2. Code CSS

Ensuite, nous devons ajouter quelques styles de base au conteneur vidéo et à la vidéo afin qu'ils puissent être affichés sur la page Web.

Le code spécifique est le suivant :

.video-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.show-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 20px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    border: 1px solid #333;
    outline: none;
}

Parmi eux, .video-container est le nom de classe du conteneur vidéo, et .show-video est le nom de classe du bouton pour afficher/masquer la vidéo. Le style spécifique peut être modifié en fonction de la situation réelle.

3. code jQuery

Enfin, utilisez jQuery pour obtenir l'effet d'afficher et de masquer la vidéo. Nous devons d’abord sélectionner le bouton pour afficher/masquer la vidéo et y ajouter un événement de clic.

Le code spécifique est le suivant :

$('.show-video').click(function() {
    $(this).siblings('video').toggle();
});

Parmi eux, $ représente l'élément sélectionné, .show-video représente l'élément sélectionné avec le nom de classe show-video et .siblings('video') représente la sélection de tous éléments vidéo dans les éléments frères de l'élément, .toggle() signifie changer l'affichage et l'état caché de l'élément.

Lorsque nous cliquons sur un bouton, jQuery trouve l'élément vidéo dans les éléments frères du bouton et change son état d'affichage et de masquage. Cela obtient l'effet de cliquer sur le bouton pour afficher/masquer la vidéo.

Le code jQuery complet est le suivant :

$(function() {
    $('.show-video').click(function() {
        $(this).siblings('video').toggle();
    });
});

Étape 3, résumé

Grâce aux étapes ci-dessus, nous avons utilisé avec succès jQuery pour afficher et masquer dynamiquement des vidéos. Ajoutez simplement un simple événement de clic pour permettre aux utilisateurs de choisir de voir ou non la vidéo.

Bien sûr, dans les applications réelles, nous pouvons également ajouter plus d'effets et d'interactions pour améliorer l'expérience utilisateur. Par exemple : lors de la lecture de la vidéo, vous pouvez ajouter des fonctions telles que la barre de progression et la lecture en plein écran, et ajouter une animation de chargement lors du chargement de la vidéo, etc.

Je pense qu'en étudiant cet article, les lecteurs maîtrisent les méthodes de base d'affichage et de masquage de vidéos dans jQuery, et j'espère pouvoir les mettre en pratique et les améliorer dans des projets réels.

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!