> For the complete documentation index, see [llms.txt](https://docs.exoclick.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.exoclick.com/tutorials/zh/jiao-cheng/fa-bu-shang-jiao-cheng/dynamically-block-ad-types-for-exoclick-in-stream-zones.md).

# 如何为 ExoClick 流内（视频）广告位动态屏蔽广告类型

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

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

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

为了展示流内广告，我们使用 [Fluid Player](https://www.fluidplayer.com/)，这是一个免费的开源 HTML5 播放器，兼容 VAST 和 VPAID 格式。

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

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

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

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

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

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

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

```html
<!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>

    <script>
      // 动态创建一个 <video> 元素，并将其放入给定 ID 参数的 div 中
      const insertVideoPlayer = (containerId) => {
        const videoPlayerContainer = document.getElementById(containerId);
        videoPlayerContainer.innerHTML = "";
        let video = document.createElement("video");
        video.id = "example-player";
        video.style.width = "700px";
        video.style.height = "500px";
        video.controls = true;

        let source = document.createElement("source");
        source.src =
          "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
        source.type = "video/mp4";

        video.appendChild(source);
        video.append("您的浏览器不支持 video 标签。");

        videoPlayerContainer.appendChild(video);
      };
    </script>

    <script>
      // 定义 Fluid Player 配置，包括根据用户同意决定阻止或显示哪些广告的动态 VAST 标签
      let fluidPlayerConfig = (acceptTerms) => {
        return {
          layoutControls: {
            primaryColor: "#FF0000",
            timelinePreview: {
              file: "thumbnails.vtt",
              type: "VTT",
            },
            controlForwardBackward: {
              show: true,
              doubleTapMobile: false,
            },
          },
          vastOptions: {
            adList: [
              {
                roll: "preRoll",
                vastTag: acceptTerms // 用户同意
                  ? "https://s.magsrv.com/v1/vast.php?idzone=5532704" // 显示所有广告
                  : "https://s.magsrv.com/v1/vast.php?idzone=5532704&block_ad_types=101", // 阻止 NSFW 广告
                timer: 5,
              },
            ],
          },
        };
      };
    </script>

    <!-- 这是将视频播放器和 Fluid Player 逻辑绑定并在界面中渲染内容的脚本 -->
    <script>
      let player;

      const insertFluidPlayer = (acceptTerms) => {
        insertVideoPlayer("video-wrapper");
        player = fluidPlayer("example-player", fluidPlayerConfig(acceptTerms));
      };
    </script>
  </head>

  <body>
    <h1>使用本地存储的流内（视频）广告 block-ad-types</h1>

    <button
      id="accept-terms-button"
      onclick="
      localStorage.setItem('userConsent', JSON.stringify(true));
      insertFluidPlayer(true);
      this.remove();
      "
    >
      接受条款
    </button>

    <!-- 视频播放器要附加到的容器 -->
    <!-- 必须在 Fluid Player 初始化之前定义 -->
    <div id="video-wrapper"></div>

    <!-- 此脚本检查本地存储中的用户同意并相应地初始化播放器 -->
    <script>
      const userConsentCookie = localStorage.getItem("userConsent");
      const parsedCookie = JSON.parse(userConsentCookie);

      if (parsedCookie === true) {
        insertFluidPlayer(true);
        const consentButton = document.getElementById("accept-terms-button");
        if (consentButton) {
          consentButton.remove();
        }
      } else {
        insertFluidPlayer(false);
      }
    </script>
  </body>
</html>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.exoclick.com/tutorials/zh/jiao-cheng/fa-bu-shang-jiao-cheng/dynamically-block-ad-types-for-exoclick-in-stream-zones.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
