如何在 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!