完整的 Beaver Builder + Swarmify 視頻託管指南

已發表: 2020-11-25

你使用 Beaver Builder 嗎? 如果是這樣,Swarmify 可以幫助您在您的網站上提供快速、無緩沖和專業的視頻體驗,而不會花很多錢。

Beaver Builder 為超過一百萬個網站提供支持,是 WordPress 用戶中流行的拖放頁面構建器。

頁面構建器非常易於使用,但具有一組獨特的功能,深受初學者和專家的喜愛。

例如,我在不到 5 分鐘的時間內打開了以下頁面:

海狸生成器 WordPress 頁面

它基本上是一個現成的模板,您可以在幾秒鐘內導入。 接下來,用您的內容替換圖像和文本,您就可以開始運行了。

如果您不喜歡 Beaver Builder 模板,您可以從空白頁面開始。 然後將內容塊拖放到位並在視覺上偽造頁面的其餘部分,而無需編寫 HTML 或使用簡碼。

過去,我們介紹了其他頁面構建器,例如 Divi、Elementor、Brizy 和 Webflow。 請盡可能查看指南:)

今天,我們將向您確切展示如何使用 Beaver Builder 和 Swarmify 在您的網站上提供快速、無延遲和專業的視頻體驗。

事不宜遲,讓我們開始吧,因為有很多東西要學。

什麼是海狸生成器?

海狸生成器網站

在任何事情之前,讓我們了解更多關於 Beaver Builder 的信息,以便我們中的第一個計時器。

Beaver Builder 是一款高級 WordPress 頁面構建器。 該工具可幫助您直觀地創建響應式 WordPress 頁面。

這意味著您可以通過拖放內容塊​​來創建頁面。 您不需要以前的編碼經驗即可使用 Beaver Builder 頁面構建器。

這對於初學者和專業人士來說是個好消息,因為您可以簡化工作流程並在構建網站時節省大量時間。

WordPress 中的大腕喜愛並信任 B​​eaver Builder:

海狸生成器推薦

Beaver Builder 最好的部分是它非常易於使用,您將在幾個小時而不是幾天內構建 WordPress 網站。

易於使用並不意味著 Beaver Builder 不如其他頁面構建器強大。 由於大量漂亮的功能,它是一個強大的頁面構建器。

你說特點?

是的,Beaver Builder 擁有以下功能:

  • 100% 響應式設計意味著您的頁面在多種設備上看起來都很棒
  • 適用於所有 WordPress 項目的 Beaver Builder 主題框架
  • 數十個預製模板,用於創建登錄頁面、主頁、內容頁面等。
  • Beaver Builder 拖放頁面構建器
  • 大量內容塊可添加文本、圖像、按鈕、標題、視頻等。
  • 大量的 WordPress 小部件,包括SmartVideo小部件
  • 全局設置
  • 如有必要,自定義 HTML、CSS 和 JavaScript
  • 鍵盤快捷鍵
  • Beaver Themer 插件可自定義網站的每個部分,包括頁眉和頁腳
  • 完全控制您的網站設計
  • 與各種 WordPress 主題兼容
  • WordPress.org 上作為插件提供的免費版本
  • 世界級的支持
  • 多站點能力
  • 白標
  • 等等

Beaver Builder 是一個功能強大的頁面構建器,它使創建美觀且響應迅速的 WordPress 網站變得輕而易舉。 如果這是您的第一次,您可以嘗試免費版本並稍後升級到專業計劃。

海狸生成器功能

他們提供三種定價套餐,非常適合初學者網站所有者、專業自由職業者和創意機構。 所有軟件包都允許您在無限數量的網站上使用 Beaver Builder。

現在我們都在同一個頁面上,讓我們繼續討論 Swarmify 的 SmartVideo。

什麼是 Swarmify SmartVideo?

Swarmify 網站

Swarmify 是一家視頻加速公司,專注於通過一個簡單的軟件包將 Netflix 質量的流媒體服務帶給每個人。 我們的 SmartVideo 平台簡化了圍繞視頻部署的所有復雜且昂貴的移動部件。

SmartVideo 會自動處理視頻的上傳、編碼、託管和交付,無論您將視頻存儲在何處,無論是 YouTube、Dropbox、Amazon S3、Google Cloud 等。

