Comment créer un contrôle vidéo HTML5 personnalisé pour les vidéos dans Divi

La vidéo HTML5 est un moyen pratique et efficace de visionner des vidéos sur n’importe quel site Web. En fait, Divi utilise le format vidéo HTML5 pour visualiser la vidéo dans Divi en utilisant le module vidéo. Cependant, par défaut, ces vidéos contiennent des contrôles intégrés (comme la lecture, le silence, le volume, etc.) Sa conception standard dépend de votre navigateur. Cependant, si vous voulez améliorer la conception de ces contrôles, vous pouvez en fait créer et modéliser des contrôles externes pour la vidéo htlm5. Dans ce tutoriel, nous vous montrerons comment créer des contrôles vidéo HTML5 personnalisés pour les vidéos dans Divi. Pour ce faire, nous utiliserons Divi Builder pour créer et modéliser des vidéos personnalisées et des boutons de contrôle. Ensuite, nous ajouterons du JavaScript personnalisé pour que tout fonctionne correctement.
Allons – y! Voici une brève introduction à la conception que nous allons construire dans ce tutoriel. Vous pouvez également voir ce stylo de code qui démontre certaines des mêmes fonctionnalités dans ce tutoriel. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous vous êtes inscrit avec succès. Inspection
Votre adresse e – mail pour confirmer votre abonnement et obtenir gratuitement le paquet hebdomadaire Divi Layout! Pour importer une disposition de section dans la Bibliothèque Divi, allez à la Bibliothèque Divi.
Cliquez sur le bouton importer. Dans la fenêtre contextuelle de portabilité, sélectionnez l’onglet importer, puis sélectionnez les fichiers téléchargés à partir de votre ordinateur. Puis cliquez sur le bouton importer. Une fois terminé, la disposition de la section est disponible dans Divi Builder. Commençons le tutoriel. Que devez – vous commencer? Pour commencer, vous devez faire ce qui suit: si ce n’est pas déjà fait, installez et activez le thème Divi. Créez une nouvelle page dans WordPress et utilisez Divi Builder pour éditer la page à l’avant (Visual Builder). Sélectionnez l’option créer à partir de zéro. Ensuite, vous aurez une toile vierge à concevoir dans Divi.
Un bref aperçu des objectifs de ce tutoriel la syntaxe de base des vidéos HTML5 est similaire à ceci…

