refactor: 💡 (xgplayer-ads) 完善IMA SDK集成能力

2025-04-05 03:05:02 +08:00 · 2024-06-06 21:29:56 +08:00 · 2024-06-06 21:29:56 +08:00 · a1f2e33e4d
commit a1f2e33e4d
parent 95e04d34ca
13 changed files with 694 additions and 66 deletions
--- a/fixtures/ads/index.html
+++ b/fixtures/ads/index.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="referrer" content="no-referrer" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+
+    <style>
+      h4 {
+        margin-block-start: 0.2em;
+        margin-block-end: 0.2em;
+      }
+      p {
+        line-height: 18px;
+        display: block;
+        line-height: 16px;
+        /* margin: 10px; */
+        margin-block-start: 0.4em;
+        margin-block-end: 0.4em;
+      }
+    </style>
+
+    <!-- IMA3 SDK (Client Side), production sdk: https://imasdk.googleapis.com/js/sdkloader/ima3.js -->
+    <script
+      type="text/javascript"
+      src="https://imasdk.googleapis.com/js/sdkloader/ima3_debug.js"
+    ></script>
+  </head>
+
+  <body>
+    <div id="video" style="margin: 0 auto"></div>
+    <script type="module" defer src="./index.js"></script>
+  </body>
+</html>
--- a/fixtures/ads/index.js
+++ b/fixtures/ads/index.js
@ -0,0 +1,42 @@
+import Player from '../../packages/xgplayer/src/index.umd'
+import AdPlugin from '../../packages/xgplayer-ads/src'
+
+window.player = new Player({
+  id: 'video',
+  url: '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo-720p.mp4',
+  autoplay: true,
+  width: '80%',
+  height: 700,
+  ignores:[],
+  plugins: [AdPlugin],
+  ad: {
+    adType: 'ima'
+  }
+})
+
+player.on('adPlay', function (e) {
+  console.log('=====> AD_PLAY', e)
+})
+
+player.on('adPause', function (e) {
+  console.log('=====> AD_PAUSE', e)
+})
+
+
+
+// Request video ads.
+const adsRequest = new google.ima.AdsRequest()
+adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
+  'iu=/21775744923/external/single_ad_samples&sz=640x480&' +
+  'cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&' +
+  'output=vast&unviewed_position_start=1&env=vp&impl=s&correlator='
+
+// Specify the linear and nonlinear slot sizes. This helps the SDK to
+// select the correct creative if multiple are returned.
+adsRequest.linearAdSlotWidth = 640
+adsRequest.linearAdSlotHeight = 400
+
+adsRequest.nonLinearAdSlotWidth = 640
+adsRequest.nonLinearAdSlotHeight = 150
+
+player.plugins.ad.requestAd(adsRequest)
--- a/fixtures/xgplayer/index.html
+++ b/fixtures/xgplayer/index.html
@ -96,50 +96,6 @@
      </div>
    </div>
    <div id="video1" style="margin: 0 auto"></div>
-    <!-- <div class="pannel">
-      <div class="tool">
-        <button type="submit" class="btn" id="js-destroy0" onclick="window.destroy(0)">
-          销毁
-        </button>
-        <button type="submit" class="btn" id="js-reinit0" onclick="window.init(0)">
-          重新初始化
-        </button>
-        <button type="submit" class="btn" id="js-playnext0" onclick="window.playNext(0)">
-          播放下一个
-        </button>
-        <button
-          type="submit"
-          class="btn"
-          id="js-changelang0"
-          onclick="window.changeLang(0)"
-        >
-          切换语言
-        </button>
-        <button
-          type="submit"
-          class="btn"
-          id="js-changelang0"
-          onclick="window.createDot(0)"
-        >
-          添加预览点
-        </button>
-      </div>
-      <div class="message-pannel">
-        <div class="message-info" id="js-show-lang0">
-          <h4>current lang:</h4>
-        </div>
-
-        <div class="message-info" id="js-show-log0">
-          <h4>log info:</h4>
-        </div>
-      </div>
-    </div> -->
-    <script></script>
    <script type="module" defer src="./index.js"></script>
