在 Divi 中使用视频的终极指南

已发表: 2017-08-09

视频是一个强大的工具。 如果一张图片价值一千字，那么一分钟的视频价值 180 万字（至少研究人员 James McQuivey 博士是这么建议的）。 视频是一种有效的营销工具，如果处理得当，它是实现精美设计的工具。

使用 Divi 可以轻松地将视频添加到您的网站。 视频和视频滑块模块允许您通过简单地输入视频网址来添加第三方托管的视频，如 youtube 和 vimeo。 您甚至可以添加自己的 mp4 和 webm 格式的自定义视频，以获得最大的浏览器兼容性。 最重要的是，Divi 为您提供了使用图像叠加和播放按钮来设置视频样式的选项，以帮助匹配您网站的设计。

除了在您的页面上嵌入视频外，Divi 还提供了添加背景视频的简单解决方案。 目前，当您使用 Divi 构建器构建站点时，每个部分、行、列和 37 个模块中的 20 个都具有背景视频功能。

对于大多数人来说，在 Divi 中使用视频就像插入指向您想要的 YouTube 或 Vimeo 视频的链接并看到它出现在您的帖子或页面上一样简单。 但在这篇文章中，我们将讨论 Divi 如何以及为何对视频进行处理，以便您为可能想要运行的任何特殊用例、独特风格或创意实验做好充分准备。

在本指南中，我们将讨论……

  • 视频模块和视频滑块模块的幕后工作，因此您可以更有效地使用它。
  • 自托管视频与使用第三方托管服务之间的区别。
  • 关于优化网络视频的一些技巧。
  • 视频背景的最佳实践。
  • 选择视频尺寸的一般指南。
  • 以及一些有用的背景视频技巧。

让我们开始吧。

探索视频模块

视频模块允许您将几乎任何来源的视频嵌入到您的页面中。 Divi 关于视频模块的文档解释了所有功能以及如何将视频添加到您的页面。 但是对于这篇文章，我将深入挖掘。

将自托管视频添加到视频模块

要使用视频模块添加自托管视频，您必须上传视频或在视频设置中向视频文件添加 url。 而且，您必须以两种文件格式添加视频。

视频与 Divi

这就是你真正需要做的。 足够简单。

然而，在幕后，Divi 正在使用 HTML5 视频元素来显示视频。 当您选择添加自托管视频或使用 mp4 和 webm 格式上传您自己的视频时，Divi 部署的代码结构如下所示： 

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
Error loading this resource
</video>

关于这段代码的作用，我想指出以下几点：

  1. 注意 <video> 标签中的控件属性。 这告诉视频显示控件。 足够简单。
  2. 注意开始和结束 <video> 标签中的两个 <source> 标签。 源由视频文件组成。 第一个是 mp4，第二个是 webm 文件格式。 两者都是最大程度的浏览器支持所必需的。 顺序也很重要。 您希望浏览器首先看到 mp4，因为它是最普遍支持的。 稍后我将详细讨论这些格式。
  3. 如果前两种格式无法识别，则会显示“加载此资源时出错”这一行。
  4. 您看不到的是，Divi 为这个 <video> 标签设置了样式，并为其设置了 100% 的宽度以使其具有响应性，因此您的视频将根据其所在列的宽度进行调整。

这个 HTML5 视频元素正在成长为在网络上显示视频的新标准方式。 值得庆幸的是，Divi 为我们解决了这个问题。

自托管视频图像叠加

除了将视频添加到视频模块的选项外，Divi 还允许您为视频添加自定义叠加图像。

视频与 Divi

如果您选择向自托管视频添加叠加图像，则必须上传您自己的视频。 从视频生成图像的选项仅适用于第三方托管的视频 URL，如 Youtube 和 Vimeo。

因为图像会变成视频的大小，并且因为视频会调整到它所在的列的大小，所以选择合适大小的图像很重要。 Youtube、Vimeo 和大多数其他格式的视频通常具有 16:9 的纵横比。 因此，如果您将最大内容宽度设置为 Divi 的默认值 1080 像素，那么按照 16:9 的纵横比，您的视频将具有 1080×608 的尺寸。 因此，您的叠加图像应为 1080×608 像素。

