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 effet, 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 commandes intégrées (comme la lecture, la sourdine, le volume, etc.) dont la conception standard dépend de votre navigateur. Mais, si vous souhaitez améliorer la conception de ces commandes, vous pouvez réellement créer et styliser vos propres commandes 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 du Divi Builder. Ensuite, nous ajouterons du Javascript personnalisé pour que tout fonctionne.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Vous pouvez également consulter ce codepen qui présente certaines des mêmes fonctionnalités que celles présentées dans ce didacticiel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

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

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez 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 éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

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

Bref aperçu de notre objectif pour ce didacticiel

La syntaxe de base d'une vidéo HTML5 ressemblerait à ceci…

<video controls="">
  <source type="video/mp4" src="video.mp4">
  <source type="video/webm" src="video.webm">
</video>

Notez l'attribut contrôles 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éments 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.

Notre objectif pour ce didacticiel est de masquer initialement ces contrôles par défaut pour une vidéo Divi et de créer certains de nos propres contrôles personnalisés externes à l'aide de Divi Builder et de 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 Divi. Mais d'abord, nous devons mettre à jour l'arrière-plan de notre section.

Contexte de la section

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

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

La ligne vidéo

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

Mettez ensuite à jour les paramètres de ligne comme suit :

• Largeur : 100 %
• Largeur maximale : aucun
• Remplissage : 0px en bas

Création de la vidéo

Comme mentionné précédemment, Divi utilise déjà l'élément vidéo HTML5 au sein du module vidéo Divi. Ainsi, pour créer la vidéo, ajoutez simplement un nouveau module vidéo à la ligne/colonne.

Télécharger des fichiers vidéo vers le module vidéo

Pour des performances maximales, téléchargez à la fois un fichier vidéo MP4 et un fichier vidéo 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 vidéo

Sous l'onglet Conception, mettez à jour les éléments suivants :

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

Sous l'onglet Avancé, ajoutez l'ID CSS suivant :

• ID CSS : divi-video-conteneur

Partie 2 : Création de la barre de progression

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

La barre de progression

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

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

• Remplissage : 10 pixels en haut, 0 pixels en bas

Ajout de la barre de progression HTML

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

Dans la zone de code, collez le code HTML suivant :

<progress id="progress" value="0" min="0">
  <span id="progress-bar"></span>
</progress>

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

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

Nous sommes maintenant prêts à commencer à ajouter des boutons de contrôle vidéo personnalisés à l'aide d'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 de boutons/conteneur.

La ligne

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

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

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

Ajout de Flex à la colonne

Un moyen 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 Lecture/Pause

Nous allons faire de ce premier bouton le bouton « Lecture/Pause » qui basculera entre les fonctions de lecture et de 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 : Lecture/Pause

Sous l'onglet Conception, stylisez le bouton comme suit :

• Utiliser des styles personnalisés pour le bouton : OUI
• Taille du texte du bouton : 18 px (ordinateur de bureau), 14 px (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 en haut, 10px à gauche, 10px à droite

Sous l'onglet Avancé, ajoutez l'ID CSS suivant :

• Identifiant CSS : divi-play-pause

Le bouton d'arrêt

Ensuite, il y a le bouton Arrêter. Ce bouton arrêtera la vidéo et la ramènera au point de départ.

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

Mettez ensuite à jour le texte du bouton :

• Texte du bouton : Arrêter

Et donnez au bouton un identifiant CSS personnalisé :

• Identifiant CSS : divi-stop

Le bouton Muet

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

Mettez à jour le texte du bouton :

• Texte du bouton : Muet

Donnez-lui ensuite un identifiant CSS personnalisé :

• Identifiant CSS : divi-mute

Le bouton d'augmentation du volume

Notre bouton suivant augmentera progressivement le volume de la vidéo à chaque fois que vous cliquerez dessus. Nous l'appellerons le bouton d'augmentation du volume.

Pour créer le bouton, dupliquez le module de boutons « Muet ».

Mettez ensuite à jour le texte du bouton :

• Texte du bouton : Vol

Sous l'onglet Conception, 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 capture d'écran)
• Couleur de l'icône du bouton : #00a9d8
• Afficher uniquement l'icône au survol pour le bouton : NON

Mettez ensuite à jour le remplissage du bouton comme suit :

• Rembourrage : 0,5 em à gauche, 1,5 em à droite

Ensuite, mettez à jour l'ID CSS :

• Identifiant CSS : divi-volinc

Le bouton de réduction du volume

