在 Divi 中使用視頻的終極指南

已發表: 2017-08-09

視頻是一個強大的工具。 如果一張圖片價值一千字，那麼一分鐘的視頻價值 180 萬字（至少研究人員 James McQuivey 博士是這麼建議的）。 視頻是一種有效的營銷工具，如果處理得當，它是實現精美設計的工具。

使用 Divi 可以輕鬆地將視頻添加到您的網站。 視頻和視頻滑塊模塊允許您通過簡單地輸入視頻網址來添加第三方託管的視頻，如 youtube 和 vimeo。 您甚至可以添加自己的 mp4 和 webm 格式的自定義視頻，以獲得最大的瀏覽器兼容性。 最重要的是，Divi 為您提供了使用圖像疊加和播放按鈕來設置視頻樣式的選項，以幫助匹配您網站的設計。

除了在您的頁面上嵌入視頻外，Divi 還提供了添加背景視頻的簡單解決方案。 目前，當您使用 Divi 構建器構建站點時，每個部分、行、列和 37 個模塊中的 20 個都具有背景視頻功能。

對於大多數人來說，在 Divi 中使用視頻就像插入指向您想要的 YouTube 或 Vimeo 視頻的鏈接並看到它出現在您的帖子或頁面上一樣簡單。 但在這篇文章中，我們將討論 Divi 如何以及為何對視頻進行處理，以便您為可能想要運行的任何特殊用例、獨特風格或創意實驗做好充分準備。

在本指南中，我們將討論……

  • 視頻模塊和視頻滑塊模塊的幕後工作，因此您可以更有效地使用它。
  • 自託管視頻與使用第三方託管服務之間的區別。
  • 關於優化網絡視頻的一些技巧。
  • 視頻背景的最佳實踐。
  • 選擇視頻尺寸的一般指南。
  • 以及一些有用的背景視頻技巧。

讓我們開始吧。

探索視頻模塊

視頻模塊允許您將幾乎任何來源的視頻嵌入到您的頁面中。 Divi 關於視頻模塊的文檔解釋了所有功能以及如何將視頻添加到您的頁面。 但是對於這篇文章，我將深入挖掘。

將自託管視頻添加到視頻模塊

要使用視頻模塊添加自託管視頻，您必須上傳視頻或在視頻設置中向視頻文件添加 url。 而且，您必須以兩種文件格式添加視頻。

視頻與 Divi

這就是你真正需要做的。 足夠簡單。

然而，在幕後，Divi 正在使用 HTML5 視頻元素來顯示視頻。 當您選擇添加自託管視頻或使用 mp4 和 webm 格式上傳您自己的視頻時，Divi 部署的代碼結構如下所示： 

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
Error loading this resource
</video>

關於這段代碼的作用，我想指出以下幾點：

  1. 注意 <video> 標籤中的控件屬性。 這告訴視頻顯示控件。 足夠簡單。
  2. 注意開始和結束 <video> 標籤中的兩個 <source> 標籤。 源由視頻文件組成。 第一個是 mp4，第二個是 webm 文件格式。 兩者都是最大程度的瀏覽器支持所必需的。 順序也很重要。 您希望瀏覽器首先看到 mp4，因為它是最普遍支持的。 稍後我將詳細討論這些格式。
  3. 如果前兩種格式無法識別，則會顯示“加載此資源時出錯”這一行。
  4. 您看不到的是，Divi 為這個 <video> 標籤設置了樣式，並為其設置了 100% 的寬度以使其具有響應性，因此您的視頻將根據其所在列的寬度進行調整。

這個 HTML5 視頻元素正在成長為在網絡上顯示視頻的新標準方式。 值得慶幸的是，Divi 為我們解決了這個問題。

自託管視頻圖像疊加

除了將視頻添加到視頻模塊的選項外，Divi 還允許您為視頻添加自定義疊加圖像。

視頻與 Divi

如果您選擇向自託管視頻添加疊加圖像，則必須上傳您自己的視頻。 從視頻生成圖像的選項僅適用於第三方託管的視頻 URL，如 Youtube 和 Vimeo。

因為圖像會變成視頻的大小，並且因為視頻會調整到它所在的列的大小，所以選擇合適大小的圖像很重要。 Youtube、Vimeo 和大多數其他格式的視頻通常具有 16:9 的縱橫比。 因此，如果您將最大內容寬度設置為 Divi 的默認值 1080 像素，那麼按照 16:9 的縱橫比，您的視頻將具有 1080×608 的尺寸。 因此，您的疊加圖像應為 1080×608 像素。