為什麼選擇 Swarmify SmartVideo?

Swarmify SmartVideo 平台可幫助企業解決視頻流中最棘手的一些問題:緩沖和流質量。 SmartVideo 還可以阻止 YouTube 的喜歡使用帶有鏈接的視頻播放器吸走您的流量。

借助我們的交付解決方案,您可以交付比業內普通玩家快 12 倍的視頻。 相同的交付平台還可以幫助您將停頓減少 8 倍

“Swarmify SmartVideo 於 2017 年 5 月推出。我們每個月都看到了巨大的增長。 越來越多的企業認識到使用 YouTube 的實際成本。 在 SmartVideo 之前,我們的解決方案僅適用於大型企業公司。 總的來說,我們最近慶祝了超過 5 億個視頻的流式傳輸,”Swarmify 首席執行官 Nathan Barnett 說。 “如果您的網站加載速度很快,但您的視頻加載速度很慢,那麼您仍然會失去該客戶。” 資料來源: YourStory.com

SmartVideo 可幫助您在 Beaver Builder 網站上提供快速、無緩沖和高質量的視頻。 我們為您提供一個不包含任何鏈接和第三方品牌的整潔的視頻播放器,讓您可以為您的網站訪問者提供專業的視頻體驗。

以下是使 SmartVideo 成為最佳視頻加速平台的一些功能。

  • 乾淨、無干擾的視頻播放器 - YouTube 和其他平台通過鏈接來吸引您的流量,從而使播放器混亂。 SmartVideo 播放器乾淨、可定制且無洩漏。
  • 自動 YouTube 和 Vimeo 轉換 - 如果您已經在 Beaver Builder 網站上使用 YouTube 或 Vimeo 視頻,SmartVideo 將在您安裝我們的 WordPress 插件後立即自動轉換所有視頻。
  • 在每台設備上進行了優化,這意味著您的視頻可以在任何設備和瀏覽器上觀看。
  • 無限帶寬和存儲
  • 快速、無緩沖和防失速的播放
  • 由超級天才和友好的開發人員提供的持續支持
  • 沒有陰暗合同的簡單定價結構
  • 視頻參與度分析
  • 全球視頻 CDN,無論用戶身在何處,都能為用戶提供超快的視頻
  • 等等。

Swarmify SmartVideo 是視頻加速領域的遊戲規則改變者。 我們帶來了很多工作經驗和專業知識。

此外,在 Beaver Builder 網站上安裝 SmartVideo 非常簡單,您將在下一節中學習。 但是,如果您遇到困難,您可以隨時與我們聯繫 :) 我們總是很樂意提供幫助。

快速移動,讓我們在您的 Beaver Builder 網站上安裝 SmartVideo。

注意:對於下一部分,您將需要一個有效的 Swarmify 帳戶。 還沒有帳戶? 立即創建一個並利用您的獨家 50% 折扣。

在 Swarmify,我們的使命是為各種規模的網站帶來加速、無干擾的視頻體驗。 無論您是網站所有者代理機構,還是只想加入我們的聯盟計劃,我們都有適合您的計劃!

如何將 Swarmify SmartVideo 與 Beaver Builder 網站集成

由於 Beaver Builder 與 WordPress 配合使用,我們將使用免費的 SmartVideo 插件。 創建 Swarmify 帳戶後,將 SmartVideo WordPress 插件下載到您的計算機。

接下來,登錄到您的 WordPress 管理儀表板並導航到Plugins > Add New ,如下所示。

WordPress 管理儀表板,添加新插件

接下來,單擊Upload Plugin按鈕,從您的計算機中選擇 SmartVideo 插件,然後單擊Install Now

WordPress 管理儀表板,安裝插件

之後,激活插件:

WordPress 管理儀表板,激活插件

我們還沒有 - 現在是時候將您的網站與您的 Swarmify 帳戶連接起來了。

如何?

單擊 WordPress 管理菜單上的SmartVideo ,如下所示。

WordPress 管理儀表板,SmartVideo 插件

在 SmartVideo 儀表板上,單擊配置按鈕:

SmartVideo WordPress 插件

這樣做會引導您進入以下配置頁面,其中包含說明和交互式 GIF,準確顯示您下一步需要做什麼。

SmartVideo 插件中的配置選項卡

