如何為 Divi 中的視頻創建自定義 HTML5 視頻控件

已發表: 2021-03-10

HTML5 視頻是在任何網站上顯示視頻的一種方便有效的方式。實際上，Divi 使用 HTML5 視頻格式在 Divi 中使用 Video Module 顯示視頻。但是，默認情況下，這些視頻包含內置控件（如播放、靜音、音量等），這些控件具有取決於您的瀏覽器的標准設計。但是，如果您想增強這些控件的設計，您實際上可以為您的 HTLM5 視頻構建和設計您自己的外部控件。

在本教程中，我們將向您展示如何為 Divi 中的視頻創建自定義 HTML5 視頻控件。為此，我們將使用 Divi Builder 創建視頻和自定義控制按鈕並為其設置樣式。然後我們將添加一些自定義 Javascript 以使其全部工作。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

您還可以查看這個代碼筆，它演示了本教程中的一些相同功能。

免費下載佈局

要了解本教程中的設計，您首先需要使用下面的按鈕下載它。要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

您已成功訂閱。請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

分區通知框

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

擴展角標籤

首先，您需要執行以下操作：

如果您還沒有安裝並激活 Divi 主題。
在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

本教程目標的簡要概述

HTML5 視頻的基本語法如下所示……

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

注意video元素中的controls屬性。這就是用於顯示我們通常在 HTML5 視頻中看到的標準控件的內容。

Divi 的視頻模塊使用相同的 HTML5 視頻元素結構來顯示您在模塊內上傳的自託管視頻。因此，當我們使用視頻模塊時，我們使用的是 HTML5 視頻。

我們本教程的目標是最初隱藏 Divi 視頻的那些默認控件，並使用 Divi Builder 和一些自定義代碼構建一些我們自己的外部自定義控件。

第 1 部分：在 Divi 中創建 HTML5 視頻

在本教程的第一部分中，我們將使用 Divi 視頻模塊創建一個 HTML5 視頻。但首先，我們需要更新我們的部分背景。

部分背景

首先更新默認可用的默認部分的部分設置，如下所示：

背景漸變左顏色：rgba(0,0,0,0.8)
背景漸變右顏色：#000000
將漸變放在背景圖像上方：是
背景圖片：【上傳選擇的圖片】

divi 自定義 html5 視頻控件

視頻行

接下來，我們需要添加將包含我們的視頻的行。向該部分添加一個新的單列行。

divi 自定義 html5 視頻控件

然後按如下方式更新行設置：

寬度：100%
最大寬度：無
填充：底部 0px

divi 自定義 html5 視頻控件

創建視頻

如前所述，Divi 已經在 Divi Video Module 中使用了 HTML5 視頻元素。因此，要創建視頻，只需向行/列添加一個新的視頻模塊。

divi 自定義 html5 視頻控件

上傳視頻文件到視頻模塊

為獲得最佳性能，請將視頻的 MP4 和 WEBM 視頻文件上傳到媒體庫。

divi 自定義 html5 視頻控件

接下來，將 MP4 和 WEBM 視頻文件添加到內容選項卡下的視頻模塊：

divi 自定義 html5 視頻控件

更新視頻設置

在設計選項卡下，更新以下內容：

最大寬度：1080px
模塊對齊：居中

divi 自定義 html5 視頻控件

在高級選項卡下，添加以下 CSS ID：

CSS ID：divi-video-container

divi 自定義 html5 視頻控件

第 2 部分：創建進度條

HTML 視頻包括顯示進度條的內置功能。我們可以使用一些自定義代碼為我們的視頻添加我們自己的進度條。

進度條行

要顯示視頻的自定義進度條，首先，在包含視頻的行下創建一個新的單列行。

divi 自定義 html5 視頻控件

打開行設置並更新填充如下：

填充：頂部 10px，底部 0px

divi 自定義 html5 視頻控件

添加進度條 HTML

要添加我們自定義的 HTML 片段以顯示進度條，我們需要向該行添加一個新的代碼模塊。

divi 自定義 html5 視頻控件

在代碼框中，粘貼以下 HTML：

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

divi 自定義 html5 視頻控件

稍後我們將使用我們的自定義 Javascript 將我們需要的功能添加到進度條中。

第 3 部分：在 Divi 中創建視頻控制按鈕

現在我們準備開始使用一系列 Divi 按鈕模塊添加一些自定義視頻控制按鈕。

創建行和列

首先，我們需要設置作為按鈕欄/容器的行和列。

行