Nous ne pouvons pas avoir un bouton "Volume Up" avec également un bouton "Volume Down" pour diminuer progressivement le volume de la vidéo à chaque clic.

Pour créer le bouton "Volume Down", dupliquez le bouton "Volume Up" que nous venons de créer.

Mettez ensuite à jour l'icône du bouton en une icône « flèche vers le bas ».

Ensuite, mettez à jour l'ID CSS :

• Identifiant CSS : divi-voldec

Le bouton Large View

Pour notre dernier bouton, nous allons créer un bouton « Large View » qui augmentera la largeur du conteneur vidéo au clic.

Pour créer le bouton, dupliquez le bouton « Muet ». Faites ensuite glisser le bouton dupliquer sous le bouton « Volume bas » afin qu'il se trouve à l'extrême droite de la barre de boutons.

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

• Texte du bouton : grande vue

Donnez ensuite au bouton un identifiant CSS personnalisé :

• ID CSS : divi-large-view

Partie 4 : Ajout du code CSS et JS personnalisé

Maintenant que tous nos éléments Divi sont créés, nous sommes prêts à apporter 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 rangée de notre section.

Le CSS

Dans la zone de code, collez le CSS suivant en veillant à envelopper le CSS 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;
  width: 100%;
}

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

Le JavaScript/JQuery

Sous le CSS (la balise de style de fin), collez le code JS suivant en veillant à envelopper le code 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(
      "width",
      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(
        "width",
        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 === "-") {
      if (currentVolume > 0) videoElement.volume -= 0.1;
    }
  };

  $largeView.on("click", function (e) {
    e.preventDefault();
    $(e.target).toggleClass("control-button-active");
    $diviVideoContainer.toggleClass("expand-video");
  });
  //shows default controls when hovering over video
  $diviVideo.hover(function () {
    if (!videoElement.controls) {
      videoElement.controls = true;
    } else {
      videoElement.controls = false;
    }
  });
});

Briser le code

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

Pour commencer, nous devons déclarer des variables qui pointent vers chacun des éléments Divi qui ont notre identifiant CSS spécifié. Nous avons également besoin de deux variables importantes qui pointent vers des éléments HTML réels (pas des objets jQuery). Ceux-ci incluent videoElement (qui pointe vers l'élément vidéo HTML) et progressElement (qui pointe vers l'élément HTML progress).

$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 augmenter la largeur de notre barre de progression par rapport à l'heure et à la durée actuelles de la vidéo.

Une fois les charges vidéo les méta - données ( en utilisant l'événement loadedmetadata), sur l'élément de progrès, nous avons établi 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 de lecture actuelle.

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

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

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

Ensuite, nous commençons à créer des fonctions qui font des choses en cliquant sur nos boutons.

Pour la touche de lecture / pause, nous basculer le jeu () et pause () méthodes utilisant les attributs fit une pause et de l'API terminés 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 l'heure actuelle à 0 .

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

Pour le bouton muet, nous basculons l'attribut muet et basculons également une classe qui stylisera le bouton avec un arrière-plan plus clair lorsqu'il est muet.

$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 ). Ceci est accompli à l'aide de la fonction alterVolume () qui vérifie le paramètre dir pour un "+" ou "-" 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 === "-") {
    if (currentVolume > 0) videoElement.volume -= 0.1;
  }
};

Le bouton Large View bascule une classe CSS qui ajuste la largeur maximale du conteneur vidéo au clic.

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

Et parce que cet exemple ne contient pas toutes les commandes et fonctionnalités disponibles dans les commandes vidéo par défaut, voici une fonction qui affiche l'attribut de ces commandes 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 commandes s'empilent sur mobile.

Vous pouvez également consulter ce codepen qui démontre la même fonctionnalité.

Explore plus

Si vous êtes familiarisé avec HTML et Javascript et que vous souhaitez ajouter davantage de contrôles et de fonctionnalités personnalisés à vos vidéos HTML5, vous pouvez consulter ce guide pour savoir comment créer un lecteur vidéo à partir de zéro. Vous pouvez également consulter l'API HTMLMediaElement pour voir les possibilités qu'elle offre.

J'ai hâte de partager des moyens plus utiles pour manipuler les vidéos HTML5 et Divi dans un avenir proche.

Dernières pensées

La création de contrôles personnalisés externes pour vos vidéos dans Divi peut ouvrir les portes d'un design et de fonctionnalités uniques. Certes, l'exemple de ce didacticiel n'explore pas toutes les options (ou commandes) disponibles. Et, la fonctionnalité est limitée à une vidéo sur une page, pas 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 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 vous entendre dans les commentaires.

À votre santé!