視頻託管的完整 Webflow + Swarmify 指南
已發表: 2020-10-06你使用網絡流嗎? 如果是這樣,Swarmify 可以為您提供提供超快速和高質量視頻體驗所需的一切。
什麼是好內容? 什麼是著陸頁? 什麼是網站?
創建網站是噴火龍網絡開發人員的專利的日子已經一去不復返了。
如今,您可以在下一個人完成一個三明治的時間內創建令人難以置信的網站。
多虧了 Webflow 等網站建設者,您無需了解任何關於編碼的知識即可快速創建出色的網站。
對於今天的帖子,我在不到 30 分鐘的時間內創建了一個示例網站(您會在一分鐘內看到它)! 而且我不是你所說的專業網絡開發人員。 甚至在我的夢裡也沒有:)
諸如 Webflow 之類的工具已經消除了許多阻礙像您和我這樣的非技術型人員構建網站的障礙。
現在...
如果您在 Webflow 網站上使用視頻,您希望它們能夠快速加載且不會出現停滯。
您只想為用戶提供最好的觀看體驗,僅此而已。
在播放期間緩衝的慢速視頻只會惹惱您的訪問者,並讓他們奔向山丘並直接進入競爭對手的等待懷抱。
你不想那樣,因為你很聰明。 此外,因為您現在可以使用 Swarmify 的 SmartVideo 技術。
SmartVideo 允許您為用戶提供完全定制的專業視頻體驗。
您可以提供比業內普通玩家快 12 倍的視頻。 更好的是,專有的 SmartVideo 交付解決方案可將停頓率降低 8 倍。
在今天的帖子中,我們將向您展示如何將 Swarmify 與 Webflow 集成以加速視頻,從而提高用戶參與度和銷售量!
事不宜遲,讓我們稱量錨並起航:)
什麼是網絡流?
那麼,我們稱之為 Webflow 的這種動物是什麼? 對於外行來說,Webflow 是一家總部位於舊金山的美國公司。
他們為網站建設和託管提供軟件即服務 (SaaS) 平台,所有這些都捆綁在一個軟件包中。
Webflow 為您提供了一個漂亮的拖放式網站構建器,使用起來輕而易舉。 最重要的是,它們為您提供了大量的功能,使構建響應式網站就像 abracadabra 一樣簡單。
當您的網站準備就緒時,您無需去其他地方進行網絡託管。 Webflow 為您提供最適合所有企業(無論大小)的頂級託管服務。
Zendesk、Dell、Rakuten 和 Upwork 等大牌品牌都信任 Webflow,這意味著您可以放心使用。
在你我之間,我以前從未使用過如此直觀的網站構建器。 Webflow 將 Weebly、Squarespace 和 Wix 等公司徹底淘汰。
他們也喝自己的Kool-Aid。 Webflow官網製作,你猜對了——Webflow!
網絡流主要特點
Webflow 因其以下主要功能而廣受歡迎且最為人所知。
- 直觀的拖放式網站構建器,可讓您直觀地創建網站
- 數十個漂亮的現成模板,您可以自定義,直到您放棄
- 大量的網站元素
- 電子商務功能
- 超快速且強大的 Amazon S3 託管
- 無限風格
- 能夠添加自定義 HTML、CSS 和 JS 代碼
- 靈活的定價計劃
- 強大的內容管理系統 (CMS)
- 大量第三方集成
- 免費計劃試水
- 大量的互動和動畫
- 連接自定義域名
- 使用他們的子域,例如swarmify.webflow.io來託管一個免費網站
- 專業支持
如果您是前端 Web 開發人員(或只是普通的 joe),正在尋找易於使用但功能強大的網站構建器,強烈推薦使用 Webflow。
這是節省時間並簡化您已經很忙的工作日的完美工具。 如果您是現有的 Webflow 用戶,那麼您已經知道 Webflow 是一個完美的網站構建器。
儘管如此,他們並沒有為您提供優化視頻的正確工具。 如果您使用 YouTube,您的 Webflow 網站上的視頻播放器仍會顯示煩人的 YouTube 品牌和鏈接,從而分散您的用戶並竊取您的流量。
雖然 Webflow 使用快速託管,但您從 YouTube 或任何其他來源使用的視頻將緩衝並且仍然需要時間來加載。
這就是 Swarmify 的用武之地。無論您是使用 YouTube、Vimeo 還是任何其他網站來託管您的視頻,我們都能為您提供優化 Webflow 網站上的視頻所需的確切內容。
什麼是 Swarmify?
Swarmify 於 2013 年作為視頻加速平台推出。 該服務在 Netflix 和 Hulu 等流媒體巨頭使用的相同基礎設施上運行。
您可以將視頻存儲在任何您想要的位置,並使用 Swarmify 的 SmartVideo 以極快的速度向您的用戶提供視頻。
這是一個示例場景來說明我的意思:
- 將視頻上傳到 YouTube 或 Vimeo 以獲得社會效益,並一如既往地嵌入您的網站
- 使用我們的 WordPress 插件或快速片段將 SmartVideo 與您的網站集成
- SmartVideo 在幕後下載您的 YouTube/Vimeo 視頻並將其上傳到我們的全球交付網絡
- SmartVideo 在看起來很棒的整潔的視頻播放器中提供您現在更快的視頻
- 一切都在後台自動發生。 事實上,SmartVideo 會自動轉換您網站上的所有 YouTube 視頻。 安裝一次就可以了!
SmartVideo 使用內部 EdgeAI 來防止播放過程中的卡頓,並使用 SmartCDN 解決方案確保您的訪問者在世界任何地方都能享受快速且無緩衝的視頻。
如果您使用大量視頻,那麼慢速可能會扼殺參與度並導致銷售額減少。 SmartVideo 可幫助您規避此問題,而無需支付巨額費用和存儲/帶寬限制。
Swarmify 主要功能
由於以下功能,Swarmify 用戶喜歡 SmartVideo。
- 乾淨、整潔、無干擾的視頻播放器
- 即時啟動 - SmartVideo 視頻的播放速度平均比其他播放器快 12 倍(請參閱此處的演示)
- 跨多個設備優化的觀看體驗
- 自動 YouTube/Vimeo 轉換 - 已經在 YouTube 或 Vimeo 上託管視頻? SmartVideo 會自動轉換它們
- 持續流媒體優化——在整個播放過程中,SmartVideo 持續監控每個用戶的視頻體驗,並在故障發生之前預防故障。
- 無停頓播放 - SmartVideo 在播放期間為您提供的緩衝平均比其他播放器少 8 倍。
- 無限的一切 - 享受無限的帶寬和存儲
- 由熱情的開發人員團隊支持的專業支持
- 易於安裝和實施
- 在此處閱讀有關我們功能的更多信息
視頻是數字營銷的重要組成部分。 您不能忽視使用視頻作為營銷策略的驚人好處。
也就是說,您的視頻加載速度是在您的網站上提供更好的用戶體驗的一部分。
要在您的 Webflow 網站上提供快速且無延遲的視頻體驗,您需要 SmartVideo 等解決方案。
借助快速視頻,您可以享受更好的用戶留存、更多轉化、更低的跳出率和更多的銷售額。 這是沒有道理的。
此外,谁愿意觀看一個需要永恆和繞太陽旅行才能加載的視頻?
絕對沒有人! 連你都沒有。
順便說一句,讓我們將 Swarmify 與您的 Webflow 網站集成,以加速您的視頻並讓您尊敬的客戶臉上露出笑容。
N/B:要將 Swarmify 與 Webflow 集成,您需要一個有效的 Swarmify 帳戶和 Webflow 上的付費計劃。
還在圍牆? 不要。 立即註冊 Swarmify,享受我們獨家的50% 折扣。 好奇的? 在這裡了解更多。
也就是說,讓我們將 Swarmify 的視頻託管與您的 Webflow 網站集成。
如何將 Swarmify 添加到 Webflow
'在我們進入 Webflow 之前,讓我們首先配置您的 SmartVideo 片段。 繼續,登錄到您的 Swarmify 儀表板並單擊配置,如下所示。
接下來,選擇您的 Webflow 上是否有 YouTube 視頻:
在上面選擇是可確保 SmartVideo 自動轉換 Webflow 網站上的所有 YouTube 視頻。 點擊下一步按鈕。
在下一個屏幕上,選擇您的 Webflow 站點是否有背景視頻:
想要更改視頻播放器的顏色以匹配您的 Webflow 站點? 您可以在下一個屏幕中執行此操作:
點擊下一步。
接下來,您可以根據需要更改播放按鈕的形狀。 我更喜歡默認的六邊形按鈕,但您可以選擇矩形或圓形:
接下來,為您的視頻選擇自定義水印:
你很擅長這個,我必須承認:)
點擊下一步。
在下一個屏幕上,選擇是否要在視頻中銷售廣告,然後點擊Finish :
最後點擊複製到剪貼板,如下圖。
現在,您的 SmartVideo 片段已準備好用於您的 Webflow 網站。
接下來是什麼?
我們現在將 Swarmify 添加到您的 Webflow 網站。
這是我正在使用的示例網站,正如承諾的那樣:
我從 Openmic Productions 借來了著名的耶路撒冷視頻。 順便說一句,很棒的歌曲和視頻。 在世界各地,人們都在進行耶路撒冷舞蹈挑戰。
我多麼希望我能跳舞。
繼續,讓我們將 Swarmify 添加到您的 Webflow 網站。
登錄到網絡流:
輸入他們的詳細信息並點擊登錄按鈕:
接下來,單擊您要添加 SmartVideo 的網站:
現在,您進入了我們之前討論過的直觀網站構建器:
但我們不會將 SmartVideo 片段添加到單個頁面。 我們希望該片段適用於整個網站。
那麼,我該怎麼做弗雷迪?
單擊Webflow (W)圖標(鼠標懸停時變為漢堡菜單):
接下來,單擊項目設置:
之後,點擊自定義代碼:
是的。
接下來,將您之前複製的 SmartVideo 片段粘貼到Head Code部分,然後單擊Save Changes ,如下所示:
使用該片段,您的 Webflow 將與 Swarmify 連接。 您網站上的所有 YouTube 視頻都會自動轉換 :)
完畢。
結果?
這個:
請注意沒有第三方品牌的新視頻播放器。
請記住:如果您使用的是 YouTube,請使用嵌入而不是直接鏈接,即https://www.youtube.com/embed/fCZVL_8D048與https://www.youtube.com/watch?v=fCZVL_8D048 。
專業提示:請使用嵌入鏈接。 確保在將視頻添加到 Webflow 網站時使用嵌入鏈接。
在其他地方託管視頻?
SmartVideo 為您提供支持
查看前 9 個最佳視頻上傳網站和雲存儲服務。
這是一個可共享的鏈接:https://swarmify.com/blog/top-video-upload-sites-cloud-storage-services/。
添加 SmartVideo 標籤
您可以使用 SmartVideo 標籤在 Webflow 網站的任何位置添加 SmartVideo 視頻:
<smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" controls></smartvideo>
打開您要編輯的 Webflow 頁面。 對於我們的示例,我將用我們之前使用的相同耶路撒冷視頻替換英雄部分。 然而,這一次,我將使用上面的 SmartVideo 標籤。
這是我準備好的 SmartVideo 標籤的外觀:
<smartvideo src="https://www.youtube.com/embed/fCZVL_8D048" width="1280" height="720" class="swarm-fluid" controls></smartvideo>
請注意,我將path/to/my/video.mp4替換為視頻的嵌入鏈接。
接下來,單擊Add (+)並選擇Embed ,如下所示:
接下來,粘貼您的 SmartVideo 標籤並單擊Save & Close :
現在,當我在前端檢查我的示例網站時,我看到了轉換後的視頻:
就像 A、B、C 一樣簡單。
說再見?
Webflow 用戶會發現 SmartVideo 非常有用。 SmartVideo 可加速您的視頻以獲得更好的用戶體驗。
Swarmify SmartVideo 提供比行業平均速度快 12 倍的視頻。 您將通過更快的視頻增加轉化率和銷售額。
直到下一次,創建更多視頻並使用 Swarmify 的 SmartVideo 加速它們 :)