Comment créer des contrôles vidéo HTML5 personnalisés pour une vidéo dans Divi

Les vidéos HTML5 sont un moyen pratique et efficace d’afficher des vidéos sur n’importe quel site Web. En fait, Divi utilise le format vidéo HTML5 pour afficher des vidéos dans Divi à l’aide du module vidéo. Cependant, par défaut, ces vidéos contiennent des contrôles intégrés (comme la lecture, la mise en sourdine, le volume, etc.) qui ont un design standard dépendant de votre navigateur. Mais si vous souhaitez améliorer le design de ces contrôles, vous pouvez créer et styliser vos propres contrôles externes pour votre vidéo HTLM5.

Dans ce tutoriel, nous allons vous montrer comment créer des contrôles vidéo HTML5 personnalisés pour une vidéo dans Divi. Pour ce faire, nous allons créer et styliser la vidéo et les boutons de contrôle personnalisés à l’aide de Divi Builder. Puis nous ajouterons du Javascript personnalisé pour que tout fonctionne.

C’est parti !

Pour importer la mise en page de section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la popup de portabilité, sélectionnez l’onglet d’importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton d’importation.

Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devez effectuer les opérations suivantes :

1. Si vous ne l’avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour modifier la page sur le front-end (constructeur visuel).
3. Choisissez l’option « Build From Scratch ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Bref aperçu de notre objectif pour ce tutoriel

La syntaxe de base d’une vidéo HTML5 ressemble à quelque chose comme ceci..

Remarquez l’attribut controls dans l’élément vidéo. C’est ce qui est utilisé pour afficher les contrôles standard que nous voyons normalement dans une vidéo HTML5.

Le module vidéo de Divi utilise la même structure d’élément vidéo HTML5 pour afficher les vidéos auto-hébergées que vous téléchargez dans le module. Ainsi, lorsque nous utilisons un module vidéo, nous utilisons des vidéos HTML5.

L’objectif de ce tutoriel est de masquer les contrôles par défaut d’une vidéo Divi et de créer certains de nos propres contrôles externes personnalisés à l’aide de Divi Builder et d’un code personnalisé.

Partie 1 : Création de la vidéo HTML5 dans Divi

Dans cette première partie du tutoriel, nous allons créer une vidéo HTML5 à l’aide du module vidéo de Divi. Mais d’abord, nous devons mettre à jour l’arrière-plan de notre section.

Arrière-plan de section

Commencez par mettre à jour les paramètres de section pour la section disponible par défaut comme suit :

• Couleur d’arrière-plan dégradé gauche : rgba(0,0,0,0,0.8)
• Couleur du dégradé d’arrière-plan à droite : #000000
• Placer le dégradé au-dessus de l’image d’arrière-plan : OUI
• Image d’arrière-plan : [télécharger l’image de votre choix]

La rangée de la vidéo

Ensuite, nous devons ajouter la ligne qui contiendra notre vidéo. Ajoutez une nouvelle rangée d’une colonne à la section.

Ensuite, mettez à jour les paramètres de la rangée comme suit :

• Largeur : 100
• Largeur maximale : aucune
• Padding : 0px bottom

Création de la vidéo

Comme indiqué précédemment, Divi utilise déjà l’élément vidéo HTML5 dans le module vidéo Divi. Ainsi, pour créer la vidéo, il suffit d’ajouter un nouveau module vidéo à la ligne/colonne.

Chargez les fichiers vidéo dans le module vidéo

Pour des performances optimales, téléchargez un fichier MP4 et un fichier WEBM de votre vidéo dans la galerie multimédia.

Ensuite, ajoutez les fichiers vidéo MP4 et WEBM au module vidéo sous l’onglet contenu :

Mettre à jour les paramètres de la vidéo

Sous l’onglet design, mettez à jour les éléments suivants :

• Largeur maximale : 1080px
• Alignement du module : centre

Sous l’onglet avancé, ajoutez l’ID CSS suivante :

• CSS ID : divi-video-container

Partie 2 : création de la barre de progression