但是為了省事,請快速登錄您的 Swarmify 帳戶並複制頂部的Swarm CDN密鑰:

Swarmify 儀表板中的 Swarm CDN 密鑰

返回 WordPress 中的 SmartVideo 配置頁面,向下滾動,粘貼 Swarm CDN 密鑰,然後單擊Enable SmartVideo ,如下所示。

將 Swarm CDN Key 添加到 SmartVideo 插件

這很簡單; 我不指望你會遇到困難。 完成後,您應該會在頂部看到綠色的Enabled標籤:

SmartVideo 已啟用

在我們學習如何將 SmartVideo 視頻添加到您的 Beaver Builder 網站之前,讓我們介紹一下上述頁面上可用的一些 SmartVideo 設置。

單擊設置選項卡,正如我們在下面的屏幕截圖中突出顯示的那樣。

單擊 SmartVideo 插件中的設置菜單

這樣做會導致以下設置頁面。

在 SmartVideo 插件中保存設置

讓我們簡要回顧一下每個部分。 為了您的愉快,我已經對這些部分進行了適當的編號。

(1)在最頂部,您可以選擇打開或關閉 SmartVideo。 顯然,您希望始終啟用 SmartVideo 以保證最佳性能。

(2) 基本選項

第二部分包含幾個基本選項來自定義您的 SmartVideo 播放器和體驗。 可用選項包括:

  • 打開或關閉 YouTube 和 Vimeo 自動轉換- 勾選複選框以自動轉換您網站上已有的 YouTube 和 Vimeo 視頻。 切換並保持這種狀態。
  • 顯示來自 YouTube 來源的隱藏式字幕- 除非必要,否則不要選中此復選框。
  • 優化背景視頻和現有視頻- 打開此選項,SmartVideo 將優化現有視頻和背景視頻。 切換並保持這種狀態。
  • 更改播放按鈕的形狀- 不言自明。 您有三種形狀選擇:默認(或六邊形)、矩形圓形。 選擇你喜歡的。 默認形狀對我有用:)
  • 選擇一種顏色以使視頻播放器組件與您的網站顏色相匹配- 同樣,您有機會自定義視頻播放器在您的網站上的外觀。 從這裡選擇您的自定義顏色 :)

下面我們有...

(3) 高級選項

加載設置頁面時,“高級選項”部分將折疊。 單擊標題以加載該部分,該部分為您提供以下選項。

  • 打開或關閉備用佈局方法- 如果您遇到奇怪的視頻大小或全屏問題,此選項會派上用場。 勾選複選框。
  • 打開或關閉上傳加速- 如果您的視頻上傳出現問題,請打開此選項。
  • (僅限專業版)設置水印- 在這裡,您可以將圖像或徽標設置為視頻播放器的水印。 這非常適合品牌推廣,因此請使用您最好的圖片/徽標。
  • (僅限專業版)添加 VAST 廣告 URL - 如果您希望通過來自 AdSense、DFP、SpotX 等的廣告通過視頻獲利,您可以在此處輸入廣告 URL。

設置正確後,不要忘記單擊頁面底部的保存設置

有了這個,讓我們將智能視頻添加到您的 Beaver Builder 頁面。

如何將 SmartVideo 添加到 Beaver Builder 頁面

出於說明目的,我正在使用您之前向您展示的同一頁面。 我將用 SmartVideo 替換頂部的標記圖像:

海狸生成器示例頁面

我從 SpaceX YouTube 頻道借用了SpaceX Launches視頻。 這是我們演示中的相同視頻 (請檢查一下)。

