So erstellen Sie benutzerdefinierte HTML5-Videosteuerelemente für ein Video in Divi

HTML5-Videos sind eine bequeme und effektive Möglichkeit, Videos auf jeder Website anzuzeigen. Tatsächlich verwendet Divi das HTML5-Videoformat, um Videos in Divi mithilfe des Videomoduls anzuzeigen. Diese Videos enthalten jedoch standardmäßig integrierte Steuerelemente (wie Wiedergabe, Stummschaltung, Lautstärke usw.), deren Standarddesign von Ihrem Browser abhängt. Wenn Sie jedoch das Design dieser Steuerelemente verbessern möchten, können Sie Ihre eigenen externen Steuerelemente für Ihr HTLM5-Video erstellen und gestalten.

In diesem Tutorial zeigen wir Ihnen, wie Sie benutzerdefinierte HTML5-Videosteuerelemente für ein Video in Divi erstellen. Dazu erstellen und gestalten wir die Video- und benutzerdefinierten Steuerschaltflächen mit dem Divi Builder. Dann fügen wir benutzerdefiniertes Javascript hinzu, damit alles funktioniert.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Sie können sich auch diesen Codepen ansehen, der einige der gleichen Funktionen demonstriert, die in diesem Tutorial vorgestellt werden.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Kurzer Überblick über unser Ziel für dieses Tutorial

Die grundlegende Syntax für ein HTML5-Video würde in etwa so aussehen…

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

Beachten Sie das Steuerattribut im Videoelement . Dies wird verwendet, um die Standardsteuerelemente anzuzeigen, die wir normalerweise in einem HTML5-Video sehen.

Das Videomodul von Divi verwendet dieselbe HTML5-Videoelementstruktur, um selbst gehostete Videos anzuzeigen, die Sie innerhalb des Moduls hochladen. Wenn wir also ein Videomodul verwenden, verwenden wir HTML5-Videos.

Unser Ziel für dieses Tutorial ist es, diese Standardsteuerelemente für ein Divi-Video zunächst auszublenden und einige unserer eigenen externen benutzerdefinierten Steuerelemente mit dem Divi Builder und etwas benutzerdefiniertem Code zu erstellen.

Teil 1: Erstellen des HTML5-Videos in Divi

In diesem ersten Teil des Tutorials erstellen wir ein HTML5-Video mit dem Divi-Videomodul. Aber zuerst müssen wir unseren Abschnittshintergrund aktualisieren.

Abschnitt Hintergrund

Beginnen Sie mit der Aktualisierung der Abschnittseinstellungen für den standardmäßig verfügbaren Standardabschnitt wie folgt:

• Hintergrundfarbe links: rgba(0,0,0,0.8)
• Hintergrund mit Farbverlauf rechts: #000000
• Farbverlauf über dem Hintergrundbild platzieren: JA
• Hintergrundbild: [Bild der Wahl hochladen]

Die Videoreihe

Als nächstes müssen wir die Zeile hinzufügen, die unser Video enthält. Fügen Sie dem Abschnitt eine neue einspaltige Zeile hinzu.

Aktualisieren Sie dann die Zeileneinstellungen wie folgt:

• Breite: 100%
• Maximale Breite: keine
• Polsterung: 0px unten

Erstellen des Videos

Wie bereits erwähnt, verwendet Divi bereits das HTML5-Videoelement innerhalb des Divi-Videomoduls. Um das Video zu erstellen, fügen Sie der Zeile/Spalte einfach ein neues Videomodul hinzu.

Videodateien in das Videomodul hochladen

Für maximale Leistung laden Sie sowohl eine MP4- als auch eine WEBM-Videodatei Ihres Videos in die Mediengalerie hoch.

Als nächstes fügen Sie die MP4- und WEBM-Videodateien zum Videomodul unter der Registerkarte Inhalt hinzu:

Videoeinstellungen aktualisieren

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Maximale Breite: 1080px
• Modulausrichtung: Mitte

Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-ID hinzu:

• CSS-ID: divi-video-container

