Cum se creează comenzi video HTML5 personalizate pentru un videoclip în Divi

Videoclipurile HTML5 sunt un mod convenabil și eficient de a afișa videoclipuri pe orice site web. De fapt, Divi folosește formatul video HTML5 pentru a afișa videoclipuri în Divi folosind modulul video. Cu toate acestea, în mod implicit, aceste videoclipuri conțin controale încorporate (cum ar fi redarea, mutarea, volumul etc.) care au un design standard care depinde de browserul dvs. Dar, dacă doriți să îmbunătățiți designul acestor controale, puteți crea și stiliza propriile controale externe pentru videoclipul dvs. HTLM5.

În acest tutorial, vă vom arăta cum să creați controale video HTML5 personalizate pentru un videoclip în Divi. Pentru a face acest lucru, vom crea și stiliza butoanele de control video și personalizate folosind Divi Builder. Apoi vom adăuga câteva Javascript personalizate pentru ca totul să funcționeze.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

De asemenea, puteți verifica acest codepen care demonstrează unele dintre aceleași funcționalități prezentate în acest tutorial.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Scurtă prezentare generală a obiectivului nostru pentru acest tutorial

Sintaxa de bază pentru un videoclip HTML5 ar arăta cam așa ...

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

Observați atributul comenzilor din elementul video . Aceasta este ceea ce este folosit pentru a afișa comenzile standard pe care le vedem în mod normal într-un videoclip HTML5.

Modulul video al lui Divi folosește aceeași structură a elementelor video HTML5 pentru a afișa videoclipuri găzduite automat pe care le încărcați în cadrul modulului. Deci, atunci când folosim un modul video, folosim videoclipuri HTML5.

Scopul nostru pentru acest tutorial este să ascundem inițial acele controale implicite pentru un videoclip Divi și să construim unele dintre propriile noastre controale personalizate externe utilizând Divi Builder și un anumit cod personalizat.

Partea 1: Crearea videoclipului HTML5 în Divi

În această primă parte a tutorialului, vom crea un videoclip HTML5 folosind modulul video Divi. Dar mai întâi, trebuie să ne actualizăm fundalul secțiunii.

Fundalul secțiunii

Începeți prin actualizarea setărilor secțiunii pentru secțiunea implicită disponibilă în mod implicit după cum urmează:

• Culoarea stânga a gradientului de fundal: rgba (0,0,0,0,8)
• Culoarea dreaptă a gradientului de fundal: # 000000
• Plasați gradientul deasupra imaginii de fundal: DA
• Imagine de fundal: [încărcați imaginea la alegere]

Rândul video

Apoi, trebuie să adăugăm rândul care va conține videoclipul nostru. Adăugați un nou rând cu o coloană la secțiune.

Apoi actualizați setările rândului după cum urmează:

• Lățime: 100%
• Lățime maximă: niciuna
• Căptușeală: 0px jos

Crearea videoclipului

După cum sa menționat mai devreme, Divi folosește deja elementul video HTML5 în cadrul modulului video Divi. Deci, pentru a crea videoclipul, pur și simplu adăugați un nou modul video la rând / coloană.

Încărcați fișiere video în modulul video

Pentru performanță maximă, încărcați atât un fișier video MP4, cât și un WEBM al videoclipului dvs. în galeria media.

Apoi, adăugați fișierele video MP4 și WEBM la modulul video sub fila conținut:

Actualizați setările video

Sub fila Proiectare, actualizați următoarele:

• Lățime maximă: 1080px
• Alinierea modulului: centru

Sub fila avansată, adăugați următorul ID CSS:

• CSS ID: divi-video-container

Partea 2: Crearea barei de progres

Videoclipurile HTML includ funcționalitate încorporată pentru a afișa o bară de progres. Putem folosi un pic de cod personalizat pentru a adăuga propria noastră bară de progres pentru videoclipul nostru.

Rândul barei de progres

Pentru a afișa o bară de progres personalizată pentru videoclip, creați mai întâi un nou rând cu o coloană sub rândul care conține videoclipul.

Deschideți setările rândului și actualizați umplutura după cum urmează:

• Căptușeală: 10 px sus, 0 px jos

Adăugarea barei de progres HTML

Pentru a adăuga fragmentul nostru personalizat de HTML pentru a afișa bara de progres, trebuie să adăugăm un nou modul de cod la rând.

În caseta de cod, lipiți următorul HTML:

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