播放按鈕

設置好圖像後，Divi 將自動應用自定義播放按鈕。 如果需要，您甚至可以在“設計”選項卡下的“視頻設置”中更改按鈕的顏色。

視頻與 Divi

一旦用戶使用自定義播放按鈕點擊疊加層，疊加層和按鈕將消失，疊加層下方的視頻將開始自動播放。

添加第三方託管視頻 URL

將視頻添加到視頻模塊的最常見方法是簡單地添加由第三方（如 Youtube 或 Vimeo）託管的視頻的 URL。 因此，您無需像為自託管視頻那樣添加兩種視頻格式，只需在頂部背景輸入欄中添加一個 URL。

視頻與 Divi

在幕後，Divi 添加了一個流體寬度包裝器 div 並嵌入了一個顯示視頻的 iframe。 此 iframe 與您直接從 youtube 獲得的相同。 以下是使用視頻模塊添加 youtube 視頻時代碼的示例： 

<div class="fluid-width-video-wrapper" style="padding-top: 56.2963%;">
<iframe src="https://www.youtube.com/embed/Nimdf3Zeayk?autoplay=1&amp;amp;feature=oembed&amp;amp;wmode=opaque" frameborder="0" allowfullscreen="" id="fitvid0">
</iframe>
</div>

具有“fluid-width-video-wrapper”類的 div 環繞 iframe 並為其提供 100% 的寬度，以便它會根據其容器的寬度進行調整，使其具有響應性。

如果您選擇添加疊加圖像，您可以選擇上傳自己的圖像，或者為了省去一點麻煩，您只需單擊“從視頻生成”，Divi 將自動應用從視頻中獲取的疊加圖像。 您還可以選擇自定義播放按鈕。

探索視頻滑塊模塊

視頻滑塊的工作方式與視頻模塊在視頻部署在網頁上的方式非常相似，但現在視頻位於滑塊中。 這是一種在一個地方顯示視頻的便捷方式，因此您的用戶可以一次一個滾動瀏覽一組視頻。 有關視頻滑塊模塊選項的更多詳細信息，您可以訪問文檔頁面。

我最喜歡的視頻滑塊元素之一是可用於控制幻燈片的縮略圖軌道。 它既方便又引人入勝。

視頻與 Divi

您甚至可以從模塊設置（包括縮略圖疊加顏色）中自定義滑塊控件的顏色。

視頻與 Divi

縮略圖將保持您上傳的原始圖像的大小，因此請注意不要在滑塊中上傳一堆大圖像，因為這可能會降低您的網站速度。 此外，無法從視頻自動生成縮略圖。 你必須自己上傳那些。

縮略圖遵循 4:3 的縱橫比，因此為了調整 16:9 滑塊圖像，它會炸開並切斷圖像的左右兩側以覆蓋整個空間。

設計提示：您可以採取的一種方法來減少文件大小並防止縮略圖切掉圖像的一部分，將縮略圖自定義為 253×190 像素（4:3 縱橫比）並選擇隱藏選項在主視頻上顯示圖像疊加。 這樣您的疊加圖像將僅用於縮略圖，因此不需要更大以適應主視頻大小。