Teil 2: Erstellen des Fortschrittsbalkens

HTML-Videos enthalten integrierte Funktionen zum Anzeigen eines Fortschrittsbalkens. Wir können ein wenig benutzerdefinierten Code verwenden, um unseren eigenen Fortschrittsbalken für unser Video hinzuzufügen.

Die Fortschrittsbalkenzeile

Um einen benutzerdefinierten Fortschrittsbalken für das Video anzuzeigen, erstellen Sie zunächst eine neue einspaltige Zeile unter der Zeile mit dem Video.

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie die Auffüllung wie folgt:

• Polsterung: 10px oben, 0px unten

Hinzufügen des Fortschrittsbalken-HTML

Um unser benutzerdefiniertes HTML-Snippet hinzuzufügen, um den Fortschrittsbalken anzuzeigen, müssen wir der Zeile ein neues Codemodul hinzufügen.

Fügen Sie in das Codefeld den folgenden HTML-Code ein:

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

Wir werden die benötigte Funktionalität später mit unserem benutzerdefinierten Javascript zum Fortschrittsbalken hinzufügen.

Teil 3: Erstellen der Videosteuerungsschaltflächen in Divi

Jetzt können wir mit dem Hinzufügen einiger benutzerdefinierter Videosteuerschaltflächen mit einer Reihe von Divi-Schaltflächenmodulen beginnen.

Erstellen der Zeile und Spalte

Zuerst müssen wir unsere Zeile und Spalte einrichten, die als Schaltflächenleiste/Container dienen.

Die Reihe

Fügen Sie unter der Zeile mit dem Fortschrittsbarcode eine neue einspaltige Zeile hinzu.

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Dachrinnenbreite: 1
• Polsterung: 10px oben, 20px unten

Flex zur Spalte hinzufügen

Eine einfache Möglichkeit, die horizontale Ausrichtung unserer Schaltflächen zu erhalten, besteht darin, display:flex in der Spalte mit unseren Schaltflächen zu verwenden. Öffnen Sie dazu die Einstellungen für die Spalte und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

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

Jetzt, da unsere Spalte fertig ist, können wir unsere Schaltflächen hinzufügen.

Die Play/Pause-Taste

Wir machen diese erste Schaltfläche zur "Play/Pause"-Schaltfläche, die die Wiedergabe- und Pausenfunktion für unser Video umschaltet. Um die Schaltfläche zu erstellen, fügen Sie der Spalte ein Schaltflächenmodul hinzu.

Öffnen Sie die Schaltflächeneinstellungen und aktualisieren Sie den Schaltflächentext:

• Tastentext: Play / Pause

Gestalten Sie die Schaltfläche auf der Registerkarte Design wie folgt:

• Benutzerdefinierte Stile für Schaltfläche verwenden: JA
• Schaltflächentextgröße: 18px (Desktop), 14px (Tablet und Telefon)
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: rgba(255,255,255,0.15)
• Breite des Tastenrahmens: 0px
• Schaltflächensymbol anzeigen: NEIN

Aktualisieren Sie den Rand für die Schaltfläche wie folgt:

• Rand: 10 Pixel oben, 10 Pixel links, 10 Pixel rechts

Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-ID hinzu:

• CSS-ID: divi-play-pause

Der Stopp-Knopf

Als nächstes kommt die Stopp-Taste. Diese Schaltfläche stoppt das Video und bringt es zum Ausgangspunkt zurück.

Um die Schaltfläche zu erstellen, duplizieren Sie das Schaltflächenmodul „Play/Pause“.

Aktualisieren Sie dann den Schaltflächentext:

• Schaltflächentext: Stopp

Und geben Sie der Schaltfläche eine benutzerdefinierte CSS-ID:

• CSS-ID: divi-stop

Die Stummschalttaste

Um die Stummschalttaste zu erstellen, die die Lautstärke des Videos stummschaltet, duplizieren Sie die soeben erstellte Schaltfläche „Stopp“.

Aktualisieren Sie den Schaltflächentext:

• Tastentext: Stumm