播放按钮

设置好图像后，Divi 将自动应用自定义播放按钮。 如果需要，您甚至可以在“设计”选项卡下的“视频设置”中更改按钮的颜色。

视频与 Divi

一旦用户使用自定义播放按钮点击叠加层，叠加层和按钮将消失，叠加层下方的视频将开始自动播放。

添加第三方托管视频 URL

将视频添加到视频模块的最常见方法是简单地添加由第三方（如 Youtube 或 Vimeo）托管的视频的 URL。 因此，您无需像为自托管视频那样添加两种视频格式，只需在顶部背景输入栏中添加一个 URL。

视频与 Divi

在幕后，Divi 添加了一个流体宽度包装器 div 并嵌入了一个显示视频的 iframe。 此 iframe 与您直接从 youtube 获得的相同。 以下是使用视频模块添加 youtube 视频时代码的示例： 

<div class="fluid-width-video-wrapper" style="padding-top: 56.2963%;">
<iframe src="https://www.youtube.com/embed/Nimdf3Zeayk?autoplay=1&amp;amp;feature=oembed&amp;amp;wmode=opaque" frameborder="0" allowfullscreen="" id="fitvid0">
</iframe>
</div>

具有“fluid-width-video-wrapper”类的 div 环绕 iframe 并为其提供 100% 的宽度，以便它会根据其容器的宽度进行调整，使其具有响应性。

如果您选择添加叠加图像，您可以选择上传自己的图像，或者为了省去一点麻烦，您只需单击“从视频生成”，Divi 将自动应用从视频中获取的叠加图像。 您还可以选择自定义播放按钮。

探索视频滑块模块

视频滑块的工作方式与视频模块在视频部署在网页上的方式非常相似，但现在视频位于滑块中。 这是一种在一个地方显示视频的便捷方式，因此您的用户可以一次一个滚动浏览一组视频。 有关视频滑块模块选项的更多详细信息，您可以访问文档页面。

我最喜欢的视频滑块元素之一是可用于控制幻灯片的缩略图轨道。 它既方便又引人入胜。

视频与 Divi

您甚至可以从模块设置（包括缩略图叠加颜色）中自定义滑块控件的颜色。

视频与 Divi

缩略图将保持您上传的原始图像的大小，因此请注意不要在滑块中上传一堆大图像，因为这可能会降低您的网站速度。 此外，无法从视频自动生成缩略图。 你必须自己上传那些。

缩略图遵循 4:3 的纵横比，因此为了调整您的 16:9 滑块图像，它会爆炸并切断图像的左右两侧以覆盖整个空间。

设计提示：您可以采取的一种方法来减少文件大小并防止缩略图切掉图像的一部分，将缩略图自定义为 253×190 像素（4:3 纵横比）并选择隐藏选项在主视频上显示图像叠加。 这样您的叠加图像将仅用于缩略图，因此不需要更大以适应主视频大小。

