Come creare controlli video HTML5 personalizzati per un video in Divi

I video HTML5 sono un modo comodo ed efficace per visualizzare video su qualsiasi sito web. In effetti, Divi utilizza il formato video HTML5 per visualizzare i video in Divi utilizzando il modulo video. Tuttavia, per impostazione predefinita, questi video contengono controlli integrati (come play, mute, volume, ecc.) che hanno un design standard che dipende dal tuo browser. Ma se vuoi migliorare il design di questi controlli, puoi effettivamente creare e modellare i tuoi controlli esterni per il tuo video HTLM5.

In questo tutorial, ti mostreremo come creare controlli video HTML5 personalizzati per un video in Divi. Per fare ciò, creeremo e modelleremo il video e i pulsanti di controllo personalizzati utilizzando Divi Builder. Quindi aggiungeremo alcuni Javascript personalizzati per far funzionare tutto.

Iniziamo!

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Puoi anche dare un'occhiata a questo codepen che dimostra alcune delle stesse funzionalità presenti in questo tutorial.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.

Fare clic sul pulsante Importa.

Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.

Passiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Breve panoramica del nostro obiettivo per questo tutorial

La sintassi di base per un video HTML5 sarebbe simile a questa...

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

Notare l'attributo dei controlli nell'elemento video . Questo è ciò che viene utilizzato per visualizzare i controlli standard che normalmente vediamo in un video HTML5.

Il modulo video di Divi utilizza la stessa struttura di elementi video HTML5 per visualizzare i video ospitati autonomamente caricati all'interno del modulo. Quindi, quando utilizziamo un modulo video, utilizziamo video HTML5.

Il nostro obiettivo per questo tutorial è inizialmente nascondere quei controlli predefiniti per un video Divi e creare alcuni dei nostri controlli personalizzati esterni utilizzando Divi Builder e del codice personalizzato.

Parte 1: Creazione del video HTML5 in Divi

In questa prima parte del tutorial, creeremo un video HTML5 utilizzando il modulo Divi Video. Ma prima, dobbiamo aggiornare lo sfondo della nostra sezione.

Sfondo della sezione

Inizia aggiornando le impostazioni della sezione per la sezione predefinita disponibile per impostazione predefinita come segue:

• Colore sfondo sfumato sinistro: rgba(0,0,0,0,8)
• Colore di sfondo sfumato a destra: #000000
• Posiziona il gradiente sopra l'immagine di sfondo: S
• Immagine di sfondo: [carica immagine a scelta]

La fila del video

Successivamente, dobbiamo aggiungere la riga che conterrà il nostro video. Aggiungi una nuova riga a una colonna alla sezione.

Quindi aggiorna le impostazioni della riga come segue:

• Larghezza: 100%
• Larghezza massima: nessuna
• Imbottitura: 0px in basso

Creazione del video

Come accennato in precedenza, Divi utilizza già l'elemento video HTML5 all'interno del modulo video Divi. Quindi, per creare il video, aggiungi semplicemente un nuovo modulo video alla riga/colonna.

Carica file video nel modulo video

Per ottenere le massime prestazioni, carica sia un file video MP4 che WEBM del tuo video nella galleria multimediale.

Quindi, aggiungi i file video MP4 e WEBM al modulo video nella scheda contenuto:

Aggiorna le impostazioni video

Nella scheda Progettazione, aggiorna quanto segue:

• Larghezza massima: 1080px
• Allineamento del modulo: centro

Nella scheda Avanzate, aggiungi il seguente ID CSS:

• ID CSS: divi-video-contenitore

Parte 2: Creazione della barra di avanzamento

I video HTML includono funzionalità integrate per visualizzare una barra di avanzamento. Possiamo usare un po' di codice personalizzato per aggiungere la nostra barra di avanzamento per il nostro video.

La riga della barra di avanzamento

Per visualizzare una barra di avanzamento personalizzata per il video, crea innanzitutto una nuova riga a una colonna sotto la riga contenente il video.

Apri le impostazioni della riga e aggiorna il riempimento come segue:

• Imbottitura: 10px in alto, 0px in basso

Aggiunta dell'HTML della barra di avanzamento

Per aggiungere il nostro snippet personalizzato di HTML per visualizzare la barra di avanzamento, dobbiamo aggiungere un nuovo modulo di codice alla riga.

All'interno della casella del codice, incolla il seguente codice HTML:

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

Aggiungeremo in seguito le funzionalità di cui abbiamo bisogno alla barra di avanzamento con il nostro Javascript personalizzato.

Parte 3: creazione dei pulsanti di controllo video in Divi

