完整的 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 中的大腕喜爱并信任 Beaver 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!