Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

如何为 ExoClick In-stream（视频）广告位动态屏蔽广告类型

在本教程中，我们将演示如何动态地 阻止 视频（流内） 根据广告类型投放广告活动。

这种方法可以应用于各种场景，但一个常见用途是：当你作为发布商，希望向同意的用户展示某些类型的广告，同时屏蔽那些不接受你网站条款和条件的用户的特定广告活动时，使用这种技术。

为了说明这一思路，我们使用原生 JS 创建了两个代码片段。在第一个示例中，我们演示如何根据 URL 参数阻止视频广告。第二个示例模拟了用户同意存储在浏览器本地存储中的情况。在这两种情况下，我们都在利用 Exoclick 的 block-ad-types 功能。

为了展示流内广告，我们使用 Fluid Player，这是一个免费的开源 HTML5 播放器，兼容 VAST 和 VPAID 格式。

请记住，如果你的设置不同，你需要调整此代码以符合播放器要求。不过， block-ad-types 功能的核心逻辑保持不变。

示例 1 - 根据 URL 参数阻止流内广告类型

这是一个相当直接的逻辑，与基础的 Fluid Player 集成差别不大：先加载标准视频播放器，然后将 Fluid Player 附加其上。

主要区别在于，在将 Fluid Player 附加到标准视频播放器之前，我们会执行 URL 参数检查，在这里我们获取 user_verified.

定义好后，我们有一个 if 语句来设置 dynamicVastTag 变量，以便为未验证用户阻止 NSFW 广告，或为已验证用户允许所有广告。

一旦该变量设置完毕，我们就继续加载 Fluid Player 配置对象，并确保将 dynamicVastTag 变量作为 vastTag 属性的值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>流内（视频）广告 | block-ad-types</title>

    <!-- 导入 Fluid Player -->
    <script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>

    <!-- 初始化 Fluid Player 的实例 -->
    <script>
      console.log("正在初始化 fluid")
      var player = fluidPlayer("example-player");
    </script>

  </head>

  <body>
    <h1>使用 URL 参数的流内（视频）广告 block-ad-types</h1>

    <!-- 常规 <video> 播放器 -->
    <div class="video-wrapper">
      <video
        id="example-player"
        muted
        style="width: 50vw; height: 500px; margin: 0 auto; padding: 0"
      >
        <source
          src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
          type="video/mp4"
        />
        您的浏览器不支持 video 标签。
      </video>
    </div>

    <!-- 设置 Fluid Player 配置的脚本 -->
    <script>
      
      // 从 URL 参数中获取 user_verified 值的函数
      const userVerified = new URLSearchParams(window.location.search).get(
        "user_verified"
      );

      // 根据 URL 参数定义被阻止的广告类型
      let dynamicVastTag =
        "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101"; // 阻止 NSFW 广告
      if (userVerified === "1") {
        dynamicVastTag = "https://s.magsrv.com/v1/vast.php?idzone=5532704";  // 如果用户已验证，则显示所有广告
      }

      var player = fluidPlayer("example-player", {
        layoutControls: {
          primaryColor: "#FF0000",
          timelinePreview: {
            file: "thumbnails.vtt",
            type: "VTT",
          },
          controlForwardBackward: {
            show: true,
            doubleTapMobile: false,
          },
        },
        vastOptions: {
          adList: [
            {
              roll: "preRoll",
              vastTag: dynamicVastTag,
              timer: 5,
            },
          ],
        },
      });
    </script>
  </body>
</html>

示例 2 - 基于本地存储数据阻止流内广告类型

此实现与前一个不同，它使用本地存储来管理用户同意，而不是 URL 参数。代码是模块化的，分别有创建视频播放器和 Fluid Player 配置的独立函数。

这个 <head> HTML 的该部分包含三个主要函数，它们根据用户同意控制广告投放：

  • insertVideoPlayer 创建一个视频播放器元素并将其添加到网页中。

  • fluidPlayerConfig 生成 Fluid Player 的配置对象。此函数的关键逻辑在于它如何选择广告 URL：如果用户尚未接受条款（false），它会添加 &block_ad_types=101 到 URL 中以阻止某些广告。如果用户已接受（true），则使用标准 URL，允许所有广告。

  • insertFluidPlayer 将所有内容串联起来。它首先使用 insertVideoPlayer 创建视频播放器，然后使用为用户同意量身定制的 playerConfig 中的特定配置将 Fluid Player 附加到播放器上。

在 <body>，最终脚本会在页面加载时检查本地存储中的用户同意并据此渲染播放器。如果未给出同意，但用户随后通过点击按钮接受条款，则播放器会使用更新后的权限重新初始化。

上一页如何使用 data-block-ad-types 动态屏蔽广告类型

这有帮助吗？