สร้างคลาสตัวจัดการโฆษณา

ใน ads_manager.js ให้กำหนดคลาส Wrapper สำหรับ StreamManager ของ IMA SDK ที่สร้างคำขอสตรีม รับไฟล์ Manifest ของพ็อดโฆษณา ฟังเหตุการณ์สตรีม IMA และส่งเหตุการณ์ emsg ไปยัง IMA SDK

ใน ads_manager.js แอปตัวอย่าง IMA HbbTV จะตั้งค่าเมธอดต่อไปนี้

  • requestStream()
  • onStreamEvent()
  • onEmsgEvent()
  • loadAdPodManifest()

เริ่มต้นใช้งาน Ad Manager

เริ่มต้นคลาสตัวจัดการโฆษณาและตั้งค่า Listener สำหรับเหตุการณ์สตรีม IMA ในการเรียกนี้ ให้ตั้งค่าเครื่องจัดการเหตุการณ์ emsg ด้วยเมธอด VideoPlayer.setEmsgEventHandler()

/**
 * Wraps IMA SDK ad stream manager.
 * @param {!VideoPlayer} videoPlayer Reference an instance of the wrapper from
 * video_player.js.
 */
var AdManager = function(videoPlayer) {
  this.streamData = null;
  this.videoPlayer = videoPlayer;
  // Ad UI is not supported for HBBTV, so no 'adUiElement' is passed in the
  // StreamManager constructor.
  this.streamManager = new google.ima.dai.api.StreamManager(
      this.videoPlayer.videoElement);
  this.streamManager.addEventListener(
      [
        google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED,
        google.ima.dai.api.StreamEvent.Type.ERROR,
        google.ima.dai.api.StreamEvent.Type.CLICK,
        google.ima.dai.api.StreamEvent.Type.STARTED,
        google.ima.dai.api.StreamEvent.Type.FIRST_QUARTILE,
        google.ima.dai.api.StreamEvent.Type.MIDPOINT,
        google.ima.dai.api.StreamEvent.Type.THIRD_QUARTILE,
        google.ima.dai.api.StreamEvent.Type.COMPLETE,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED,
        google.ima.dai.api.StreamEvent.Type.AD_PROGRESS,
        google.ima.dai.api.StreamEvent.Type.PAUSED,
        google.ima.dai.api.StreamEvent.Type.RESUMED
      ],
      this.onStreamEvent.bind(this),
      false);

  this.videoPlayer.setEmsgEventHandler(this.onEmsgEvent, this);
};
ads_manager.js

ส่งคำขอสตรีมพ็อดโฆษณา

สร้างAdManager.requestStream()เมธอดเพื่อสร้างPodStreamRequestออบเจ็กต์โดยใช้รหัสเครือข่าย Ad Manager ของ Google และคีย์ชิ้นงานที่กำหนดเองของสตรีม ทดสอบแอป HbbTV โดยใช้สตรีมการแสดงโฆษณาพ็อด DASH ของ IMA ตัวอย่างที่มีพารามิเตอร์สตรีมต่อไปนี้

  • รหัสเครือข่าย: '21775744923'
  • คีย์เนื้อหาที่กำหนดเอง: 'hbbtv-dash'
/**
 * Makes a pod stream request.
 * @param {string} networkCode The network code.
 * @param {string} customAssetKey The custom asset key.
 */
AdManager.prototype.requestStream = function (networkCode, customAssetKey) {
  var streamRequest = new google.ima.dai.api.PodStreamRequest();
  var secretKey = getStreamSecretKeys();

  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.format = 'dash';

  if (secretKey.STREAM_CREATE_SECRET) {
    var expirationTime = Math.trunc(new Date().getTime() / 1000) + 3600;
    var params = {
      custom_asset_key: customAssetKey,
      exp: expirationTime,
      network_code: networkCode
    };
    streamRequest.authToken =
        this.generateAuthToken(params, secretKey.STREAM_CREATE_SECRET);
    debugView.log('AdsManager: make Auth-PodStreamRequest');
  } else {
    debugView.log('AdsManager: make PodStreamRequest without auth');
  }

  this.streamManager.requestStream(streamRequest);
};
ads_manager.js

รอเหตุการณ์สตรีมโฆษณา

สร้างเมธอด AdManager.onStreamEvent() เพื่อจัดการการตอบสนองของแอปต่อ เหตุการณ์สตรีม IMA, STREAM_INITIALIZED, AD_BREAK_STARTED และ AD_BREAK_ENDED

/**
 * Handles IMA playback events.
 * @param {!Event} event The event object.
 */