在包含進度條代碼的行下添加一個新的單列行。

divi 自定義 html5 視頻控件

打開行設置，並更新以下內容：

天溝寬度：1
填充：頂部 10 像素，底部 20 像素

divi 自定義 html5 視頻控件

將 Flex 添加到列

獲得按鈕水平對齊的一種簡單方法是在包含按鈕的列上使用 display:flex 。為此，請打開列的設置並將以下自定義 CSS 添加到主元素：

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

divi 自定義 html5 視頻控件

現在我們的列已經準備好了，我們準備添加我們的按鈕。

播放/暫停按鈕

我們將第一個按鈕設為“播放/暫停”按鈕，用於切換視頻的播放和暫停功能。要創建按鈕，請向列中添加按鈕模塊。

divi 自定義 html5 視頻控件

打開按鈕設置並更新按鈕文本：

按鈕文本：播放/暫停

divi 自定義 html5 視頻控件

在設計選項卡下，按如下所示設置按鈕樣式：

為按鈕使用自定義樣式：是
按鈕文字大小：18px（桌面），14px（平板電腦和手機）
按鈕文字顏色：#ffffff
按鈕背景顏色：rgba(255,255,255,0.15)
按鈕邊框寬度：0px
顯示按鈕圖標：否

divi 自定義 html5 視頻控件

更新按鈕的邊距如下：

邊距：頂部 10 像素，左側 10 像素，右側 10 像素

divi 自定義 html5 視頻控件

在高級選項卡下，添加以下 CSS ID：

CSS ID：divi-play-pause

divi 自定義 html5 視頻控件

停止按鈕

接下來是停止按鈕。此按鈕將停止視頻並將其帶回起點。

要創建按鈕，複製“播放/暫停”按鈕模塊。

divi 自定義 html5 視頻控件

然後更新按鈕文本：

按鈕文字：停止

divi 自定義 html5 視頻控件

並給按鈕一個自定義的 CSS ID：

CSS ID：divi-stop

divi 自定義 html5 視頻控件

靜音按鈕

要創建將視頻音量靜音的靜音按鈕，請複制我們剛剛創建的“停止”按鈕。

divi 自定義 html5 視頻控件

更新按鈕文本：

按鈕文字：靜音

divi 自定義 html5 視頻控件

然後給它一個自定義的 CSS ID：

CSS ID：divi-mute

divi 自定義 html5 視頻控件

音量調高按鈕

每次單擊時，我們的下一個按鈕都會逐漸增加視頻的音量。我們將其稱為音量調高按鈕。

要創建按鈕，請複制“靜音”按鈕模塊。

divi 自定義 html5 視頻控件

然後更新按鈕文本：

按鈕文字：Vol

divi 自定義 html5 視頻控件

在設計選項卡下，通過更新以下內容在按鈕文本旁邊添加一個向上箭頭：

顯示按鈕圖標：是
按鈕圖標：向上箭頭（見截圖）
按鈕圖標顏色：#00a9d8
僅在懸停按鈕時顯示圖標：否

divi 自定義 html5 視頻控件

然後按如下方式更新按鈕的內邊距：

填充：左 0.5em，右 1.5em

divi 自定義 html5 視頻控件

然後更新 CSS ID：

CSS ID：divi-volinc

divi 自定義 html5 視頻控件

降低音量按鈕

我們不能有一個“音量調高”按鈕也有一個“音量調低”按鈕來隨著每次點擊逐漸降低視頻的音量。

要創建“降低音量”按鈕，請複制我們剛剛創建的“提高音量”按鈕。

divi 自定義 html5 視頻控件

然後將按鈕圖標更新為“向下箭頭”圖標。

divi 自定義 html5 視頻控件

然後更新 CSS ID：

CSS ID：divi-voldec

divi 自定義 html5 視頻控件

大視圖按鈕

對於我們的最後一個按鈕，我們將創建一個“大視圖”按鈕，該按鈕將在單擊時增加視頻容器的寬度。

要創建按鈕，請複制“靜音”按鈕。然後拖動“降低音量”按鈕下的複制按鈕，使其位於按鈕欄的最右側。

divi 自定義 html5 視頻控件

打開復制按鈕的設置並更新按鈕文本：

按鈕文本：大視圖

divi 自定義 html5 視頻控件

然後給按鈕一個自定義的 CSS ID：

CSS ID：divi-large-view

divi 自定義 html5 視頻控件

第 4 部分：添加自定義 CSS 和 JS 代碼