自托管视频的 4 个重要提示

  1. 使用 CDN。 如果您正在考虑通过 WordPress 媒体库添加视频，请再想一想。 尽管可以在自己的服务器上安装自己的 WordPress 上托管视频，但您可能会遇到带宽、文件大小、存储空间等方面的一些限制……这可能会导致您网站的加载时间受到影响并导致视频流延迟. 我会考虑在 Amazons3 等外部服务上托管您的视频。 这将有助于页面加载时间。 此外，其中一些提供商提供了一定程度的安全性，以防止人们下载您的视频（或至少使下载变得更加困难）。
  2. 为网络优化文件。 视频占用大量带宽，尤其是当您使用大型视频背景时。 您需要注意不要让页面过载。 如果您想为网络正确优化视频，有许多因素需要考虑。 这里有一个有用的等式可供考虑：
    文件大小 = 比特率（每秒千位）x 持续时间（以秒为单位的视频长度）

    因此，如果想要获得更小的文件大小，您需要减少持续时间（视频长度）和/或比特率（每秒传输的千比特数）。 比特率应始终低于用户的连接速度。 考虑到全球互联网速度约为 7 Mbps（美国约为 18 Mbps），您需要将比特率保持在远低于该速度的水平，以避免流媒体中断。

    您不必自己完成这一切。 有一些很棒的免费工具可以帮助您进行视频压缩，例如 Handbrake。

    如果您想了解有关优化网络视频的更多信息，我建议您阅读“减少视频大小以加快加载速度的 5 种最佳方法”。 列出了一些很棒的资源，并对如何使用 Handbrake 进行了很好的解释。

  3. 添加正确的文件格式。
    正如我之前提到的，如果您是自托管视频（而不是像 Youtube 那样依赖第三方为您托管），则需要添加 mp4 和 webm 格式的视频。

    Mp4 是目前支持最广泛的格式，因为它仍然使用 flash 播放一些旧浏览器，并且它是移动浏览器支持的标准。 Divi 在代码中首先列出 mp4，以便 iOS 设备可以立即识别该文件。

    Webm 是第二个最受支持的格式。 它是为网络而构建的，它似乎将继续存在。 它以出色的压缩产生高质量的流媒体。 它是开源的。

    结合起来，这两者为大多数 Web 浏览器（包括移动设备）提供支持。

    VLC 媒体播放器是一个很棒的免费转换工具。

  4. 定义 MIME 类型：为了使 WEBM 视频格式能​​够在所有浏览器中使用，您的服务器必须指定正确的 MIME 类型。 您可以在此处了解有关使用 .htaccess 定义 MIME 类型的更多信息。 如果您发现您的视频没有在某些浏览器中播放，那么这可能是原因。要将 MIME 类型添加到您的 .htaccess 文件，请使用 FTP 客户端（如 FileZilla）访问您的 WordPress 根文件。 在那里你应该找到你的 .htaccess 文件。 在文本编辑器中打开文件。 在“#END WordPress”行下方添加以下内容：

    AddType 视频/mp4 .mp4 .m4v
    添加类型视频/ogg .ogv
    添加类型视频/webm .webm

    视频与 Divi

    然后保存文件。 现在您的视频格式将被所有浏览器识别。

使用第三方平台（Youtube 和 Vimeo）托管

如果您发现转换和压缩自己的视频工作量太大，您可以随时让第三方为您完成这项工作。

如果您对视频一无所知，我建议您走这条路。 如果您对 youtube 或 vimeo free 的限制不感冒，您可以为 Vimeo Pro 咬紧牙关。 从长远来看，这可能值得头疼。 您不希望在您的网站上放一个视频，这会减慢速度或看起来很糟糕。 这根本不值得。

视频和视频滑块模块支持的第三方视频平台

如果您想使用视频和视频滑块模块添加第三方视频，您可以使用以下流行平台：

  • YouTube
  • 维密欧
  • Dailymotion

如何使用 Divi 添加第三方视频

要从这些平台中的任何一个添加视频，您需要访问他们的网站以获取共享链接。

视频与 Divi

然后您可以将其粘贴到视频或视频滑块模块中。

视频与 Divi

单击“从视频生成”按钮以添加图像叠加。 或者上传你自己的。

视频与 Divi

保存设置。 就是这样。

请记住，Divi 是基于 WordPress 构建的，因此您始终可以使用第三方平台建议的嵌入代码嵌入来自第三方平台的视频，而无需使用视频模块。 只需添加一个文本模块并在内容框中输入嵌入代码即可。

视频与 Divi

您可能需要自定义嵌入的宽度和高度以适应响应式布局。

维斯塔呢？

Wistia 是一个功能强大的平台，很多人都在使用，但不幸的是，它目前不能很好地与 Divi 模块配合使用。 但是，您可以使用他们提供的嵌入代码嵌入 Wistia。

视频与 Divi

将该代码粘贴到您的 Divi 网站的内容部分将显示视频。

您甚至可以将代码粘贴到滑块模块的内容部分，以添加 wistia 视频作为您的幻灯片之一。 但是，您需要调整一些 CSS 以使其看起来像您想要的那样。

在 Divi 中使用视频背景

你甚至应该使用视频背景吗？

在我们进入视频背景的细节之前，重要的是你诚实地问自己是否应该使用一个。 不要误会我的意思，我喜欢好的视频背景。 但有时它只是没有意义。 毫无疑问，视频会减慢您的网站速度，并可能分散您对内容的注意力。 所以永远不要在更有效的图像上选择视频背景。 你的网站没有一个可能会更好。