Les vidéos HTML comprennent une fonctionnalité intégrée permettant d’afficher une barre de progression. Nous pouvons utiliser un peu de code personnalisé pour ajouter notre propre barre de progression à notre vidéo.

La rangée de la barre de progression

Pour afficher une barre de progression personnalisée pour la vidéo, commencez par créer une nouvelle rangée d’une colonne sous la rangée contenant la vidéo.

Ouvrez les paramètres de la ligne et mettez à jour le remplissage comme suit :

• Padding : 10px haut, 0px bas

Ajout du HTML de la barre de progression

Pour ajouter notre extrait personnalisé de HTML afin d’afficher la barre de progression, nous devons ajouter un nouveau module de code à la ligne.

À l’intérieur du module de code, collez le HTML suivant :

Nous ajouterons plus tard la fonctionnalité dont nous avons besoin à la barre de progression avec notre Javascript personnalisé.

Partie 3 : création des boutons de contrôle de la vidéo dans Divi

Nous sommes maintenant prêts à commencer à ajouter des boutons de contrôle vidéo personnalisés en utilisant une série de modules de boutons Divi.

Création de la ligne et de la colonne

Tout d’abord, nous devons configurer notre ligne et notre colonne qui serviront de barre/conteneur de boutons.

La rangée

Ajoutez une nouvelle ligne à une colonne sous la ligne contenant le code de la barre de progression.

Ouvrez les paramètres de la ligne et mettez à jour les éléments suivants :

• Largeur de la gouttière : 1
• Rembourrage : 10px en haut, 20px en bas

Ajout de Flex à la colonne

Une façon simple d’obtenir l’alignement horizontal de nos boutons est d’utiliser display:flex sur la colonne contenant nos boutons. Pour ce faire, ouvrez les paramètres de la colonne et ajoutez le CSS personnalisé suivant à l’élément principal :

display:flex ;
align-items:center ;
justify-content:center ;
flex-wrap:wrap ;

Maintenant que notre colonne est prête, nous sommes prêts à ajouter nos boutons.

Le bouton « Play / Pause

Nous allons faire de ce premier bouton le bouton « Play/Pause » qui basculera la fonction lecture et pause de notre vidéo. Pour créer le bouton, ajoutez un module de bouton à la colonne.

Ouvrez les paramètres du bouton et mettez à jour le texte du bouton :

• Texte du bouton : Play / Pause

Sous l’onglet Design, donnez au bouton le style suivant :

• Utiliser des styles personnalisés pour le bouton : OUI
• Taille du texte du bouton : 18px (ordinateur de bureau), 14px (tablette et téléphone)
• Couleur du texte du bouton : #ffffff
• Couleur d’arrière-plan du bouton : rgba(255,255,255,0.15)
• Largeur de la bordure du bouton : 0px
• Afficher l’icône du bouton : NON

Mettez à jour la marge du bouton comme suit :

• Marge : 10px haut, 10px gauche, 10px droite

Sous l’onglet avancé, ajoutez l’ID CSS suivante :

Le bouton d’arrêt

Le bouton Stop est le suivant. Ce bouton permet d’arrêter la vidéo et de la ramener au point de départ.

Pour créer ce bouton, dupliquez le module de bouton « play/pause ».

Mettez ensuite à jour le texte du bouton :

Et donnez au bouton un ID CSS personnalisé :

Le bouton « Mute

Pour créer le bouton Mute qui coupera le volume de la vidéo, dupliquez le bouton « Stop » que nous venons de créer.

Mettez à jour le texte du bouton :

Puis donnez-lui un identifiant CSS personnalisé :

Le bouton d’augmentation du volume

Notre prochain bouton augmentera le volume de la vidéo de manière incrémentielle chaque fois que vous cliquerez dessus. Nous l’appellerons le bouton Augmentation du volume.

Pour créer ce bouton, dupliquez le module de bouton « Mute ».

Mettez ensuite à jour le texte du bouton :

Sous l’onglet Design, ajoutez une flèche vers le haut à côté du texte du bouton en mettant à jour les éléments suivants :