自託管視頻的 4 個重要提示

  1. 使用 CDN。 如果您正在考慮通過 WordPress 媒體庫添加視頻，請再想一想。 儘管可以在自己的服務器上安裝自己的 WordPress 上託管視頻，但您可能會遇到帶寬、文件大小、存儲空間等方面的一些限制……這可能會導致您網站的加載時間受到影響並導致視頻流延遲. 我會考慮在 Amazons3 等外部服務上託管您的視頻。 這將有助於頁面加載時間。 此外，其中一些提供商提供了一定程度的安全性，以防止人們下載您的視頻（或至少使下載變得更加困難）。
  2. 為網絡優化文件。 視頻佔用大量帶寬，尤其是當您使用大型視頻背景時。 您需要注意不要讓頁面過載。 如果您想為網絡正確優化視頻，有許多因素需要考慮。 這裡有一個有用的等式可供考慮：
    文件大小 = 比特率（每秒千位）x 持續時間（以秒為單位的視頻長度）

    因此，如果想要獲得更小的文件大小，您需要減少持續時間（視頻長度）和/或比特率（每秒傳輸的千比特數）。 比特率應始終低於用戶的連接速度。 考慮到全球互聯網速度約為 7 Mbps（美國約為 18 Mbps），您需要將比特率保持在遠低於該速度的水平，以避免流媒體中斷。

    您不必自己完成這一切。 有一些很棒的免費工具可以幫助您進行視頻壓縮，例如 Handbrake。

    如果您想了解有關優化網絡視頻的更多信息，我建議您閱讀“減少視頻大小以加快加載速度的 5 種最佳方法”。 列出了一些很棒的資源，並對如何使用 Handbrake 進行了很好的解釋。

  3. 添加正確的文件格式。
    正如我之前提到的，如果您是自託管視頻（而不是像 Youtube 那樣依賴第三方為您託管），則需要添加 mp4 和 webm 格式的視頻。

    Mp4 是目前支持最廣泛的格式，因為它仍然使用 flash 播放一些舊瀏覽器，並且它是移動瀏覽器支持的標準。 Divi 在代碼中首先列出 mp4，以便 iOS 設備可以立即識別該文件。

    Webm 是第二個最受支持的格式。 它是為網絡而構建的，它似乎將繼續存在。 它以出色的壓縮產生高質量的流媒體。 它是開源的。

    結合起來，這兩個提供對包括移動設備在內的大多數網絡瀏覽器的支持。

    VLC 媒體播放器是一個很棒的免費轉換工具。

  4. 定義 MIME 類型：為了使 WEBM 視頻格式能夠在所有瀏覽器中使用，您的服務器必須指定正確的 MIME 類型。 您可以在此處了解有關使用 .htaccess 定義 MIME 類型的更多信息。 如果您發現您的視頻沒有在某些瀏覽器中播放，那麼這可能是原因。要將 MIME 類型添加到您的 .htaccess 文件，請使用 FTP 客戶端（如 FileZilla）訪問您的 WordPress 根文件。 在那裡你應該找到你的 .htaccess 文件。 在文本編輯器中打開文件。 在“#END WordPress”行下方添加以下內容：

    AddType 視頻/mp4 .mp4 .m4v
    添加類型視頻/ogg .ogv
    添加類型視頻/webm .webm

    視頻與 Divi

    然後保存文件。 現在您的視頻格式將被所有瀏覽器識別。

使用第三方平台（Youtube 和 Vimeo）託管

如果您發現轉換和壓縮自己的視頻工作量太大，您可以隨時讓第三方為您完成這項工作。

如果您對視頻一無所知，我建議您走這條路。 如果您對 youtube 或 vimeo free 的限制不感冒，您可以為 Vimeo Pro 咬緊牙關。 從長遠來看，這可能值得頭疼。 您不希望在您的網站上放一個視頻，這會減慢速度或看起來很糟糕。 這根本不值得。

視頻和視頻滑塊模塊支持的第三方視頻平台

如果您想使用視頻和視頻滑塊模塊添加第三方視頻，您可以使用以下流行平台：

  • YouTube
  • 維密歐
  • Dailymotion

如何使用 Divi 添加第三方視頻

要從這些平台中的任何一個添加視頻，您需要訪問他們的網站以獲取共享鏈接。

視頻與 Divi

然後您可以將其粘貼到視頻或視頻滑塊模塊中。

視頻與 Divi

單擊“從視頻生成”按鈕以添加圖像疊加。 或者上傳你自己的。

視頻與 Divi

保存設置。 就是這樣。

請記住，Divi 是基於 WordPress 構建的，因此您始終可以使用第三方平台建議的嵌入代碼嵌入來自第三方平台的視頻，而無需使用視頻模塊。 只需添加一個文本模塊並在內容框中輸入嵌入代碼即可。

視頻與 Divi

您可能需要自定義嵌入的寬度和高度以適應響應式佈局。

維斯塔呢？

Wistia 是一個功能強大的平台，很多人都在使用，但不幸的是，它目前不能很好地與 Divi 模塊配合使用。 但是，您可以使用他們提供的嵌入代碼嵌入 Wistia。

視頻與 Divi

將該代碼粘貼到您的 Divi 網站的內容部分將顯示視頻。

您甚至可以將代碼粘貼到滑塊模塊的內容部分，將 wistia 視頻添加為您的幻燈片之一。 但是，您需要調整一些 CSS 以使其看起來像您想要的那樣。

在 Divi 中使用視頻背景

你甚至應該使用視頻背景嗎？