但是，有时视频是比图像更好的解决方案。 如果做得好，视频背景可以使您的内容栩栩如生。 所以，让你的视频有目的性并让它发挥作用。

Divi 中的视频背景功能

使用 Divi Builder，您几乎可以在任何地方添加视频背景。 您可以为每个部分、行和列添加视频背景。 您甚至可以为大多数模块添加视频背景。
以下是支持视频背景的模块。

  • 全角标题（也适用于全屏选项）
  • 全角菜单
  • 全宽投资组合
  • 全角帖子滑块（不使用特色图片时，您可以使用视频背景作为所有幻灯片的背景）
  • 全角帖子标题
  • 全宽滑块（适用于单个幻灯片）
  • 音频模块
  • 吧台
  • Blurb 模块——确保给模块一些填充。
  • 号召性用语模块
  • 倒计时器
  • 电子邮件选择
  • 可过滤的投资组合
  • 登录模块
  • 数字计数器模块
  • 人物模块
  • 投资组合设置
  • Post Slider（当不使用特色图片时，您可以使用视频背景作为所有幻灯片的背景）
  • 帖子标题
  • 定价表（您可以分别为模块和不同的表设置视频背景）
  • 滑块（仅适用于单个幻灯片的背景）
  • 选项卡（用于模块背景和单个选项卡）
  • 感言
  • 文本
  • 切换

股票视频库

将视频背景添加到您的网站的难点在于找到正确的图像并确保其大小合适。 值得庆幸的是，您不必创建自己的自定义视频背景。 有可用的免版税库存视频库可能适合您的网站。 如果您正在寻找一些免费的视频片段，一些不错的起点是 videvo、coverr 或 videezy。 如果您正在寻找质量更好的付费版本，您可以查看 videohive、videoblocks 或 pool5。 如果您正在寻找一些灵感，其中一些网站会很好地使用视频背景。

如何为您的页面添加视频背景

在您找到（或创建）正确的视频后，事情变得非常简单。 要将视频背景添加到您的 Divi 网页，只需部署可视化构建器并找到要添加视频的部分，然后单击“部分设置”图标。

视频与 Divi

在内容选项卡下，单击背景选项下的背景图像图标/选项卡。 如果您有自托管视频，请同时输入 mp4 和 webm 格式。 然后输入视频的尺寸，以便 Divi 知道如何正确调整大小。

视频与 Divi

现在转到背景图像选项卡并添加一个背景图像，作为移动设备的一个很好的后备。

然后保存设置。 就这么简单。

如果您打算使用现在在 youtube（或 vimeo）上托管的视频之一作为背景，则目前在 Divi 构建器中无法实现。 请记住，您需要这些视频以正确的格式显示在所有浏览器上。 但是，您可以下载该 Youtube 视频（如果它属于您）并将其转换为 mp4 和 webm 格式以在您的背景中使用。

背景设计提示：为您的全角帖子滑块使用视频背景

如果您正在寻找一种创造性的方式来在您的博客页面上展示您的精选帖子，您可以为您的帖子滑块添加视频背景。 让我告诉你我的意思。

使用 Visual Builder 转到您的页面，并使用全角帖子滑块模块将全角部分添加到页面顶部。

视频与 Divi

在“内容”选项卡下的“显示特色图片”下，选择“否”。

视频与 Divi

然后在背景部分下，选择视频背景选项卡并添加视频的两种格式以及尺寸。

视频与 Divi

对于无法显示视频背景的移动设备，添加背景图像作为后备也是一个好主意。

就是这样。

现在，用户可以使用很酷的背景视频滚动浏览您的精选帖子滑块。 只要确保视频背景足够微妙，不会分散对内容的注意力。

视频背景的最佳实践