Vom adăuga funcționalitatea de care avem nevoie la bara de progres cu Javascript-ul nostru personalizat mai târziu.

Partea 3: Crearea butoanelor de control video în Divi

Acum suntem gata să începem să adăugăm câteva butoane de control video personalizate folosind o serie de module de butoane Divi.

Crearea rândului și a coloanei

În primul rând, trebuie să ne configurăm rândul și coloana, care vor servi drept bara de butoane / container.

Randul

Adăugați un rând nou cu o coloană sub rândul care conține codul de bare de progres.

Deschideți setările rândului și actualizați următoarele:

• Lățimea jgheabului: 1
• Căptușeală: 10 px sus, 20 px jos

Adăugarea Flex la coloană

O modalitate simplă de a obține alinierea orizontală pentru butoanele noastre este de a utiliza display: flex pe coloana care conține butoanele noastre. Pentru aceasta, deschideți setările pentru coloană și adăugați următorul CSS personalizat la elementul principal:

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

Acum că coloana noastră este gata, suntem gata să adăugăm butoanele noastre.

Butonul Redare / Pauză

Vom face din acest prim buton butonul „Redare / Pauză” care va comuta funcția de redare și pauză pentru videoclipul nostru. Pentru a crea butonul, adăugați un modul buton în coloană.

Deschideți setările butonului și actualizați textul butonului:

• Text buton: Redare / Pauză

Sub fila Design, stilizați butonul după cum urmează:

• Utilizați stiluri personalizate pentru buton: DA
• Dimensiune text buton: 18 px (desktop), 14 px (tabletă și telefon)
• Culoarea textului butonului: #ffffff
• Culoare fundal buton: rgba (255,255,255,0,15)
• Lățimea chenarului butonului: 0 px
• Afișează pictograma butonului: NU

Actualizați marginea butonului după cum urmează:

• Marja: 10 px sus, 10 px stânga, 10 px dreapta

Sub fila avansată, adăugați următorul ID CSS:

• CSS ID: divi-play-pause

Butonul Stop

Următorul este butonul Stop. Acest buton va opri videoclipul și îl va readuce la punctul de plecare.

Pentru a crea butonul, copiați modulul butonului „redare / pauză”.

Apoi actualizați textul butonului:

• Text buton: Stop

Și dați butonului un ID CSS personalizat:

• ID CSS: divi-stop

Butonul Mute

Pentru a crea butonul Mute care va dezactiva volumul videoclipului, copiați butonul „Stop” pe care tocmai l-am creat.

Actualizați textul butonului:

• Text buton: Dezactivare sunet

Apoi dați-i un ID CSS personalizat:

• ID CSS: divi-mute

Butonul de creștere a volumului

Următorul nostru buton va crește gradual volumul videoclipului de fiecare dată când faceți clic pe el. Îl vom numi butonul de creștere a volumului.

Pentru a crea butonul, copiați modulul butonului „Mute”.

Apoi actualizați textul butonului:

• Text buton: Vol

Sub fila de proiectare, adăugați o săgeată sus în dreptul textului butonului, actualizând următoarele:

• Afișează pictograma butonului: DA
• Pictogramă buton: săgeată sus (vezi captura de ecran)
• Culoare pictogramă buton: # 00a9d8
• Afișați pictograma doar pe cursor pentru buton: NU

Apoi actualizați umplerea butonului după cum urmează:

• Căptușeală: 0,5em stânga, 1,5em dreapta

Apoi actualizați ID-ul CSS:

• ID CSS: divi-volinc

Butonul de reducere a volumului

Nu putem avea un buton „Creștere volum” cu un buton „Volum redus” pentru a reduce gradual volumul videoclipului la fiecare clic.

Pentru a crea butonul „Volume Down”, copiați butonul „Volume Up” pe care tocmai l-am creat.

Apoi actualizați pictograma butonului la pictograma „săgeată în jos”.

Apoi actualizați ID-ul CSS:

• ID CSS: divi-voldec

Butonul de vizualizare mare

Pentru ultimul nostru buton, vom crea un buton „Vizualizare mare” care va crește lățimea containerului video la clic.

Pentru a crea butonul, duplicați butonul „Mute”. Apoi trageți butonul duplicat sub butonul „Volum jos”, astfel încât să se așeze în extrema dreaptă a barei de butoane.

Deschideți setările pentru butonul duplicat și actualizați textul butonului:

• Text buton: Vizualizare mare

Apoi dați butonului un ID CSS personalizat:

• CSS ID: divi-large-view

Partea 4: Adăugarea codului CSS personalizat și a codului JS

Acum că toate elementele noastre Divi sunt create, suntem gata să aducem codul personalizat necesar pentru ca totul să funcționeze.

Continuați și adăugați un alt modul de cod sub modulul de cod care conține bara de progres HTML în al doilea rând al secțiunii noastre.

CSS

În caseta de cod, lipiți următorul CSS asigurându-vă că înfășurați CSS în etichetele de stil necesare.

.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

Sub CSS (eticheta de stil de încheiere), lipiți următorul cod JS asigurându-vă că ați înfășurat codul în etichetele de script necesare.

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

Defalcarea codului

Variabile care indică elemente HTML și butoane Divi

Pentru a începe, trebuie să declarăm variabile care indică fiecare dintre elementele Divi care au codul CSS specificat. De asemenea, avem nevoie de două variabile importante care indică elemente HTML reale (nu obiecte jQuery). Acestea includ videoElement (care indică elementul video HTML) și progressElement (care indică elementul HTML de progres).

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

Odată ce variabilele sunt la locul lor, ascundem comenzile video HTML implicite.

videoElement.controls = false;

Apoi, trebuie să facem ca bara noastră de progres să crească în lățime în raport cu ora și durata curente a videoclipului.

Odată ce videoclipul încarcă meta datele (folosind evenimentul încărcat metadate ), pe elementul de progres, setăm un atribut maxim cu o valoare egală cu durata videoclipului.

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

Apoi folosim evenimentul timeupdate pentru a actualiza valoarea și lățimea barei de progres pentru a indica poziția curentă de redare.

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

De asemenea, adăugăm o rezervă pentru browserele mobile doar în cazul în care atributul maxim al elementului de progres nu este setat corect în acest moment.

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

Apoi, începem să creăm funcții care fac lucruri atunci când facem clic pe butoanele noastre.

Pentru butonul de redare / pauză, comutăm metodele de redare () și pauză () folosind atributele pauzate și încheiate ale API-ului media cu o instrucțiune if .

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

Pentru butonul de oprire, întrerupem videoclipul și readucem valoarea de progres și ora curentă la 0 .

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

Pentru butonul de mutare, comutăm atributul dezactivat și, de asemenea, comutăm o clasă care va stiliza butonul cu un fundal mai deschis atunci când este dezactivat.

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

Pentru butoanele de volum, unul este definit pentru a crește volumul la clic ( $ volinc ), iar celălalt este definit pentru a reduce volumul la clic ( $ voldec ). Acest lucru se realizează folosind funcția alterVolume () care verifică parametrul dir pentru „+” sau „-” și crește sau scade volumul în mod incremental la fiecare 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;
  }
};

Butonul Vizualizare mare comută o clasă CSS care ajustează lățimea maximă a containerului video la clic.

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

Și pentru că acest exemplu nu conține toate comenzile și funcționalitatea disponibile în cadrul controalelor video implicite, iată o funcție care arată atributele acelor controale atunci când treceți cu mouse-ul peste videoclip.

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

Rezultat final

Iată rezultatul final.

Iată cum se stivuiesc comenzile pe mobil.

De asemenea, puteți verifica acest codepen care demonstrează aceeași funcționalitate.

Explorează mai multe

Dacă sunteți familiarizat cu HTML și Javascript și sunteți interesat să adăugați mai multe controale și funcționalități personalizate videoclipurilor dvs. HTML5, puteți consulta acest ghid despre cum să creați un player video de la zero. De asemenea, vă recomandăm să consultați API-ul HTMLMediaElement pentru a vedea posibilitățile de acolo.

Aștept cu nerăbdare să împărtășesc modalități mai utile de manipulare a videoclipurilor HTML5 și Divi în viitorul apropiat.

Gânduri finale

Crearea unor comenzi externe personalizate pentru videoclipurile dvs. din Divi poate deschide ușile pentru un design și funcționalitate unice. Acordat, exemplul din acest tutorial nu explorează toate opțiunile (sau controalele) disponibile. Și funcționalitatea este limitată la un videoclip pe o pagină, nu la mai multe. Așadar, este ideal pentru personalizarea unuia dintre videoclipurile principale pe care doriți să le prezentați. Dar, sperăm, va servi ca o introducere solidă la ceea ce este necesar pentru a crea propriile controale video HTML5 personalizate pentru următorul dvs. proiect.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!