• Afficher l’icône du bouton : OUI
• Icône du bouton : flèche vers le haut (voir la capture d’écran)
• Couleur de l’icône du bouton : #00a9d8
• Afficher l’icône au survol du bouton uniquement : NO

Ensuite, mettez à jour le padding du bouton comme suit :

• Rembourrage : 0.5em left, 1.5em right

Mettez ensuite à jour l’ID CSS :

Le bouton de réduction du volume

Il est impossible d’avoir un bouton « Augmenter le volume » sans avoir également un bouton « Réduire le volume » pour diminuer progressivement le volume de la vidéo à chaque clic.

Pour créer le bouton « Volume faible », dupliquez le bouton « Volume fort » que nous venons de créer.

Mettez ensuite à jour l’icône du bouton en la remplaçant par une icône de type « flèche vers le bas ».

Mettez ensuite à jour l’ID CSS :

Le bouton d’affichage large

Pour notre dernier bouton, nous allons créer un bouton « Vue large » qui augmentera la largeur du conteneur vidéo en cas de clic.

Pour créer ce bouton, dupliquez le bouton « Mute ». Faites ensuite glisser le bouton dupliqué sous le bouton « Volume faible » de manière à ce qu’il se trouve à l’extrême droite de la barre de boutons.

Ouvrez les paramètres du bouton dupliqué et mettez à jour le texte du bouton :

Puis donnez au bouton un ID CSS personnalisé :

Partie 4 : Ajouter le code CSS et JS personnalisé

Maintenant que tous nos éléments Divi sont créés, nous sommes prêts à introduire le code personnalisé nécessaire pour que tout fonctionne.

Allez-y et ajoutez un autre module de code sous le module de code contenant la barre de progression HTML dans la deuxième ligne de notre section.

Le CSS

Dans la zone de code, collez le CSS suivant en veillant à l’insérer dans les balises de style nécessaires.

.control-button-active,
#divi-volinc:active,
#divi-voldec:active,
#divi-play-pause:active,
#divi-stop:active {
  background : #666666 !important ;
}

#progress {
  display : block ;
  largeur : 100% ;
}

#divi-video-container.expand-video {
  max-width : 1400px ;
}

JavaScript/JQuery

Sous la CSS (la balise de style finale), collez le code JS suivant en veillant à l’insérer dans les balises de script nécessaires.

jQuery(document).ready(function ($) {
  $diviVideoContainer = $("#divi-video-container") ;
  $diviVideo = $("#divi-video-container video") ;
  videoElement = $("#divi-video-container video")[0] ;
  $play = $("#divi-play") ;
  $playPause = $("#divi-play-pause") ;
  $stop = $("#divi-stop") ;
  $mute = $("#divi-mute") ;
  $volinc = $("#divi-volinc") ;
  $voldec = $("#divi-voldec") ;
  $progress = $("#progress") ;
  progressElement = $("#progress")[0] ;
  $progressBar = $("#progress-bar") ;
  $largeView = $("#divi-large-view") ;

  videoElement.controls = false ;

  $diviVideo.on("loadedmetadata", function () {
    $progress.attr("max", videoElement.duration) ;
  }) ;

  $diviVideo.on("timeupdate", function (e) {
    progressElement.value = videoElement.currentTime ;
    $progressBar.css(
      "largeur",
      Math.floor((videoElement.currentTime / videoElement.duration) * 100) + "%"
    ) ;
  }) ;

  $diviVideo.on("timeupdate", function () {
    if (!$progress.attr("max")) {
      $progress.attr("max", videoElement.duration) ;
      progressElement.value = videoElement.currentTime ;
      $progressBar.css(
        "largeur",
        Math.floor((videoElement.currentTime / videoElement.duration) * 100) +
          "%"
      ) ;
    }
  }) ;

  $playPause.on("click", function (e) {
    e.preventDefault() ;
    if (videoElement.paused || videoElement.ended) {
      videoElement.play() ;
    } else {
      videoElement.pause() ;
    }
  }) ;

  $stop.on("click", function (e) {
    e.preventDefault() ;
    videoElement.pause() ;
    videoElement.currentTime = 0 ;
    progressElement.value = 0 ;
  }) ;

  $mute.on("click", function (e) {
    e.preventDefault() ;
    videoElement.muted = !videoElement.muted ;
    $(e.target).toggleClass("control-button-active") ;
  }) ;

  $volinc.on("click", function (e) {
    e.preventDefault() ;
    alterVolume("+") ;
  }) ;

  $voldec.on("click", function (e) {
    e.preventDefault() ;
    alterVolume("-") ;
  }) ;

  alterVolume = function (dir) {
    currentVolume = Math.floor(videoElement.volume * 10) / 10 ;
    if (dir === "+") {
      if (currentVolume < 1) videoElement.volume += 0.1 ;
    } else if (dir === "-") {
      si (currentVolume > 0) videoElement.volume -= 0.1 ;
    }
  } ;

  $largeView.on("click", function (e) {
    e.preventDefault() ;
    $(e.target).toggleClass("control-button-active") ;
    $diviVideoContainer.toggleClass("expand-video") ;
  }) ;
  //affiche les contrôles par défaut lors du survol de la vidéo
  $diviVideo.hover(function () {
    if (!videoElement.controls) {
      videoElement.controls = true ;
    } else {
      videoElement.controls = false ;
    }
  }) ;
}) ;