AdManager.prototype.onStreamEvent = function(event) {
  switch (event.type) {
    // Once the stream response data is received, generate pod manifest url
    // for the video stream.
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      debugView.log('IMA SDK: stream initialized');
      this.streamData = event.getStreamData();
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      break;
    // Hide video controls while ad is playing.
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      debugView.log('IMA SDK: ad break started');
      this.adPlaying = true;
      this.adBreakStarted = true;
      break;
    // Show video controls when ad ends.
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      debugView.log('IMA SDK: ad break ended');
      this.adPlaying = false;
      this.adBreakStarted = false;
      break;
    // Update ad countdown timers.
    case google.ima.dai.api.StreamEvent.Type.AD_PROGRESS:
      break;
    default:
      debugView.log('IMA SDK: ' + event.type);
      break;
  }
};
ads_manager.js

จัดการข้อมูลเมตาของสตรีมโฆษณา

หากต้องการส่งข้อมูลเหตุการณ์ emsg ไปยัง IMA ให้สร้างเมธอด AdManager.onEmsgEvent() โดยใช้เมธอด StreamManager.processMetadata() คลาสวิดีโอเพลเยอร์เรียกใช้เมธอดนี้ด้วยเมธอด VideoPlayer.setEmsgEventHandler()

/**
 * Callback on Emsg event.
 * Instructs IMA SDK to fire back VAST events accordingly.
 * @param {!Event} event The event object.
 */
AdManager.prototype.onEmsgEvent = function(event) {
  var data = event.event.messageData;
  var pts = event.event.calculatedPresentationTime;
  if ((data instanceof Uint8Array) && data.byteLength > 0) {
    this.streamManager.processMetadata('ID3', data, pts);
  }
};
ads_manager.js

โหลดไฟล์ Manifest ของพ็อดโฆษณา

สร้างAdManager.loadAdPodManifest()เมธอดเพื่อโหลดไฟล์ Manifest ของพ็อดโฆษณาล่วงหน้า ด้วยวิดีโอเพลเยอร์ สร้าง URL ของไฟล์ Manifest โดยใช้โครงสร้างในวิธี: ไฟล์ Manifest ของพ็อด DASH

/**
 * Creates DAI pod url and instructs video player to load manifest.
 * @param {string} networkCode The network code.
 * @param {string} customAssetKey The custom asset key.
 * @param {number} podDuration The duration of the ad pod.
 */
AdManager.prototype.loadAdPodManifest = function (networkCode, customAssetKey, podDuration) {
  if (!this.streamData) {
    debugView.log('AdsManager: No stream data available.');
    return;
  }

  var adBreakId = this.getAdBreakId();
  var expirationTime = Math.trunc(new Date().getTime() / 1000) + 3600;

  var params = {
    ad_break_id: adBreakId,
    custom_asset_key: customAssetKey,
    exp: expirationTime,
    network_code: networkCode,
    pd: podDuration
  };

  var secretKey = getStreamSecretKeys();
  var token = this.generateAuthToken(params, secretKey.MANIFEST_SECRET);
  var encodedToken = encodeURIComponent(token);

  var manifestUrl = 'https://dai.google.com/linear/pods/v1/dash/network/' +
    networkCode + '/custom_asset/' + customAssetKey + '/stream/' +
    this.streamData.streamId + '/ad_break_id/' + adBreakId +
    '/manifest.mpd?pd=' + podDuration + '&auth-token=' + encodedToken;

  this.videoPlayer.preload(manifestUrl);
};
ads_manager.js

แอปตัวอย่าง HbbTV ใช้ podId ที่ไม่ซ้ำกันซึ่งสร้างขึ้นแบบสุ่ม ในแอปเวอร์ชันที่ใช้งานจริง podId คือ จำนวนเต็มที่เริ่มต้นที่ 1 และเพิ่มขึ้นทีละ 1 สำหรับช่วงพักโฆษณาแต่ละช่วง ตรวจสอบว่า podIdมีค่าเดียวกันสำหรับผู้ชมทุกคนที่ดูช่วงพักโฆษณา หากต้องการรับ podId เราขอแนะนำให้ใช้ DAI Ad Break API ในสภาพแวดล้อมการผลิต ให้รวม podId และ podDuration ในเหตุการณ์สตรีม HbbTV AD_BREAK_ANNOUNCE

จากนั้นสร้างคลาสแอปพลิเคชันหลักสำหรับแอป HbbTV ที่โต้ตอบกับ การออกอากาศ HbbTV

ก่อนหน้า
ตั้งค่าคลาสโปรแกรมเล่น
ถัดไป
สร้างคลาสแอปพลิเคชัน