视频托管的完整 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 加速它们 :)