注意:如果 YouTube 是您的來源,請確保您使用的是嵌入鏈接(即https://www.youtube.com/embed/gmJgW-yMAIg )而不是直接觀看鏈接(即https://www. youtube.com/watch?v=gmJgW-yMAIg )。

要找到嵌入鏈接,請轉到視頻下方,然後單擊分享按鈕:

點擊在 YouTube 上分享

之後,單擊嵌入按鈕,如下所示。

點擊在 YouTube 上嵌入

然後進入出現的彈出窗口並複制嵌入鏈接,如下所示。

複製嵌入網址

看? 那不是那麼困難。

注意:另一件事,如果您從 YouTube 頻道獲取視頻並且您的視頻設置為“私有”,請將其更改為“未列出”。

有了這個序言,讓我們繼續。

在 Beaver Builder 中打開您的頁面:

在 Beaver Builder 中選擇模塊

由於我要替換圖像,因此我必須先通過單擊刪除圖標將其刪除,如下所示:

刪除 Beaver Builder 模塊

這給我留下了一個空列:

Beaver Builder 中的空列

專業提示:如果您不替換像我這樣的圖像,則可以跳過上述步驟。 只需確保您有一個空列或行來添加視頻。 如果您以前使用過 Beaver Builder,那應該不是問題。

接下來,單擊頂部的添加內容模塊 ( + ) 加號圖標:

在 Beaver Builder 中添加內容模塊

之後,將SmartVideo內容塊拖放到要放置視頻的位置:

將 SmartVideo 塊拖到頁面上

拖放 SmartVideo 模塊會彈出如下所示的漂亮小框。

選擇視頻

這個盒子可以讓你做很多事情。 例如,它允許您選擇視頻源並控制幾個基本和高級選項——稍後會詳細介紹。

接下來,點擊Video source ,選擇YouTube ,粘貼您的嵌入代碼,然後點擊Save ,按以下順序:

添加視頻地址

好的。 甚至在單擊保存之前,您就已經可以看到黃色的六邊形播放按鈕和視頻播放器。

單擊頂部的完成,然後單擊發布

點擊完成並在頁面上發布

專業提示:如果您仍在頁面上工作,您可以保存草稿

如果我在前端查看我的智能視頻,我將在整潔的視頻播放器中看到該視頻。 Swarmify 已經對視頻進行了優化和加速,如下所示。

請注意,視頻加速是“開”

沒有 YouTube 品牌,沒有緩衝,也沒有吸引您流量的鏈接。 哦,是的,當我暫停視頻時,也沒有“推薦視頻”。 另外,它的加載速度非常快:)

但它看起來小得奇怪,但那是因為我沒有在 Beaver Builder 中更改我的列寬。 您可以更改列寬並四處移動,直到獲得正確的大小。

我玩了我的列寬並編輯了一些內容,這就是我得到的”

調整列寬後的頁面

不錯。 畢竟越大越好:)

現在讓我們談談我們剛才提到的基本和高級選項。 你知道? 當我們添加視頻並彈出那個漂亮的小盒子時?

在 Beaver Builder 內的 SmartVideo 內容模塊內單擊:

單擊 SmartVideo 模塊內部

這樣做會引導您進入以下選項,您可以在其中看到基本和高級選項:

SmartVideo 模塊設置

與我們在將您的網站連接到您的 Swarmify 帳戶時介紹的基本和高級選項不同,上述選項允許您自定義玩家的行為方式,因為沒有更好的詞。

這就是我的意思。 繼續並單擊Basic options ,它會將您帶到此處:

SmartVideo 模塊中的基本選項

看看那個! 許多選項可以控制視頻播放器的寬度、高度、內聯播放視頻(非常適合 Safari OS 瀏覽器)和響應式設計。

您還具有自動播放等控件(如果您打開此功能,請確保您的視頻自動靜音播放) 靜音 (視頻開始靜音) 循環(視頻不斷重播),甚至關閉控件(但不要這樣做,因為用戶將無法播放、暫停或調低音量,這很煩人)。

然後你有高級選項卡,如下所示:

SmartVideo 模塊中的高級選項

同樣,還有大量選項可以進一步自定義您的視頻播放器。 您可以添加動畫(在頁面加載時讓視頻彈跳)、在視頻播放器周圍設置間距等等。

與往常一樣,完成後不要忘記保存更改。

最後的想法

Beaver Builder 是一個非常優雅的頁面構建器。 它的強大超出了您一開始的想像,但是一旦您進入那裡並開始修修補補,您很快就會意識到您擁有一個強大的工具來構建任何現代網站。

但它不是為視頻優化甚至加速而構建的; 它只是一個頁面構建器。 這就是 Swarmify SmartVideo 解決方案的用武之地。我們幫助您在 Beaver Builder 網站上提供快速和專業的視頻體驗。

所有這些都沒有大多數視頻主機所帶來的沉重成本、限制和技術挑戰。

我們遺漏了什麼嗎? 隨時聯繫我們,我們會很樂意聊天。

立即試用 SmartVideo!