Geben Sie ihm dann eine benutzerdefinierte CSS-ID:

• CSS-ID: divi-mute

Die Lauter-Taste

Unsere Schaltfläche Weiter erhöht die Lautstärke des Videos bei jedem Klick schrittweise. Wir nennen es die Lauter-Taste.

Um die Schaltfläche zu erstellen, duplizieren Sie das Schaltflächenmodul „Stumm“.

Aktualisieren Sie dann den Schaltflächentext:

• Schaltflächentext: Vol

Fügen Sie auf der Registerkarte "Design" einen Aufwärtspfeil neben dem Schaltflächentext hinzu, indem Sie Folgendes aktualisieren:

• Schaltflächensymbol anzeigen: JA
• Schaltflächensymbol: Pfeil nach oben (siehe Screenshot)
• Farbe des Schaltflächensymbols: #00a9d8
• Nur Symbol beim Hover für Schaltfläche anzeigen: NEIN

Aktualisieren Sie dann die Polsterung der Schaltfläche wie folgt:

• Polsterung: 0,5em links, 1,5em rechts

Aktualisieren Sie dann die CSS-ID:

• CSS-ID: divi-volinc

Die Leiser-Taste

Wir können keine „Lautstärke erhöhen“-Schaltfläche haben, aber auch eine „Lautstärke verringern“-Schaltfläche, um die Lautstärke des Videos mit jedem Klick schrittweise zu verringern.

Um die Schaltfläche „Lautstärke verringern“ zu erstellen, duplizieren Sie die Schaltfläche „Lautstärke erhöhen“, die wir gerade erstellt haben.

Aktualisieren Sie dann das Schaltflächensymbol zu einem „Pfeil nach unten“-Symbol.

Aktualisieren Sie dann die CSS-ID:

• CSS-ID: divi-voldec

Die Schaltfläche für die große Ansicht

Für unsere letzte Schaltfläche erstellen wir eine Schaltfläche "Large View", die die Breite des Videocontainers beim Klicken erhöht.

Um die Schaltfläche zu erstellen, duplizieren Sie die Schaltfläche „Stumm“. Ziehen Sie dann die duplizierte Schaltfläche unter die Schaltfläche "Lautstärke verringern", sodass sie ganz rechts in der Schaltflächenleiste sitzt.

Öffnen Sie die Einstellungen für die duplizierte Schaltfläche und aktualisieren Sie den Schaltflächentext:

• Schaltflächentext: Große Ansicht

Geben Sie dann der Schaltfläche eine benutzerdefinierte CSS-ID:

• CSS-ID: divi-large-view

Teil 4: Hinzufügen des benutzerdefinierten CSS- und JS-Codes

Nachdem alle unsere Divi-Elemente erstellt wurden, können wir den benutzerdefinierten Code einfügen, der erforderlich ist, damit alles funktioniert.

Fahren Sie fort und fügen Sie ein weiteres Codemodul unter dem Codemodul hinzu, das den Fortschrittsbalken-HTML in der zweiten Zeile unseres Abschnitts enthält.

Das CSS

Fügen Sie im Codefeld das folgende CSS ein und stellen Sie sicher, dass das CSS in die erforderlichen Style- Tags eingeschlossen ist.

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

Die JavaScript/JQuery

Fügen Sie unter dem CSS (dem endenden Style-Tag) den folgenden JS-Code ein und achten Sie darauf, den Code in die erforderlichen Skript- Tags einzuschließen.

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

Den Code aufschlüsseln

Variablen, die auf HTML-Elemente und Divi-Schaltflächen zeigen

Um zu beginnen, müssen wir Variablen deklarieren, die auf jedes der Divi-Elemente zeigen, die unsere angegebene CSS-ID haben. Außerdem benötigen wir zwei wichtige Variablen, die auf tatsächliche HTML-Elemente (keine jQuery-Objekte) verweisen. Dazu gehören videoElement (das auf das HTML-Videoelement zeigt) und progressElement (das auf das HTML-Fortschrittselement zeigt).

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