在我們進入視頻背景的細節之前，重要的是你誠實地問自己是否應該使用一個。 不要誤會我的意思，我喜歡好的視頻背景。 但有時它只是沒有意義。 毫無疑問，視頻會減慢您的網站速度，並可能分散您對內容的注意力。 所以永遠不要在更有效的圖像上選擇視頻背景。 你的網站沒有一個可能會更好。

但是，有時視頻是比圖像更好的解決方案。 如果做得好，視頻背景可以使您的內容栩栩如生。 所以，讓你的視頻有目的性並讓它發揮作用。

Divi 中的視頻背景功能

使用 Divi Builder，您幾乎可以在任何地方添加視頻背景。 您可以為每個部分、行和列添加視頻背景。 您甚至可以為大多數模塊添加視頻背景。
以下是支持視頻背景的模塊。

  • 全角標題（也適用於全屏選項）
  • 全角菜單
  • 全寬投資組合
  • 全角帖子滑塊（不使用特色圖片時，您可以使用視頻背景作為所有幻燈片的背景）
  • 全角帖子標題
  • 全寬滑塊（適用於單個幻燈片）
  • 音頻模塊
  • 吧台
  • Blurb 模塊——確保給模塊一些填充。
  • 號召性用語模塊
  • 倒計時器
  • 電子郵件選擇
  • 可過濾的投資組合
  • 登錄模塊
  • 數字計數器模塊
  • 人物模塊
  • 投資組合設置
  • Post Slider（當不使用特色圖片時，您可以使用視頻背景作為所有幻燈片的背景）
  • 帖子標題
  • 定價表（您可以分別為模塊和不同的表設置視頻背景）
  • 滑塊（僅適用於單個幻燈片的背景）
  • 選項卡（用於模塊背景和單個選項卡）
  • 感言
  • 文本
  • 切換

股票視頻庫

將視頻背景添加到您的網站的難點在於找到正確的圖像並確保其大小合適。 值得慶幸的是，您不必創建自己的自定義視頻背景。 有可用的免版稅庫存視頻庫可能適合您的網站。 如果您正在尋找一些免費的視頻片段，一些不錯的起點是 videvo、coverr 或 videezy。 如果您正在尋找質量更好的付費版本，您可以查看 videohive、videoblocks 或 pool5。 如果您正在尋找一些靈感，其中一些網站會很好地使用視頻背景。

如何為您的頁面添加視頻背景

在您找到（或創建）正確的視頻後，事情變得非常簡單。 要將視頻背景添加到您的 Divi 網頁，只需部署可視化構建器並找到要添加視頻的部分，然後單擊“部分設置”圖標。

視頻與 Divi

在內容選項卡下，單擊背景選項下的背景圖像圖標/選項卡。 如果您有自託管視頻，請同時輸入 mp4 和 webm 格式。 然後輸入視頻的尺寸，以便 Divi 知道如何正確調整大小。

視頻與 Divi

現在轉到背景圖像選項卡並添加一個背景圖像，作為移動設備的一個很好的後備。

然後保存設置。 就這麼簡單。

如果您打算使用現在在 youtube（或 vimeo）上託管的視頻之一作為背景，則目前在 Divi 構建器中無法實現。 請記住，您需要這些視頻以正確的格式顯示在所有瀏覽器上。 但是，您可以下載該 Youtube 視頻（如果它屬於您）並將其轉換為 mp4 和 webm 格式以在您的背景中使用。

背景設計提示：為您的全角帖子滑塊使用視頻背景

如果您正在尋找一種創造性的方式來在您的博客頁面上展示您的精選帖子，您可以為您的帖子滑塊添加視頻背景。 讓我告訴你我的意思。

使用 Visual Builder 轉到您的頁面，並使用全角帖子滑塊模塊將全角部分添加到頁面頂部。

視頻與 Divi

在“內容”選項卡下的“顯示特色圖片”下，選擇“否”。

視頻與 Divi

然後在背景部分下，選擇視頻背景選項卡並添加視頻的兩種格式以及尺寸。

視頻與 Divi

對於無法顯示視頻背景的移動設備，添加背景圖像作為後備也是一個好主意。

就是這樣。

現在，用戶可以使用很酷的背景視頻滾動瀏覽您的精選帖子滑塊。 只要確保視頻背景足夠微妙，不會分散對內容的注意力。

視頻背景的最佳實踐