現在我們所有的 Divi 元素都已創建，我們準備引入使一切正常工作所需的自定義代碼。

繼續並在包含我們部分第二行中的進度條 HTML 的代碼模塊下添加另一個代碼模塊。

divi 自定義 html5 視頻控件

CSS

在代碼框中，粘貼以下 CSS，確保將 CSS 包裹在必要的樣式標籤中。

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

divi 自定義 html5 視頻控件

JavaScript/JQuery

在 CSS（結束樣式標籤）下，粘貼以下 JS 代碼，確保將代碼包裝在必要的腳本標籤中。

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

divi 自定義 html5 視頻控件

分解代碼

指向 HTML 元素和 Divi 按鈕的變量

首先，我們需要聲明指向每個具有我們指定 CSS ID 的 Divi 元素的變量。我們還需要兩個指向實際 HTML 元素（不是 jQuery 對象）的重要變量。其中包括videoElement （指向 HTML 視頻元素）和progressElement （指向 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");

一旦變量就位，我們隱藏默認的 HTML 視頻控件。

videoElement.controls = false;

接下來，我們需要使進度條的寬度相對於視頻的當前時間和持續時間增長。

一旦視頻加載了元數據（使用loadedmetadata事件），在progress 元素上，我們設置一個max屬性，其值等於視頻的持續時間。

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

然後我們使用timeupdate事件更新進度條的值和寬度以指示當前播放位置。

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

我們還為移動瀏覽器添加了一個回退，以防此時進度元素的max屬性設置不正確。

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

接下來，我們開始創建在單擊按鈕時執行操作的函數。

對於播放/暫停按鈕，我們使用帶有if語句的 Media API 的暫停和結束屬性來切換play()和pause()方法。

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

對於停止按鈕，我們暫停視頻並將進度值和當前時間恢復為0 。

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

對於靜音按鈕，我們切換muted屬性並切換一個類，該類在靜音時將按鈕設置為較淺的背景。

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

對於音量按鈕，一個定義為增加點擊音量 ( $volinc )，另一個定義為減少點擊音量 ( $voldec )。這是使用alterVolume()函數完成的，該函數檢查dir參數是否為“+”或“-”，並在每次單擊時遞增或減小音量。

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

大視圖按鈕切換 CSS 類，該類可在單擊時調整視頻容器的最大寬度。

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

並且由於此示例不包含默認視頻控件中可用的所有控件和功能，因此這裡有一個函數，可在懸停在視頻上時顯示這些控件屬性。

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

最後結果

這是最終結果。

divi 自定義 html5 視頻控件

這是控件在移動設備上的堆疊方式。

divi 自定義 html5 視頻控件

您還可以查看演示相同功能的代碼筆。

探索更多

如果您熟悉 HTML 和 Javascript 並且有興趣為您的 HTML5 視頻添加更多自定義控件和功能，您可以查看本指南，了解如何從頭開始創建視頻播放器。您可能還想查看 HTMLMediaElement API 以了解那裡的可能性。

我期待在不久的將來分享更多有用的方法來操作 HTML5 視頻和 Divi。

最後的想法

在 Divi 中為您的視頻創建一些外部自定義控件可以為獨特的設計和功能打開大門。當然，本教程中的示例並未探索所有可用的選項（或控件）。而且，該功能僅限於一個頁面上的一個視頻，而不是多個。因此，它非常適合自定義您想要展示的主要視頻之一。但希望它能夠很好地介紹為您的下一個項目創建一些您自己的自定義 HTML5 視頻控件所需的內容。

我期待在評論中收到您的來信。

乾杯!

如何為 Divi 中的視頻創建自定義 HTML5 視頻控件

搶先看

免費下載佈局

免費下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

你需要什麼開始

本教程目標的簡要概述

第 1 部分：在 Divi 中創建 HTML5 視頻

部分背景

視頻行

創建視頻

上傳視頻文件到視頻模塊

更新視頻設置

第 2 部分：創建進度條

進度條行

添加進度條 HTML

第 3 部分：在 Divi 中創建視頻控制按鈕

創建行和列

行

將 Flex 添加到列

播放/暫停按鈕

停止按鈕

靜音按鈕

音量調高按鈕

降低音量按鈕

大視圖按鈕

第 4 部分：添加自定義 CSS 和 JS 代碼

CSS

JavaScript/JQuery

分解代碼

指向 HTML 元素和 Divi 按鈕的變量

最後結果

探索更多

最後的想法

您已成功訂閱。請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！