Sobald die Variablen vorhanden sind, blenden wir die standardmäßigen HTML-Videosteuerelemente aus.

videoElement.controls = false;

Als nächstes müssen wir unseren Fortschrittsbalken relativ zur aktuellen Zeit und Dauer des Videos vergrößern.

Sobald das Video die Metadaten lädt (mithilfe des Loadedmetadata- Ereignisses), setzen wir im progress-Element ein max- Attribut mit einem Wert gleich der Dauer des Videos .

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

Dann verwenden wir das Ereignis timeupdate , um den Wert und die Breite des Fortschrittsbalkens zu aktualisieren, um die aktuelle Wiedergabeposition anzuzeigen.

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

Wir fügen auch einen Fallback für mobile Browser hinzu, falls das max- Attribut des progress-Elements zu diesem Zeitpunkt nicht richtig eingestellt ist.

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

Als Nächstes beginnen wir mit der Erstellung von Funktionen, die Dinge tun, wenn Sie auf unsere Schaltflächen klicken.

Für die Play/Pause-Schaltfläche schalten wir die Methoden play() und pause() um , indem wir die pausierten und beendeten Attribute der Medien-API mit einer if- Anweisung verwenden.

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

Für die Stopp-Schaltfläche pausieren wir das Video und bringen den Fortschrittswert und die aktuelle Uhrzeit auf 0 zurück .

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

Für die Stummschaltfläche schalten wir das stummgeschaltete Attribut um und schalten auch eine Klasse um, die die Schaltfläche mit einem helleren Hintergrund gestaltet, wenn sie stummgeschaltet ist.

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

Für die Lautstärke-Tasten ist eine so definiert, dass sie die Lautstärke beim Klicken erhöht ( $volinc ) und die andere so definiert ist, dass sie die Lautstärke beim Klicken verringert ( $voldec ). Dies wird mit der Funktion alterVolume() erreicht , die den Parameter dir auf ein „+“ oder „-“ überprüft und die Lautstärke bei jedem Klick schrittweise erhöht oder verringert.

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

Die Schaltfläche "Großansicht" schaltet eine CSS-Klasse um, die die maximale Breite des Videocontainers beim Klicken anpasst.

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

Und da dieses Beispiel nicht alle Steuerelemente und Funktionen enthält, die in den Standard-Videosteuerelementen verfügbar sind, finden Sie hier eine Funktion, die diese Steuerelemente anzeigt, wenn Sie mit der Maus über das Video fahren.

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

Endergebnis

Hier ist das Endergebnis.

Und so stapeln sich die Steuerelemente auf Mobilgeräten.

Sie können auch diesen Codepen ausprobieren, der die gleiche Funktionalität demonstriert.

Erkunde mehr

Wenn Sie mit HTML und Javascript vertraut sind und daran interessiert sind, Ihren HTML5-Videos weitere benutzerdefinierte Steuerelemente und Funktionen hinzuzufügen, können Sie in dieser Anleitung lesen, wie Sie einen Videoplayer von Grund auf neu erstellen. Sie können auch die HTMLMediaElement-API ausprobieren, um die Möglichkeiten dort zu sehen.

Ich freue mich, Ihnen in naher Zukunft weitere hilfreiche Möglichkeiten zur Bearbeitung von HTML5-Videos und Divi vorstellen zu können.

Abschließende Gedanken

Das Erstellen einiger externer benutzerdefinierter Steuerelemente für Ihre Videos in Divi kann die Türen für ein einzigartiges Design und eine einzigartige Funktionalität öffnen. Zugegeben, das Beispiel aus diesem Tutorial untersucht nicht alle verfügbaren Optionen (oder Steuerelemente). Und die Funktionalität ist auf ein Video auf einer Seite beschränkt, nicht auf mehrere. Es ist also ideal für die Anpassung eines der wichtigsten Videos, die Sie präsentieren möchten. Aber hoffentlich dient es als solide Einführung in die Dinge, die Sie benötigen, um eigene benutzerdefinierte HTML5-Videosteuerelemente für Ihr nächstes Projekt zu erstellen.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!