Ora siamo pronti per iniziare ad aggiungere alcuni pulsanti di controllo video personalizzati utilizzando una serie di moduli di pulsanti Divi.

Creazione della riga e della colonna

Innanzitutto, dobbiamo impostare la nostra riga e colonna che fungerà da barra/contenitore dei pulsanti.

La riga

Aggiungi una nuova riga a una colonna sotto la riga contenente il codice a barre di avanzamento.

Apri le impostazioni della riga e aggiorna quanto segue:

• Larghezza grondaia: 1
• Imbottitura: 10px in alto, 20px in basso

Aggiungere Flex alla Colonna

Un modo semplice per ottenere l'allineamento orizzontale dei nostri pulsanti è utilizzare display:flex sulla colonna contenente i nostri pulsanti. Per fare ciò, apri le impostazioni per la colonna e aggiungi il seguente CSS personalizzato all'elemento principale:

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

Ora che la nostra colonna è pronta, siamo pronti per aggiungere i nostri pulsanti.

Il pulsante Riproduci/Pausa

Faremo di questo primo pulsante il pulsante "Riproduci/Pausa" che attiverà la funzione di riproduzione e pausa per il nostro video. Per creare il pulsante, aggiungi un modulo pulsante alla colonna.

Apri le impostazioni del pulsante e aggiorna il testo del pulsante:

• Testo del pulsante: Riproduci/Pausa

Nella scheda Design, modella il pulsante come segue:

• Usa stili personalizzati per pulsante: S
• Dimensione del testo del pulsante: 18 px (desktop), 14 px (tablet e telefono)
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: rgba (255,255,255,0.15)
• Larghezza bordo pulsante: 0px
• Mostra icona pulsante: NO

Aggiorna il margine per il pulsante come segue:

• Margine: 10px in alto, 10px a sinistra, 10px a destra

Nella scheda Avanzate, aggiungi il seguente ID CSS:

• ID CSS: divi-play-pause

Il pulsante Stop

Il prossimo è il pulsante Stop. Questo pulsante interromperà il video e lo riporterà al punto di partenza.

Per creare il pulsante, duplica il modulo pulsante "riproduci/pausa".

Quindi aggiorna il testo del pulsante:

• Testo del pulsante: Stop

E dai al pulsante un ID CSS personalizzato:

• ID CSS: divi-stop

Il pulsante Mute

Per creare il pulsante Mute che disattiverà il volume del video, duplica il pulsante "Stop" che abbiamo appena creato.

Aggiorna il testo del pulsante:

• Testo del pulsante: Muto

Quindi assegnagli un ID CSS personalizzato:

• ID CSS: divi-mute

Il pulsante di aumento del volume

Il nostro pulsante successivo aumenterà il volume del video in modo incrementale ogni volta che fai clic su di esso. Lo chiameremo il pulsante Volume su.

Per creare il pulsante, duplica il modulo pulsante "Disattiva audio".

Quindi aggiorna il testo del pulsante:

• Testo del pulsante: Vol

Nella scheda Progettazione, aggiungi una freccia in su accanto al testo del pulsante aggiornando quanto segue:

• Mostra icona pulsante: S
• Icona del pulsante: freccia su (vedi screenshot)
• Colore icona pulsante: #00a9d8
• Mostra solo l'icona al passaggio del mouse per il pulsante: NO

Quindi aggiorna il riempimento del pulsante come segue:

• Imbottitura: 0,5 em a sinistra, 1,5 em a destra

Quindi aggiorna l'ID CSS:

• ID CSS: divi-volinc

Il pulsante di riduzione del volume

Non possiamo avere un pulsante "Volume su" con anche un pulsante "Volume giù" per diminuire in modo incrementale il volume del video ad ogni clic.

Per creare il pulsante "Volume giù", duplica il pulsante "Volume su" che abbiamo appena creato.

Quindi aggiorna l'icona del pulsante a un'icona "freccia giù".

Quindi aggiorna l'ID CSS:

• ID CSS: divi-voldec

Il pulsante di visualizzazione grande

Per il nostro ultimo pulsante, creeremo un pulsante "Vista grande" che aumenterà la larghezza del contenitore video al clic.

Per creare il pulsante, duplica il pulsante "Disattiva audio". Quindi trascina il pulsante duplicato sotto il pulsante "Volume giù" in modo che si trovi all'estrema destra della barra dei pulsanti.

Apri le impostazioni per il pulsante duplicato e aggiorna il testo del pulsante:

• Testo del pulsante: Visualizzazione ampia

Quindi dai al pulsante un ID CSS personalizzato:

