在 Divi 中播放 HTML 视频时如何在特定时间显示按钮（或 CTA）

视频是网站的有效营销工具。 如果视频旨在在线推广和销售产品或服务，则应明确呼吁潜在客户采取行动。 提供号召性用语的一种简单方法是在视频附近添加一个他们可以单击的按钮。 但是，当用户观看视频时，某些按钮（或 CTA）在特定时间出现更有意义。 例如，可能有一段视频（例如 20 秒）提到了某个折扣或促销。 在特定时间出现“立即获取”按钮可能更有效。

在本教程中，我们将向您展示如何在 Divi 中播放 HTML 视频时在特定时间显示按钮（或 CTA）。 此技术将允许您使用通过 Divi Builder 设计的视频和按钮，然后在视频到达特定时间、用户暂停视频或视频结束时显示这些按钮。 它所需要的只是一些 JQuery 片段。 这个不需要插件。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

请注意当视频的当前时间达到 5 秒时顶部按钮如何出现，视频结束时底部按钮如何出现。

这里当视频的当前时间达到 5 秒时会出现相同的顶部按钮，当视频暂停时会出现底部按钮。

您还可以查看此代码笔以获取此功能的实时演示。

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

在 Divi 中播放视频时如何在特定时间显示按钮

上传足球俱乐部登陆页面布局

为了快速开始设计，我们将使用 Soccer Club Layout Pack 中的 Soccer Club Landing Page 布局。

为此，请打开设置菜单，单击从布局添加图标，然后找到并使用足球俱乐部登陆页面布局。

更新视频模块

在页面的顶部，您会在右栏中找到一个带有两个按钮的视频。 我们将使用这些元素来演示在播放视频时显示这些按钮的功能。

打开视频设置并上传/添加 MP4 文件格式的视频。 您还可以包含一个 WEBM 文件。

在高级选项卡下，为视频提供自定义 CSS ID：

• CSS ID：divi-video-container

更新顶部按钮

接下来，打开视频上方按钮模块的设置并更新变换选项，以便将按钮移动到视频后面，如下所示：

• 变换 平移 Y 轴：100%

然后为按钮提供以下 CSS 类：

• CSS 类：divi-delayed-button-1

更新底部按钮

接下来，打开视频下方按钮模块的设置并更新变换选项，使其向上移动按钮，如下所示：

• 变换 平移 Y 轴：-100%

然后为按钮提供以下 CSS ID：

• CSS ID：divi-delayed-button-2

由于我们不需要在预制布局中添加到按钮的动画，我们可以将它们去掉。 使用多选来选择两个按钮模块（在图层视图模式中）。 然后打开任一按钮模块的设置，将动画样式设置为无。

• 动画风格：无

添加代码

对于最后一步，我们需要添加 cust0m 代码。 为此，请在底部按钮下添加一个代码模块。

在代码设置代码框中，粘贴以下 CSS，确保将代码包装在样式标签中。

.divi-delayed-button-1,
.divi-delayed-button-2 {
  visibility: hidden;
  transition: all 400ms ease !important;
}
.divi-delayed-button-1.show-button,
.divi-delayed-button-2.show-button {
  visibility: visible;
  transform: none;
}

然后，将以下 JQuery 代码粘贴到 CSS 之后，确保将代码包装在脚本标签中。

(function ($) {
  $(document).ready(function () {
    //items
    $diviVideo = $("#divi-video-container video");
    videoElement = $("#divi-video-container video")[0];
    $delayedButton1 = $(".divi-delayed-button-1");
    $delayedButton2 = $(".divi-delayed-button-2");

    //add timeupdate event on video with a function.
    $diviVideo.on("timeupdate", function (e) {
      //add class to show button1 when specified currentTime is reached.
      if (e.target.currentTime >= 5) {
        $delayedButton1.addClass("show-button");
      }

      //add class to show button2 when video is paused or has ended
      if (videoElement.paused || videoElement.ended) {
        $delayedButton2.addClass("show-button");
      }
    });
  });
})(jQuery);

关于守则

CSS

首先，我们隐藏按钮并设置按钮动画的过渡持续时间。

.divi-delayed-button-1,
.divi-delayed-button-2 {
  visibility: hidden;
  transition: all 400ms ease !important;
}

然后我们在通过 JQuery 切换“show-button”类时显示按钮，并将转换设置为无，以便按钮返回到页面上的原始位置。

.divi-delayed-button-1.show-button,
.divi-delayed-button-2.show-button {
  visibility: visible;
  transform: none;
}

JQuery

我们要做的第一件事是定义我们将使用的变量。

    //items
    $diviVideo = $("#divi-video-container video");
    videoElement = $("#divi-video-container video")[0];
    $delayedButton1 = $(".divi-delayed-button-1");
    $delayedButton2 = $(".divi-delayed-button-2");

接下来，我们用一个函数在视频上添加timeupdate事件，这样我们就可以在播放过程中动态地确定视频的当前时间。 有关更多信息，请在此处阅读有关 timeupdate 事件的信息。

    //add timeupdate event on video with a function.
    $diviVideo.on("timeupdate", function (e) {

    });

在函数内部，我们使用if语句在视频的currentTime属性等于或大于 5 秒时显示按钮 1（顶部按钮）。

    //add timeupdate event on video with a function.
    $diviVideo.on("timeupdate", function (e) {

      //add class to show button1 when specified currentTime is reached.
      if (e.target.currentTime >= 5) {
        $delayedButton1.addClass("show-button");
      }

    });

注意： if语句的条件是e.target.currentTime >= 5但您可以更改它以在播放视频时在不同时间显示按钮。 例如，如果您想在视频的currentTime达到 20 秒时显示按钮，您可以将条件替换为e.target.currentTime >= 20 。

然后我们使用另一个if语句在视频暂停或结束时显示按钮 2（底部按钮）（使用暂停和结束的 HTMLMediaElement 属性。

    //add timeupdate event on video with a function.
    $diviVideo.on("timeupdate", function (e) {
      //add class to show button1 when specified currentTime is reached.
      if (e.target.currentTime >= 5) {
        $delayedButton1.addClass("show-button");
      }

      //add class to show button2 when video is paused or has ended
      if (videoElement.paused || videoElement.ended) {
        $delayedButton2.addClass("show-button");
      }
    });

最后结果

请注意当视频的当前时间达到 5 秒时顶部按钮如何出现，视频结束时底部按钮如何出现。

这里当视频的当前时间达到 5 秒时会出现相同的顶部按钮，当视频暂停时会出现底部按钮。

您还可以查看此代码笔以获取此功能的实时演示。

最后的想法

根据视频的当前时间显示按钮可以派上用场来营销您的产品和服务。 无论如何，任何成功的宣传视频都值得引人注目的号召性用语。 希望本教程能让您更好地了解如何利用 HTML 视频的功能在您想要的时间和地点提供强大的 CTA。

如果您对在 Divi 中使用 HTML 视频的其他创造性方式感兴趣，以下是您可能会喜欢的几篇文章：

• 如何在 Divi 中创建自定义 HTML 视频控件
• 为 HTML5 视频添加 3D 效果以在 Divi 中显示独特的产品动画
• 如何使用 Divi 中的显示/隐藏切换创建粘性促销视频

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

干杯!