-    <script>
-      // window.onload = function(){
-      //   window.initPlayer()
-      // }
-    </script>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@ -15,6 +15,7 @@
    "dev:dash": "yarn libd dev fixtures/dash",
    "dev:music": "yarn libd dev fixtures/music",
    "dev:subtitle": "yarn libd dev fixtures/subtitle",
+    "dev:ads": "yarn libd dev fixtures/ads",
    "build": "yarn libd build",
    "build:all": "yarn libd build -a",
    "release": "yarn libd release",
--- a/packages/xgplayer-ads/README.md
+++ b/packages/xgplayer-ads/README.md
@ -8,7 +8,7 @@ xgplayer-ads 插件内提供了对 'Google IMA', 'Google DAI' 符合VAST、VMAP

 ```javascript
 import Player from "xgplayer"
-import { IMAPlugin } from "xgplayer-ads"
+import AdPlugin, { IMA } from "xgplayer-ads"
 import "xgplayer/dist/xgplayer.min.css"

 const player = new Player({
@ -17,13 +17,13 @@ const player = new Player({
    autoplay: true,
    height: window.innerHeight,
    width: window.innerWidth,
-    plugins: [IMAPlugin],
-    ima: {
-      
+    plugins: [AdPlugin],
+    ad: {
+      adType: IMAPlugin
    }
 })

-player.on('canplay', ()=>{
+player.on('adPlay', ()=>{
    // do something
 })

@ -34,18 +34,77 @@ player.on('canplay', ()=>{

 | 配置字段 | 默认值 | 含义 |
 | ------ | -------- | ----- |
-| maxBufferLength | 40 | 播放的最大的buffer长度（s） |
-| minBufferLength | 5 |  播放的最小的buffer长度（s）|
-| disableBufferBreakCheck | false | 是否开启卡顿超时检测 |
-| waitingTimeOut | 15s | 卡顿超时时间 |
-| waitingInBufferTimeOut | 5s | 在buffer区间内的卡顿超时时间 |
-| waitJampBufferMaxCnt | 3 | 一次播放中在buffer区间内卡顿超时最多可以seek调整几次 |
-| chunkSize | 15625 | 第一次请求的数据的size长度 |
-| tickInSeconds | 0.1 | 驱动下载的timer的时间间隔 |
-| segmentDuration | 5s | 一次下载数据的最小视频时长|
-| onProcessMinLen | 1024 | fetch每次回调数据的最小长度|
-| retryCount | 2 | loader请求失败时的重试次数 |
-| retryDelay | 1000 | 重试的时间间隔（ms） |
-| timeout | 3000 | loader请求的超时时间(ms) |
-| enableWorker | false | transmux是否使用worker|
+| locale |  |  |

+
+事件（Events）
+
+>> 广告事件独立于普通视频播放事件，可通过 on 监听
+
+```javascript
+player.on('adPlay', ()=>{
+    // do something
+})
+```
+
+| 事件名 | 含义 |
+| ------ | ----- |
+| adPlay | 当广告启播时，发布此事件 |
+| adPause | 当广告暂停时，发布此事件 |
+
+## IMA
+
+[IMA SDK for HTML5](https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side)
+
+### Locale
+
+Call setLocale() to localize language text, for more details see [Localizing for language and locale](https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/localization)
+
+```javascript
+google.ima.settings.setLocale('zh-CN');
+```
+
+### VPAID
+
+请参考 [IAB VPAID](https://iabtechlab.com/standards/video-player-ad-interface-definition-vpaid/) 页面了解详情。
+
+1. 如何启用 VPAID？
+google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED);
+
+### 使用方式
+
+
+## ADBlocker
+
+如何识别浏览器启用插件 ADBlocker？
+
+TODO: 待调研
+
+## AD UI 设计原则
+
+贴片广告UI在实施时，需要获取广告的状态，并且可能和主视频的UI耦合。在具体实施时应权衡影响，在不集成广告插件时应最小化减少对主包体积的影响，需制定整体的设计原则。
+
+### 设计要点
+1. AD UI应尽可能独立于 xgplayer 
+2. 广告的状态应尽可能独立于 xgplayer 中抽离出来，并通过插件的方式获取
+    
+    - 贴片广告UI和正片差异化很大时，如何实现？
+    - 贴片广告UI和正片差异化不大时，需要复用控制条样式，并进行一些小的修改，如何实现？
+
+
+### 广告状态、事件、方法的实现
+
+1. 广告状态
+
+    - 广告是否暂停 : `player.adPaused`
+    - 广告是否结束 : `player.adEnded`
+
+1. 广告事件
+
+```JavaScript
+import Events from "xgplayer"
+
+player.on([Events.AD_PLAY, Events.AD_PAUSE], ()=>{
+    // do something
+})
+```
--- a/packages/xgplayer-ads/package.json
+++ b/packages/xgplayer-ads/package.json
@ -22,7 +22,8 @@
    "dist"
  ],
  "dependencies": {
-    "eventemitter3": "^4.0.7"
+    "eventemitter3": "^4.0.7",
+    "xgplayer-streaming-shared": "3.0.19-rc.2"
  },
  "peerDependencies": {
    "xgplayer": "3.0.19-rc.2",
--- a/packages/xgplayer-ads/src/baseAdManager.js
+++ b/packages/xgplayer-ads/src/baseAdManager.js
@ -0,0 +1,43 @@
+import { EventEmitter } from 'eventemitter3'
+
+export class BaseAdManager extends EventEmitter {
+  constructor (options = {}) {
+    super()
+
+    this.options = options
+    this.player = options.player
+    this.mediaElement = options.player.media || options.player.video
+
+    /**
+     * @type {boolean}
+     * @description Whether in the advertising process
+     */
+    this._isAdRunning = false
+    /**
+     * @type {boolean}
+     * @description Whether in ad pause state.
+     *  When the ad is paused, the video player is paused.
+     */
+    this._isAdPaused = true
+    /**
+     * @type {boolean}
+     * @description Whether the video has ended
+     */
+    this._isMediaEnded = false
+  }
+
+  /**
+   * @return {boolean}
+   */
+  isFullScreen () {
+    return !!this.player.fullscreen
+  }
+
+  get paused () {
+    return this._isAdPaused
+  }
+
+  get isAdRunning () {
+    return this._isAdRunning
+  }
+}
--- a/packages/xgplayer-ads/src/events.js
+++ b/packages/xgplayer-ads/src/events.js
@ -0,0 +1,15 @@
+
+export const AD_PLAY = 'adPlay'
+export const AD_PAUSE = 'adPause'
+
+// IMA Specific Events
+export const IMA_AD_MANAGER_LOADED = 'ima_ad_manager_loaded'
+export const IMA_AD_PAUSE = 'ima_ad_pause'
+export const IMA_AD_ENDED = 'ima_ad_ended'
+export const IMA_AD_SKIPPED = 'ima_ad_skipped'
+export const IMA_AD_COMPLETE = 'ima_ad_complete'
+export const IMA_AD_ERROR = 'ima_ad_error'
+export const IMA_AD_TIME_UPDATE = 'ima_ad_time_update'
+export const IMA_AD_VOLUME_CHANGE = 'ima_ad_volume_change'
+export const IMA_AD_SEEKING = 'ima_ad_seeking'
+export const IMA_AD_SEEKED = 'ima_ad_seeked'
--- a/packages/xgplayer-ads/src/imaAdManager.js
+++ b/packages/xgplayer-ads/src/imaAdManager.js
@ -0,0 +1,352 @@
+/* global google */
+import { Events } from 'xgplayer'
+import { Logger } from 'xgplayer-streaming-shared'
+import { BaseAdManager } from './baseAdManager'
+import * as ADEvents from './events'
+
+const logger = new Logger('AdsPluginImaAdManager')
+
+// TODO: delete
+Logger.enable()
+
+export class ImaAdManager extends BaseAdManager {
+  constructor (options = {}) {
+    super(options)
+
+    if (!google?.ima) {
+      throw 'google.ima sdk is not loaded'
+    }
+
+    this.displayContainer = null
+    this.adsLoader = null
+    this.adsManager = null
+  }
+
+  init () {
+    this._initMediaEvents()
+    this._initContainer()
+    this._initLoader()
+  }
+
+  destroy () {
+    super.destroy()
+
+    this._removeMediaEvents()
+    this._destroyLoader()
+  }
+
+  /**
+   * @private
+   */
+  _initMediaEvents () {
+    const { player } = this
+
+    player.on(Events.VIDEO_RESIZE, this.onMediaResize)
+    player.on(Events.ENDED, this.onMediaEnded)
+  }
+
+  /**
+   * @private
+   */
+  _removeMediaEvents () {
+    const { player } = this
+
+    player.off(Events.VIDEO_RESIZE, this.onMediaResize)
+    player.off(Events.ENDED, this.onMediaEnded)
+  }
+
+  /**
+   * @private
+   */
+  _initContainer () {
+    const { displayContainer } = this.options
+
+    this.displayContainer = new google.ima.AdDisplayContainer(
+      displayContainer,
+      this.mediaElement
+    )
+    // TODO: Must be done through a user action on mobile devices.
+    this.displayContainer.initialize()
+  }
+
+  /**
+   * Initializes the ads loader.
+   * @private
+   */
+  _initLoader () {
+    // Create ads loader.
+    const adsLoader = new google.ima.AdsLoader(this.displayContainer)
+
+    // Listen and respond to ads loaded and error events.
+    adsLoader.addEventListener(
+      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
+      this.onAdsManagerLoaded,
+      false
+    )
+    adsLoader.addEventListener(
+      google.ima.AdErrorEvent.Type.AD_ERROR,
+      this.onAdError,
+      false
+    )
+
+    this.adsLoader = adsLoader
+  }
+
+  /**
+   * Destroy the ads loader.
+   * @private
+   */
+  _destroyLoader () {
+    const { adsLoader } = this
+
+    if (adsLoader) {
+      return
+    }
+
+    adsLoader.removeEventListener(
+      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
+      this.onAdsManagerLoaded,
+      false
+    )
+    adsLoader.removeEventListener(
+      google.ima.AdErrorEvent.Type.AD_ERROR,
+      this.onAdError,
+      false
+    )
+  }
+
+  /**
+   * End event listener to tell the SDK can play any post-roll ads.
+   * @private
+   */
+  onMediaEnded = () => {
+    // An ad might have been playing in the content element, in which case the
+    // content has not actually ended.
+    if (this._isAdRunning) return
+    this._isMediaEnded = true
+    this.adsLoader?.contentComplete()
+  }
+
+  /**
+   * End event listener to tell the SDK can play any post-roll ads.
+   * @private
+   */
+  onMediaResize = () => {
+    const { mediaElement } = this
+    const viewMode = this.isFullScreen()
+      ? google.ima.ViewMode.FULLSCREEN
+      : google.ima.ViewMode.NORMAL
+    this.adsManager?.resize(mediaElement.offsetWidth, mediaElement.offsetHeight, viewMode)
+  }
+
+  /**
+   * Handles the ad manager loading and sets ad event listeners.
+   * @param {!google.ima.AdsManagerLoadedEvent} ev
+   * @private
+   */
+  onAdsManagerLoaded = ev => {
+    const { player } = this
+
+    // Get the ads manager.
+    const adsRenderingSettings = new google.ima.AdsRenderingSettings()
+    adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true
+    const adsManager = (this.adsManager = ev.getAdsManager(
+      this.mediaElement,
+      adsRenderingSettings
+    ))
+
+    logger.log('AdManager Loaded', adsManager)
+
+    const cuePoints = adsManager.getCuePoints()
+    if (cuePoints.length) {
+      console.log('cuePoints', cuePoints)
+    }
+
+    this._initAdsManagerEventListeners()
+
+    try {
+      const viewMode = this.isFullScreen()
+        ? google.ima.ViewMode.FULLSCREEN
+        : google.ima.ViewMode.NORMAL
+
+      adsManager.init(
+        this.mediaElement.offsetWidth,
+        this.mediaElement.offsetHeight,
+        viewMode
+      )
+
+      if (this.mediaPlayed) {
+        adsManager.start()
+      } else {
+        player.once(Events.PLAY, () => {
+          this.mediaPlayed = true
+          adsManager.start()
+        })
+      }
+    } catch (adError) {
+      this.onAdEvent()
+    }
+
+    this.emit(ADEvents.IMA_AD_MANAGER_LOADED, {
+      adsManager
+    })
+  }
+
+  /**
+   * Handles the ad manager loading and sets ad event listeners.
+   * @private
+   */
+  _initAdsManagerEventListeners () {
+    const adsManager = this.adsManager
+
+    adsManager
+      .addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, this.onAdError)
+
+    // https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/js/google.ima.AdEvent
+    const adEvents = [
+      google.ima.AdEvent.Type.LOADED,
+      google.ima.AdEvent.Type.STARTED,
+      google.ima.AdEvent.Type.RESUMED,
+      google.ima.AdEvent.Type.PAUSED,
+      google.ima.AdEvent.Type.COMPLETE,
+      google.ima.AdEvent.Type.ALL_ADS_COMPLETED,
+      google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
+      google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED
+    ]
+    adEvents.forEach(type => {
+      adsManager.addEventListener(type, this.onAdEvent)
+    })
+  }
+
+  /**
+   * Handles ad errors.
+   * @param {!google.ima.AdErrorEvent} ev
+   * @private
+   */
+  onAdError = ev => {
+    // Handle the error logging.
+    console.log(ev.getError())
+    this.adsManager?.destroy()
+  }
+
+  /**
+   * Handles actions taken in response to ad events.
+   * @param {!google.ima.AdEvent} ev
+   * @private
+   */
+  onAdEvent = ev => {
+    const { player } = this
+    // Retrieve the ad from the event. Some events (for example,
+    // ALL_ADS_COMPLETED) don't have ad object associated.
+    const ad = ev?.getAd()
+    let intervalTimer
+
+    logger.log('AdEvent', ev?.type, ev?.getAd())
+
+    switch (ev?.type) {
+      // Fires when ad data is available.
+      // This is the first event sent for an ad.
+      case google.ima.AdEvent.Type.LOADED: {
+        if (!ad.isLinear()) {
+          this.mediaElement?.play()
+        }
+        break
+      }
+      // Fires when media content should be resumed.
+      // This usually happens when an ad finishes or collapses.
+      case google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED: {
+        this._isAdRunning = false
+        player?.pause()
+        break
+      }
+      // Fires when media content should be paused.
+      // This usually happens right before an ad is about to cover the content.
+      case google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED: {
+        this._isAdRunning = true
+        if (!this._isMediaEnded) {
+          player?.play()
+        }
+        break
+      }
+      // Fires when the ad starts playing.
+      // Player can display a pause button and create an ad countdown timer.
+      case google.ima.AdEvent.Type.STARTED: {
+        if (ad.isLinear()) {
+          this._isAdPaused = false
+          this.player.emit(Events.PLAY, {
+            ad
+          })
+
+          // For a linear ad, a timer can be started to poll for
+          // the remaining time.
+          intervalTimer = setInterval(function () {
+            // Example: const remainingTime = adsManager.getRemainingTime();
+          }, 300) // every 300ms
+        }
+        break
+      }
+      // Fires when the ad is resumed.
+      // This event is sent when an ad is resumed after a pause.
+      case google.ima.AdEvent.Type.RESUMED: {
+        this._isAdPaused = false
+        this.player.emit(Events.PLAY, {
+          ad
+        })
+        break
+      }
+      // Fires when the ad is paused.
+      // This event is sent when an ad is paused before it finishes.
+      case google.ima.AdEvent.Type.PAUSED: {
+        this._isAdPaused = true
+        this.player.emit(Events.PAUSE, {
+          ad
+        })
+        break
+      }
+      // Fires when the ad completes playing.
+      // Player could remove the ad UI also start playing the next ad.
+      case google.ima.AdEvent.Type.COMPLETE:
+      default:
+        if (ad?.isLinear()) {
+          clearInterval(intervalTimer)
+        }
+        break
+    }
+  }
+
+  /**
+   * @param {!google.ima.AdsRequest} payload
+   * https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/js/google.ima.AdsRequest
+   */
+  requestAds (payload) {
+    this.adsManager?.destroy()
+
+    this.adsLoader?.contentComplete()
+    this.adsLoader?.requestAds(payload)
+  }
+
+  /**
+   * @public
+   */
+  pause () {
+    return this.adsManager?.pause()
+  }
+
+  /**
+   * @public
+   */
+  play () {
+    return this.adsManager?.resume()
+  }
+
+  /**
+   * @public
+   * @description Skips the current ad when AdsManager.getAdSkippableState() is true.
+   * When called under other circumstances, skip has no effect.
+   * After the skip is completed the AdsManager fires an AdEvent.SKIPPED event.
+   * AdsManager.skip() only skips ads if IMA does not render the 'Skip ad' button.
+   */
+  skip () {
+    return this.adsManager?.skip()
+  }
+}
--- a/packages/xgplayer-ads/src/index.js
+++ b/packages/xgplayer-ads/src/index.js
@ -0,0 +1,109 @@
+import { BasePlugin, Plugin, Util } from 'xgplayer'
+import { Logger } from 'xgplayer-streaming-shared'
+import * as AdEvents from './events'
+import { ImaAdManager } from './imaAdManager'
+import './index.scss'
+
+const logger = new Logger('AdsPlugin')
+
+export default class AdsPlugin extends Plugin {
+  static get pluginName () {
+    return 'ad'
+  }
+  get version () {
+    return __VERSION__
+  }
+
+  afterCreate () {
+    this.csManager = undefined
+  }
+
+  beforePlayerInit () {
+    this._initHooks()
+    this._proxyPlayer()
+
+    const promise = new Promise((resolve, reject) => {
+      if (this.config.adType === 'ima') {
+        this.initClientSideAd()
+
+        this.csManager?.on(AdEvents.IMA_AD_MANAGER_LOADED, () => {
+          resolve()
+        })
+      }
+    })
+
+    return promise
+  }
+
+  /**
+   * @private
+   */
+  _initHooks () {
+    this.player.useHooks('play', () => {
+      if (this.csManager?.isAdRunning) {
+        this.csManager?.play()
+        return false
+      }
+    })
+    this.player.useHooks('pause', () => {
+      if (this.csManager?.isAdRunning) {
+        this.csManager?.pause()
+        return false
+      }
+    })
+  }
+
+  /**
+   * @private
+   */
+  _proxyPlayer () {
+    const { player } = this
+
+    BasePlugin.defineGetterOrSetter(player, {
+      adPaused: {
+        get: () => {
+          const media = player.media || player.video
+          logger.log(
+            'csManager.paused',
+            this.csManager?.isAdRunning,
+            this.csManager.paused,
+            this.csManager?.isAdRunning
+              ? this.csManager.paused
+              : media
+                ? media.paused
+                : true
+          )
+          return this.csManager?.isAdRunning
+            ? this.csManager.paused
+            : media
+              ? media.paused
+              : true
+        },
+        configurable: true
+      }
+    })
+  }
+
+  render () {
+    return Util.createDom('xg-ad', '', {}, 'xgplayer-ads')
+  }
+
+  initClientSideAd () {
+    if (this.config.adType === 'ima') {
+      this.initImaAd()
+    }
+  }
+
+  initImaAd () {
+    this.csManager = new ImaAdManager({
+      displayContainer: this.root,
+      player: this.player
+    })
+
+    this.csManager.init()
+  }
+
+  destroy () {
+    this.csManager?.destroy()
+  }
+}
--- a/packages/xgplayer-ads/src/index.scss
+++ b/packages/xgplayer-ads/src/index.scss
@ -0,0 +1,7 @@
+.xgplayer-ads {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
--- a/packages/xgplayer/src/player.js
+++ b/packages/xgplayer/src/player.js
@ -135,6 +135,13 @@ class Player extends MediaProxy {
     */
    this._state = STATES.INITIAL

+    /**
+     * @public
+     * @readonly
+     * @type { boolean }
+     */
+    this.isAd = false
+
    /**
     * @public
     * @readonly
--- a/packages/xgplayer/src/plugins/play/index.js
+++ b/packages/xgplayer/src/plugins/play/index.js
@ -29,10 +29,10 @@ class Play extends IconPlugin {
    this.bind(['touchend', 'click'], this.btnClick)

    this.on([Events.PAUSE, Events.ERROR, Events.EMPTIED], () => {
-      this.animate(player.paused)
+      this.animate(player.isAd ? player.adPaused : player.paused)
    })
    this.on(Events.PLAY, () => {
-      this.animate(player.paused)
+      this.animate(player.isAd ? player.adPaused : player.paused)
    })
    this.animate(true)
  }