• ID CSS: divi-large-view

Parte 4: aggiunta del codice CSS e JS personalizzato

Ora che tutti i nostri elementi Divi sono stati creati, siamo pronti per inserire il codice personalizzato necessario per far funzionare tutto.

Vai avanti e aggiungi un altro modulo di codice sotto il modulo di codice contenente la barra di avanzamento HTML nella seconda riga della nostra sezione.

Il CSS

Nella casella del codice, incolla il seguente CSS assicurandoti di avvolgere il CSS all'interno dei tag di stile necessari.

.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;
}

JavaScript/JQuery

Sotto il CSS (il tag di stile finale), incolla il seguente codice JS assicurandoti di avvolgere il codice all'interno dei tag di script necessari.

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;
    }
  });
});

Scomporre il codice

Variabili che puntano a elementi HTML e pulsanti Divi

Per iniziare, dobbiamo dichiarare le variabili che puntano a ciascuno degli elementi Divi che hanno il nostro ID CSS specificato. Abbiamo anche bisogno di due importanti variabili che puntano a elementi HTML effettivi (non oggetti jQuery). Questi includono videoElement (che punta all'elemento video HTML) e progressElement (che punta all'elemento progress 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");

Una volta che le variabili sono a posto, nascondiamo i controlli video HTML predefiniti.

videoElement.controls = false;

Successivamente, dobbiamo far crescere la nostra barra di avanzamento in larghezza rispetto all'ora corrente e alla durata del video.

Una volta che il video carica i metadati (usando l'evento Loadedmetadata ), sull'elemento progress, impostiamo un attributo max con un valore pari alla durata del video.

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

Quindi utilizziamo l'evento timeupdate per aggiornare il valore e la larghezza della barra di avanzamento per indicare la posizione di riproduzione corrente.

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

Aggiungiamo anche un fallback per i browser mobili nel caso in cui l'attributo max dell'elemento progress non sia impostato correttamente a questo punto.

$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) +
        "%"
    );
  }
});

Successivamente, iniziamo a creare funzioni che eseguono operazioni quando si fa clic sui nostri pulsanti.

Per il tasto play / pausa, abbiamo commutare la play () e metodi di pausa () utilizzando attributi in pausa e chiusi del Media API con un'istruzione if.

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

Per il pulsante di arresto, mettiamo in pausa il video e riportiamo il valore di avanzamento e l'ora corrente a 0 .

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

Per il pulsante di disattivazione dell'audio , attiviamo l'attributo disattivato e attiviamo anche una classe che stilizzerà il pulsante con uno sfondo più chiaro quando l'audio è disattivato.

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

Per i pulsanti Volume, uno è definito per aumentare il volume al clic ( $volinc ) e l'altro è definito per diminuire il volume al clic ( $voldec ). Ciò si ottiene utilizzando la funzione alterVolume() che controlla il parametro dir per un "+" o "-" e aumenta o diminuisce il volume in modo incrementale ad ogni 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;
  }
};

Il pulsante Visualizzazione grande attiva o disattiva una classe CSS che regola la larghezza massima del contenitore video al clic.

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

E poiché questo esempio non contiene tutti i controlli e le funzionalità disponibili all'interno dei controlli video predefiniti, ecco una funzione che mostra l'attributo di tali controlli quando si passa con il mouse sul video.

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

Risultato finale

Questo è il risultato finale.

Ed ecco come si impilano i controlli sui dispositivi mobili.

Puoi anche dare un'occhiata a questo codepen che dimostra la stessa funzionalità.

Esplora di più

Se hai familiarità con HTML e Javascript e sei interessato ad aggiungere ulteriori controlli e funzionalità personalizzati ai tuoi video HTML5, puoi consultare questa guida su come creare un lettore video da zero. Potresti anche voler controllare l'API HTMLMediaElement per vedere le possibilità lì.

Non vedo l'ora di condividere modi più utili per manipolare video HTML5 e Divi nel prossimo futuro.

Pensieri finali

La creazione di alcuni controlli personalizzati esterni per i tuoi video in Divi può aprire le porte a design e funzionalità unici. Certo, l'esempio di questo tutorial non esplora tutte le opzioni (o controlli) disponibili. E la funzionalità è limitata a un video su una pagina, non a più. Quindi è l'ideale per personalizzare uno dei video principali che vuoi mostrare. Ma si spera che serva come una solida introduzione a ciò che è necessario per creare alcuni controlli video HTML5 personalizzati per il tuo prossimo progetto.

Non vedo l'ora di sentirti nei commenti.

Saluti!