Décomposer le code

Variables pointant vers les éléments HTML et les boutons Divi

Pour commencer, nous devons déclarer des variables qui pointent vers chacun des éléments Divi ayant l’ID CSS spécifié. Nous avons également besoin de deux variables importantes qui pointent vers des éléments HTML réels (et non des objets jQuery). Il s’agit de videoElement (qui pointe vers l’élément vidéo HTML) et progressElement (qui pointe vers l’élément de progression HTML).

$diviVideoContainer = $("#divi-video-container") ;
$diviVideo = $("#divi-video-container video") ;
videoElement = $("#divi-video-container video")[0] ;
$play = $("#divi-play") ;
$playPause = $("#divi-play-pause") ;
$stop = $("#divi-stop") ;
$mute = $("#divi-mute") ;
$volinc = $("#divi-volinc") ;
$voldec = $("#divi-voldec") ;
$progress = $("#progress") ;
progressElement = $("#progress")[0] ;
$progressBar = $("#progress-bar") ;
$largeView = $("#divi-large-view") ;

Une fois les variables en place, nous masquons les contrôles vidéo HTML par défaut.

videoElement.controls = false ;

Ensuite, nous devons faire en sorte que la largeur de notre barre de progression augmente en fonction de l’heure actuelle et de la durée de la vidéo.

Une fois que la vidéo a chargé les métadonnées (en utilisant l’événement loadedmetadata ), sur l’élément de progression, nous définissons un attribut max avec une valeur égale à la durée de la vidéo .

$diviVideo.on("loadedmetadata", function () {
  $progress.attr("max", videoElement.duration) ;
}) ;

Ensuite, nous utilisons l’événement timeupdate pour mettre à jour la valeur et la largeur de la barre de progression afin d’indiquer la position actuelle de la lecture.

$diviVideo.on("timeupdate", function (e) {
  progressElement.value = videoElement.currentTime ;
  $progressBar.css(
    "largeur",
    Math.floor((videoElement.currentTime / videoElement.duration) * 100) + "%"
  ) ;
}) ;

Nous ajoutons également une solution de repli pour les navigateurs mobiles, au cas où l’attribut max de l’élément de progression ne serait pas correctement défini à ce stade.

$diviVideo.on("timeupdate", function () {
  if (!$progress.attr("max")) {
    $progress.attr("max", videoElement.duration) ;
    progressElement.value = videoElement.currentTime ;
    $progressBar.css(
      "largeur",
      Math.floor((videoElement.currentTime / videoElement.duration) * 100) +
        "%"
    ) ;
  }
}) ;

Ensuite, nous commençons à créer des fonctions qui agissent lorsque nous cliquons sur nos boutons.