考虑到视频背景提供的所有可能性，我认为最好包括一些通用的最佳实践。

  1. 始终包含背景图像作为移动设备的后备。 移动设备不会自动播放大视频。 这就是 Divi 默认在移动设备上显示后备图像的原因。
  2. 使用小视频。 对于背景视频，您可以使用 720p 分辨率，因为背景是覆盖视频的内容/文本的第二个想法。 质量不会受到太大影响，您会注意到。
  3. 考虑叠加。 在视频顶部添加半透明颜色叠加层将帮助您使用较小的文件大小，因为它会隐藏质量较低的视频的杂乱细节。 此外，它会使您的文本更加突出。
  4. 不要使用音频。 你不需要视频背景的声音，所以把它拿出来。 这将减少文件大小。
  5. 使用 mp4 和 webm 格式来支持跨浏览器。

暂停视频？

您可能已经在背景选项下的设置中看到了此选项。

在某些情况下，视频可能会与其他视频背景播放声音发生冲突。 此选项有助于一次只播放一个视频声音。

Divi 视频黑客

还有一些更高级的视频和视频背景自定义，您可能会发现它们很有帮助。 这里有一些。

调整播放按钮的大小

如果您想更改播放按钮的大小，请转到高级选项卡下的视频模块设置，然后在标有“视频图标”的框中输入以下自定义 CSS： 

Font-size: 10rem;
Line-height: 10rem;
Margin-top: -5rem;
Margin-left: -5rem;

您可以将值调整为所需的大小。 只需确保 font-size 和 line-height 始终保持不变，而 margin-top 和 margin-bottom 始终保持为字体大小一半的负值。 例如，如果您想让它变小，则值为。 

Font-size: 4rem;
Line-height: 4rem;
Margin-top: -2rem;
Margin-left: -2rem;

如何阻止视频背景在单击时暂停

在某些情况下，您可能会发现单击视频背景会暂停视频。 您可以通过将以下自定义 CSS 添加到子主题（或主题定制器 > 附加 CSS）中的 style.css 文件来禁用此功能：

.et_pb_section_video_bg video {
pointer-events: none;
}

如何停止循环播放视频背景

您可能已经从我们的一篇较早的帖子中记住了这个提示。 默认情况下，视频背景将继续循环播放。 这是故意的，因为这通常是您希望视频背景执行的操作。 但是，如果您只想显示一次背景视频然后退出，则可以通过转到Divi > Theme Options > Integration并在以下内容中输入以下内容来禁用循环操作： 

<script>
(function($) {
    $(document).ready(function() {
        $('.no-loop .et_pb_section_video_bg').each(function() {
            $(this).find('video').removeAttr('loop');
        });
    });
})(jQuery);
</script>

Divi 的视频尺寸

我不想在没有提及视频尺寸的情况下结束帖子。 考虑到所有视频和网站都不同，对于使用什么尺寸没有明确的规定。 720p (1280×720) 视频在 1920×1080 屏幕上拉伸可能看起来很棒，而另一个则看起来很糟糕。 在为您的网站决定视频的尺寸或分辨率时，您可以遵循 Divi 列布局和模块的图像尺寸作为一般准则。 简而言之，您的视频应该最接近它所在列的宽度，而不会下沉。 因此，如果您有一个最大宽度为 1080 像素的全宽列，那么您不需要分辨率大于 720p (1280×720) 的视频。 但是，如果您使用的视频背景跨越浏览器的整个宽度，则可能需要提高到 1080p (1920×1080)，以便在较大的显示器上跨越浏览器的整个宽度时，它不会看起来有颗粒感。

如果您打算依靠第三方视频专业人士为网络准备视频，这里是 youtube 推荐的视频分辨率列表。

2160p：3840×2160
1440p：2560×1440
1080p：1920×1080
720p：1280×720
480p：854×480
360p：640×360
240p：426×240

它们遵循 16:9 的纵横比，因此您不会看到视频两侧的黑条。

Vimeo 还提供视频指南。 我特别喜欢 Vimeo 关于视频压缩基础的帖子。

最后的想法

在很长一段时间内，视频将继续成为我们在线体验不可或缺的一部分。 因此，在将视频添加到网站时，了解自己在做什么非常重要。 如果您决定在您的网站中使用视频，Divi 会使该过程变得非常简单，为自托管视频提供跨浏览器解决方案，并为第三方嵌入提供方便的解决方案。 但 Divi 不能为你做所有的事情。 希望这篇文章能帮助您选择正确的视频并为网络做好准备。

我期待在评论中收到您的来信。