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.
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 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.
Affichage: Flex;
Aligner les éléments: Centre;
Aligner le contenu: centré;
Emballage flexible: emballage;
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.
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;
}
$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
}
};
$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;
}
});
});
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
}
};
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