Pour le bouton de lecture/pause, nous basculons les méthodes play() et pause() en utilisant les attributs paused et ended de l’API médias avec une instruction if.

$playPause.on("click", function (e) {
  e.preventDefault() ;
  if (videoElement.paused || videoElement.ended) {
    videoElement.play() ;
  } else {
    videoElement.pause() ;
  }
}) ;

Pour le bouton d’arrêt, nous mettons la vidéo en pause et ramenons la valeur de progression et le temps actuel à 0.

$stop.on("click", function (e) {
  e.preventDefault() ;
  videoElement.pause() ;
  videoElement.currentTime = 0 ;
  progressElement.value = 0 ;
}) ;

Pour le bouton de mise en sourdine, nous activons l’attribut muted et activons également une classe qui donnera au bouton un arrière-plan plus clair lorsqu’il est en sourdine.

$mute.on("click", function (e) {
  e.preventDefault() ;
  videoElement.muted = !videoElement.muted ;
  $(e.target).toggleClass("control-button-active") ;
}) ;

Pour les boutons de volume, l’un est défini pour augmenter le volume au clic($volinc) et l’autre est défini pour diminuer le volume au clic($voldec). Pour ce faire, on utilise la fonction alterVolume() qui vérifie si le paramètre dir contient un « + » ou un « –  » et augmente ou diminue le volume de manière incrémentielle à chaque clic.

$volinc.on("click", function (e) {
  e.preventDefault() ;
  alterVolume("+") ;
}) ;

$voldec.on("click", function (e) {
  e.preventDefault() ;
  alterVolume("-") ;
}) ;

alterVolume = function (dir) {
  currentVolume = Math.floor(videoElement.volume * 10) / 10 ;
  if (dir === "+") {
    if (currentVolume < 1) videoElement.volume += 0.1 ;
  } else if (dir === "-") {
    si (currentVolume > 0) videoElement.volume -= 0.1 ;
  }
} ;

Le bouton LargeView fait basculer une classe CSS qui ajuste la largeur maximale du conteneur vidéo en cas de clic.

$largeView.on("click", function (e) {
  e.preventDefault() ;
  $(e.target).toggleClass("control-button-active") ;
  $diviVideoContainer.toggleClass("expand-video") ;
}) ;

Et comme cet exemple ne contient pas tous les contrôles et toutes les fonctionnalités disponibles dans les contrôles vidéo par défaut, voici une fonction qui affiche l’attribut de ces contrôles lors du survol de la vidéo.

$diviVideo.hover(function () {
  if (!videoElement.controls) {
    videoElement.controls = true ;
  } else {
    videoElement.controls = false ;
  }
}) ;

Résultat final

Voici le résultat final.

Et voici comment les contrôles s’empilent sur le mobile.

Vous pouvez également consulter ce codepen qui présente la même fonctionnalité.

Pour en savoir plus

Si vous êtes familier avec HTML et Javascript et que vous souhaitez ajouter des contrôles et des fonctionnalités personnalisés à vos vidéos HTML5, vous pouvez consulter ce guide sur la création d’un lecteur vidéo à partir de zéro. Vous pouvez également consulter l’API HTMLMediaElement pour voir les possibilités qu’elle offre.

Je suis impatient de partager d’autres moyens utiles de manipuler les vidéos HTML5 et Divi dans un avenir proche.

Réflexions finales

La création de contrôles externes personnalisés pour vos vidéos dans Divi peut vous ouvrir les portes d’un design et de fonctionnalités uniques. Certes, l’exemple de ce tutoriel n’explore pas toutes les options (ou contrôles) disponibles. De plus, la fonctionnalité est limitée à une seule vidéo sur une page, et non à plusieurs. Il est donc idéal pour personnaliser l’une des principales vidéos que vous souhaitez présenter. Mais j’espère qu’il vous servira d’introduction solide à ce qui est nécessaire pour créer vos propres contrôles vidéo HTML5 personnalisés pour votre prochain projet.

J’ai hâte de lire vos commentaires.

À la vôtre !