考慮到視頻背景提供的所有可能性，我認為最好包括一些通用的最佳實踐。

  1. 始終包含背景圖像作為移動設備的後備。 移動設備不會自動播放大視頻。 這就是 Divi 默認在移動設備上顯示後備圖像的原因。
  2. 使用小視頻。 對於背景視頻，您可以使用 720p 分辨率，因為背景是覆蓋視頻的內容/文本的第二個想法。 質量不會受到太大影響，您會注意到。
  3. 考慮疊加。 在視頻頂部添加半透明顏色疊加層將幫助您使用較小的文件大小，因為它會隱藏質量較低的視頻的雜亂細節。 此外，它會使您的文本更加突出。
  4. 不要使用音頻。 你不需要視頻背景的聲音，所以把它拿出來。 這將減少文件大小。
  5. 使用 mp4 和 webm 格式來支持跨瀏覽器。

暫停視頻？

您可能已經在背景選項下的設置中看到了此選項。

在某些情況下，視頻可能會與其他視頻背景播放聲音發生衝突。 此選項有助於一次只播放一個視頻聲音。

Divi 視頻黑客

還有一些更高級的視頻和視頻背景自定義，您可能會發現它們很有幫助。 這裡有一些。

調整播放按鈕的大小

如果您想更改播放按鈕的大小，請轉到高級選項卡下的視頻模塊設置，然後在標有“視頻圖標”的框中輸入以下自定義 CSS： 

Font-size: 10rem;
Line-height: 10rem;
Margin-top: -5rem;
Margin-left: -5rem;

您可以將值調整為所需的大小。 只需確保 font-size 和 line-height 始終保持不變，而 margin-top 和 margin-bottom 始終保持為字體大小一半的負值。 例如，如果您想讓它變小，則值為。 

Font-size: 4rem;
Line-height: 4rem;
Margin-top: -2rem;
Margin-left: -2rem;

如何阻止視頻背景在單擊時暫停

在某些情況下，您可能會發現單擊視頻背景會暫停視頻。 您可以通過將以下自定義 CSS 添加到子主題（或主題定制器 > 附加 CSS）中的 style.css 文件來禁用此功能：

.et_pb_section_video_bg video {
pointer-events: none;
}

如何停止循環播放視頻背景

您可能已經從我們的一篇較早的帖子中記住了這個提示。 默認情況下，視頻背景將繼續循環播放。 這是故意的，因為這通常是您希望視頻背景執行的操作。 但是，如果您只想顯示一次背景視頻然後退出，則可以通過轉到Divi > Theme Options > Integration並在以下內容中輸入以下內容來禁用循環操作： 

<script>
(function($) {
    $(document).ready(function() {
        $('.no-loop .et_pb_section_video_bg').each(function() {
            $(this).find('video').removeAttr('loop');
        });
    });
})(jQuery);
</script>

Divi 的視頻尺寸

我不想在沒有提到視頻尺寸的情況下結束帖子。 考慮到所有視頻和網站都不同，對於使用什麼尺寸沒有明確的規定。 720p (1280×720) 視頻在 1920×1080 屏幕上拉伸可能看起來很棒，而另一個則看起來很糟糕。 在為您的網站決定視頻的尺寸或分辨率時，您可以遵循 Divi 列佈局和模塊的圖像尺寸作為一般準則。 簡而言之，您的視頻應該最接近它所在列的寬度，而不會下沉。 因此，如果您有一個最大寬度為 1080 像素的全寬列，那麼您不需要分辨率大於 720p (1280×720) 的視頻。 但是，如果您使用的視頻背景跨越瀏覽器的整個寬度，則可能需要提高到 1080p (1920×1080)，以便在較大的顯示器上跨越瀏覽器的整個寬度時，它不會看起來有顆粒感。

如果您打算依靠第三方視頻專業人士為網絡準備視頻，這裡是 youtube 推薦的視頻分辨率列表。

2160p：3840×2160
1440p：2560×1440
1080p：1920×1080
720p：1280×720
480p：854×480
360p：640×360
240p：426×240

它們遵循 16:9 的縱橫比，因此您不會看到視頻兩側的黑條。

Vimeo 還提供視頻指南。 我特別喜歡 Vimeo 關於視頻壓縮基礎的帖子。

最後的想法

在很長一段時間內，視頻將繼續成為我們在線體驗不可或缺的一部分。 因此，在將視頻添加到網站時，了解自己在做什麼非常重要。 如果您決定在您的網站中使用視頻，Divi 會使該過程變得非常簡單，為自託管視頻提供跨瀏覽器解決方案，並為第三方嵌入提供方便的解決方案。 但 Divi 不能為你做所有的事情。 希望這篇文章能幫助您選擇正確的視頻並為網絡做好準備。

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