如何在 Squarespace 上自動播放視頻

已發表: 2023-02-14

將自動播放視頻添加到您的 Squarespace 網站是吸引訪問者並將注意力吸引到重要內容的好方法。 自動播放視頻對於產品演示、教程或宣傳材料特別有用。 在本指南中,我們將討論三種將自動播放視頻添加到您的 Squarespace 網站的不同方法:YouTube 嵌入、HTML 視頻標籤和 SmartVideo (Swarmify)。

如何將自動播放 YouTube 視頻添加到您的 Squarespace 網站

YouTube 是使用最廣泛的視頻託管服務之一。 幸運的是,向您的站點添加 Squarespace 自動播放視頻非常簡單。 也就是說,有幾個原因可以說明為什麼沒有流量洩漏和乾擾的替代託管服務是企業更好的選擇。

第一步是轉到您的 YouTube 視頻並選擇您的視頻。 在視頻的觀看頁面上,找到視頻標題下方的喜歡和不喜歡按鈕。 直接在它們的右邊是“共享”按鈕。 點擊它。

這將拉出一系列社交媒體鏈接。 點擊“嵌入”。

將彈出一個新窗口,為您提供嵌入代碼。 單擊“複製”將嵌入代碼複製到剪貼板。

現在你有了你的嵌入代碼。 但是,此代碼不會自動播放視頻。 要啟用自動播放,我們需要對其進行編輯。 將代碼粘貼到簡單的文本編輯器(如記事本)中。

在嵌入代碼中找到視頻的 URL。 它看起來像這樣:

src="https//www.youtube.com/embed/xyz"

在該 URL 末尾的引號內,添加以下內容:

?autoplay=1&mute=1

您的代碼現在應該如下所示:

src="https//www.youtube.com/embed/xyz?autoplay=1&mute=1"

對代碼的這一更改會激活自動播放並默認使視頻靜音。 如果視頻未靜音,許多瀏覽器(包括 Chrome、Safari 和 Firefox)將嘗試阻止視頻自動播放。

現在您已經編輯了代碼,請返回您的 Squarespace 站點。 向下滾動到您想要視頻的網站部分。 如果您還沒有單獨的部分,請使用藍色按鈕添加一個 - 添加部分。

然後,單擊該部分右上角的鉛筆按鈕以編輯該部分。

然後您將看到幾個可以添加的不同元素。 在基本標題下,查找添加新代碼塊的選項。 單擊 </> 代碼。

最後,只需從文本文件中復制嵌入代碼並將其粘貼到代碼編輯器中。 您的站點將自動刷新,您的視頻將出現。 這就是您嵌入 YouTube 視頻的方式

如何使用 HTML 標籤嵌入自動播放視頻

如果您有尚未上傳到 YouTube 或任何其他視頻託管網站的視頻,您可以使用 Squarespace 本身作為您的託管商。 確保您的視頻符合為上傳的視頻設置的要求。

第一步是打開資源庫。

然後,將您的視頻文件從您的計算機拖放到資產庫中以開始上傳過程。

上傳視頻後,單擊“文件詳細信息”按鈕(視頻一角的三個點)。 然後,找到您上傳的視頻的新網址。

複製該 URL 並將其粘貼到記事本等文本編輯器中。 然後,在 URL 周圍添加 HTML 標記,如下所示:

<video controls autoplay muted src="[URL]"></video>

準備好視頻 HTML 代碼後,您可以添加代碼塊(使用前面提到的方法)並將代碼粘貼到其中。

如何將自動播放 SmartVideo 添加到您的 Squarespace 網站

當您將視頻放在您的網站上時,您希望它們能夠快速加載並且不受干擾。 最好的方法是利用像 Swarmify 這樣的內容分發網絡。 使用 Swarmify 的 SmartVideo,您可以完全控制您的視頻內容,消除分散注意力的廣告造成的流量損失。

此外,Swarmify 擁有一個全球分佈的服務器網絡,經過精心設計,可以比任何其他服務更快地向觀眾提供視頻內容。 將自動播放的 SmartVideo 添加到您的 Squarespace 站點很簡單。

首先,您需要設置您的 SmartVideo 帳戶。 完成帳戶設置後,您將獲得一些腳本代碼以及 Swarmcdnkey,這是 Swarmify 傳送視頻所必需的。

接下來,在您的 Squarespace 站點上安裝 SmartVideo。 點擊設置。

單擊高級。

然後點擊代碼注入。

之後,將您使用密鑰收到的代碼片段粘貼到標題文本框中。

最後,單擊保存。

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

保存更改後,SmartVideo 將完全安裝在您的站點上。 如果您的站點上有任何 YouTube 視頻,SmartVideo 會自動開始將它們轉換為無干擾的視頻。 如果您有來自其他來源的視頻,則需要使用 SmartVideo 標籤。

與之前的其他方法一樣,這將使用新的代碼塊來完成。 前往您的 Squarespace 網站,轉到您想要播放視頻的部分,單擊編輯,然後單擊 </> 代碼。

獲得代碼框後,您將需要使用以下語法添加 SmartVideo 標籤:

<smartvideo src="[URL]" width="1280" height="720" class="swarm-fluid" poster="path/to/my/image.png" controls muted autoplay></smartvideo>

此代碼會將視頻添加到您的站點。 該 URL 應該是指向您的視頻的鏈接。 SmartVideo 支持 Vimeo、Amazon S3、Google Cloud Storage、Dropbox 和 Google 驅動器鏈接等。

控制選項使用戶能夠暫停和播放視頻。 靜音和自動播放選項的工作方式與我們在本指南中介紹的其他方法類似。

為什麼 SmartVideo 是您業務的最佳選擇

在我們列出的三個選項中,在向您的站點添加視頻內容時,SmartVideo 是明顯的贏家有幾個關鍵原因。 第一個選項依賴於 YouTube。 儘管 YouTube 是用戶非常熟悉的快速播放器,但它也有其缺點。 YouTube 的主要問題是可以在您的視頻開始之前播放的廣告。

這些廣告會分散潛在客戶的注意力,並最終將流量從您的網站和您的品牌轉移開。 這是您為能夠“免費”使用 YouTube 嵌入視頻而付出的代價。 此外,在 YouTube 視頻的結尾,該平台總是會推薦其他視頻,這些視頻可能與您的網站主題相關,也可能不相關。

第二個選項依賴於 Squarespace 託管您的視頻。 但是,Squarespace 對視頻的格式和長度進行了限制,具體取決於您希望視頻上傳到站點的位置。 例如,您網站某個部分中的視頻元素將您的上傳時間限制在 60 秒以內。 此外,Squarespace 從未設計為視頻託管服務,不應依賴它來提供閃電般快速的結果。

第三個選項是自動或通過 SmartVideo 標籤使用 SmartVideo。 此選項使您可以快速傳輸視頻,而不受流量虹吸廣告的影響。 另外,SmartVideo 速度更快。 我們的播放器加載速度比 YouTube 播放器快 12 倍!

此外,YouTube 幾乎不為您提供客戶支持。 另一方面,Swarmify 讓您可以接觸到經驗豐富且友好的支持團隊,隨時準備為您提供所需的幫助。

不要等待立即開始使用 Swarmify!

做出改變

立即試用 SmartVideo!