Notez les propriétés du contrôle dans l’élément vidéo. Ceci est utilisé pour afficher le contenu des contrôles standards que nous voyons habituellement dans les vidéos HTML5. Le module vidéo de Divi utilise la même structure que l’élément vidéo HTML5 pour afficher la vidéo autogérée téléchargée à l’intérieur du module. Donc, quand nous utilisons le module vidéo, nous utilisons la vidéo HTML 5.
Le but de ce tutoriel était à l’origine de cacher les contrôles par défaut pour les vidéos Divi et de créer des contrôles personnalisés externes en utilisant le générateur Divi et le code personnalisé. Partie 1: création de vidéos HTML5 dans Divi dans la première partie de ce tutoriel, nous utiliserons le module vidéo Divi pour créer des vidéos HTML5. Mais d’abord, nous devons mettre à jour le contexte de cette section. Tout d’abord, mettez à jour certains paramètres de la section par défaut disponible par défaut comme suit: couleur de fond du gradient
Les fonctionnalités dont nous avons besoin pour personnaliser la barre de progression JavaScript.
Partie 3: créer des boutons de contrôle vidéo dans Divi maintenant, nous pouvons commencer à ajouter quelques boutons de contrôle vidéo personnalisés en utilisant une série de modules de boutons Divi. Créez d’abord des lignes et des colonnes, et nous devons définir les lignes et les colonnes comme des colonnes \/ conteneurs de boutons. Cette ligne ajoute une nouvelle ligne à la colonne sous la ligne contenant le code à barres de progression. Ouvrez les paramètres de ligne et mettez à jour ce qui suit: largeur de la gouttière: 1fill: 10px top, 20px bottom Une façon simple d’ajouter Flex à une colonne pour l’alignement horizontal des boutons est d’utiliser display: Flex sur la colonne qui contient les boutons. Pour ce faire, ouvrez les paramètres de colonne et ajoutez les CSS personnalisés suivants à l’élément principal:
Affichage: Flex;
Aligner les éléments: Centre;
Aligner le contenu: centré;
Emballage flexible: emballage; Maintenant que notre colonne est prête, nous pouvons ajouter des boutons. Bouton lecture \/ pause nous définissons le premier bouton comme le bouton lecture \/ pause pour activer les fonctions lecture et pause de la vidéo. Pour créer un bouton, ajoutez un module bouton à la colonne. Ouvrir les paramètres du bouton et mettre à jour le texte du bouton: texte du bouton: lecture \/ pause Sur l’onglet conception, modélisez les boutons comme suit: chaque bouton utilise un style personnalisé: taille du texte du bouton s: 18 Px (bureau), 14 Px (tablette et téléphone) couleur du texte du bouton: # FFFFFF couleur de fond du bouton: rgba (255255255,0.15) Largeur de la bordure du bouton: 0px Afficher l’icône du bouton: Non Mettre à jour les marges des boutons comme suit: 10px en haut, 10px à gauche, 10px à droite Dans l’onglet avancé, ajoutez l’ID CSS suivant: ID CSS: Divi play pause Bouton stop
Ensuite, le bouton stop. Ce bouton arrêtera la vidéo et la ramènera au point de départ. Pour créer un bouton, copiez le module play \/ pause button. Puis mettre à jour le texte du bouton: texte du bouton: stop Et donnez au bouton un ID CSS personnalisé: ID CSS: Divi stop Pour créer un bouton mute pour éteindre le volume vidéo, copiez le bouton stop que vous venez de créer. Mettre à jour le texte du bouton: texte du bouton: muet Spécifiez ensuite un ID CSS personnalisé: ID CSS: Divi mute Notre bouton suivant augmente le volume de la vidéo chaque fois que vous cliquez. On appelle ça un bouton d’augmentation de volume. Pour créer un bouton, copiez le module désactiver le bouton audio. Puis mettre à jour le texte du bouton: texte du bouton: vol Sur l’onglet conception, ajoutez une flèche vers le haut à côté du texte du bouton en mettant à jour ce qui suit: afficher l’icône du bouton: s icône du bouton: flèche vers le haut (voir capture d’écran) couleur de l’icône du bouton: # 00a9d8afficher l’icône seulement lorsque vous passez le curseur sur Le bouton: Non Puis mettre à jour le remplissage du bouton comme suit: remplissage: 0,5 em à gauche, 1,5 em à droite Puis mettre à jour CSS – ID: CSS – ID: Divi volinc Bouton de descente de volume nous ne pouvons pas avoir un bouton de montée de volume ou même un bouton de descente de volume pour diminuer progressivement le volume de la vidéo à chaque clic. Pour créer le bouton volume down, copiez le bouton volume up que vous venez de créer. Ensuite, mettez à jour l’icône du bouton vers l’icône flèche vers le bas. Puis mettre à jour CSS – ID: CSS – ID: Divi voldec Bouton grand affichage pour le dernier bouton, nous créerons un bouton grand affichage qui augmentera la largeur du conteneur vidéo à chaque clic. Pour créer un bouton, copiez le bouton mute. Puis faites glisser le bouton copier sous l’impulsion
Nte \
Divi volinc: active,
Divi voldec: activé,
Divi play pause: active,
Divi Stop: active {
Background: # 666666! Important
}
Progrès accomplis
Affichage: blocs;
Largeur: 100%;
}
Divi Video container. Agrandir la vidéo
Largeur maximale: 1400px;
} JavaScript \/ jquery sous CSS (Final style Tag), collez le Code JS suivant pour vous assurer que le Code est enveloppé dans la balise de script souhaitée. Jquery (document). Prêt (fonction ($)
$divideocontainer = $(\
$divideo = $(\
Videoelement = $(\
$play = $(\
$play pause = $(\
$stop = $(\
$mute = $(\
$volinc = $(\
$voldec = $(\
$Progress = $(\
Progress element = $(\
$progress bar = $(\
$large view = $(\
Videoelement. Contrôle = faux;
Dollar divideo. Open (\
$progress. Attribut (maximum, durée de l’élément vidéo);
});
Dollar divideo. Open (\
Élément de progrès. Valeur = videoelement. Heure actuelle;
$barre de progression. CSS
\
Mathématiques Florida
Oor ((videoelement.currenttime \/ videoelement.duration) * 100) + \
);
});
Dollar divideo. Open (\
Si (! $Progress Property (\
$progress. Attribut (maximum, durée de l’élément vidéo);
Élément de progrès. Valeur = videoelement. Heure actuelle;
$barre de progression. CSS
\
Mathématiques Plancher (videoelement.currenttime \/ videoelement.duration) * 100)
\
);
}
});
$play pause. On (Click, Feature (e) {Click)
E. preventdefault ();
Si (videoelement.paused | | videoelement.end)
Videoelement. Play ();
< Modifier
Videoelement. Pause ();
}
});
$stop. On (Click, Feature (e) {Click)
E. preventdefault ();
Videoelement. Pause ();
Videoelement. Currenttime = 0;
Élément de progrès. Valeur = 0;
});
$mute. On (Click, Feature (e) {Click)
E. preventdefault ();
Videoelement. Mute =! Videoelement. Atténuation
$(E. Target). Toggleclass (\
});
$volinc. On (Click, Feature (e) {Click)
E. preventdefault ();
Altervolume (\
});
Voldec dollars. On (Click, Feature (e) {Click)
E. preventdefault ();
Altervolume (\
});
Altervolume = fonction (dir) {
Currentvolume = maths. Plancher (videoelement.volume * 10) \/ 10;
Si (dir = \
Si (volume actuel 0) videoelement. Volume – = 0,1;
}
};
$Grande vue. On (Click, Feature (e) {Click)
E. preventdefault ();
$(E. Target). Toggleclass (\
$Split Video container. Toggleclass (\
});
Afficher les contrôles par défaut lorsque vous passez le curseur sur la vidéo
Dollar divideo. Vol stationnaire (fonction () {
Si (! Videoelement.controls) {
Videoelement. Contrôle = vrai;
< Modifier
Videoelement. Contrôle = faux;
}
});
}); Premièrement, nous devons déclarer une variable pointant vers chaque élément Divi avec l’ID CSS spécifié. Nous avons également besoin de deux variables importantes qui pointent vers les éléments eff HTML
Ou créez une fonction qui effectue une action lorsque vous cliquez sur notre bouton. Pour les boutons lecture \/ pause, nous utilisons les propriétés pause et off de l’API médias et l’instruction if. $pour basculer la lecture () et la méthode pause () Pause Lecture. On (Click, Feature (e) {Click)
E. preventdefault ();
Si (videoelement.paused | | videoelement.end)
Videoelement. Play ();
< Modifier
Videoelement. Pause ();
}
});
Pour le bouton stop, nous interrompons la vidéo et retournons la valeur de progression et l'heure actuelle à 0 $ Arrêtez! On (Click, Feature (e) {Click)
E. preventdefault ();
Videoelement. Pause ();
Videoelement. Currenttime = 0;
Élément de progrès. Valeur = 0;
});
Pour le bouton mute, nous activons l'attribut muted et activons une classe qui définit un fond plus clair pour le bouton lorsque l'audio est muet $ Silencieux On (Click, Feature (e) {Click)
E. preventdefault ();
Videoelement. Mute =! Videoelement. Atténuation
$(E. Target). Toggleclass (\
});
Pour les boutons volume, l'un est utilisé pour augmenter le volume de chaque clic ($volnic) et l'autre pour diminuer le volume de chaque clic ($voldec). Pour ce faire, utilisez la fonction altervolume () qui contrôle le paramètre Dir de « + » ou « – » et augmente ou diminue le volume à chaque clic. Volinc. On (Click, Feature (e) {Click)
E. preventdefault ();
Altervolume (\
});
Voldec dollars. On (Click, Feature (e) {Click)
E. preventdefault ();
Altervolume (\
});
Altervolume = fonction (dir) {
Currentvolume = maths. Plancher (videoelement.volume * 10) \/ 10;
Si (dir = \
Si (volume actuel 0) videoelement. Volume – = 0,1;
}
};
Le bouton Grand View active ou désactive la classe CSS qui ajuste la largeur maximale du conteneur vidéo à chaque clic. Grande vue. On (Click, Feature (e) {Click)
E. preventdefault ();
$(E. Target). Toggleclass (\
$Split Video container. Toggleclass (\
});
Commencez par cet exemple