หากต้องการพูดคุยและแสดงความคิดเห็นเกี่ยวกับผลิตภัณฑ์ของเรา โปรดเข้าร่วมช่อง Discord อย่างเป็นทางการของ Ad Manager ในเซิร์ฟเวอร์ชุมชนการโฆษณาและการวัดผลของ Google

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

ตั้งค่าคลาสโปรแกรมเล่น

ใน video_player.js ให้กำหนดคลาส Wrapper ของวิดีโอเพลเยอร์เพื่อเริ่มต้นและควบคุมเพลเยอร์ dash.js

ตั้งค่าเพลเยอร์บรอดแบนด์

กำหนดตำแหน่งที่จะวางเพลเยอร์บรอดแบนด์ในแอปโดยสร้างแท็กวิดีโอและ Wrapper ดังนี้

<div id="broadband-wrapper">
    <video id="broadband-video"></video>
</div>index.html

สร้างวิดีโอเพลเยอร์

เริ่มต้นคลาสวิดีโอเพลเยอร์ด้วยตัวแปรสำหรับองค์ประกอบ HTML, เพลเยอร์ dash.js และ Callback ที่เมธอดคลาสอื่นๆ ใช้ได้

/**
 * Video player wrapper class to control ad creative playback with dash.js in
 * broadband.
 */
var VideoPlayer = function() {
  this.videoElement = document.querySelector('video');
  this.broadbandWrapper = document.getElementById('broadband-wrapper');
  this.player = dashjs.MediaPlayer().create();
  this.onAdPodEndedCallback = null;

  // Function passed in VideoPlayer.prototype.setEmsgEventHandler.
  this.onCustomEventHandler = null;
  //  Scope (this) passed in VideoPlayer.prototype.setEmsgEventHandler.
  this.customEventHandlerScope = null;

  // Function to remove all of player event listeners.
  this.cleanUpPlayerListener = null;
  debugView.log('Player: Creating dash.js player');
};video_player.js

กำหนดฟังก์ชันควบคุมการเล่น

หากต้องการแสดงเพลเยอร์โฆษณาและแนบมุมมองวิดีโอ ให้สร้างเมธอด VideoPlayer.play() จากนั้นสร้างเมธอด VideoPlayer.stop() เพื่อจัดการการล้างข้อมูลหลังจากพ็อดโฆษณาเล่นจบ

/** Starts playback of ad stream. */
VideoPlayer.prototype.play = function() {
  debugView.log('Player: Start playback');
  this.show();
  this.player.attachView(this.videoElement);
};

/** Stops ad stream playback and deconstructs player. */
VideoPlayer.prototype.stop = function() {
  debugView.log('Player: Request to stop player');
  if (this.cleanUpPlayerListener) {
    this.cleanUpPlayerListener();
  }
  this.player.reset();
  this.player.attachView(null);
  this.player.attachSource(null);
  this.player = null;
  this.hide();
};video_player.js

โหลด Manifest ของสตรีมโฆษณาล่วงหน้า

หากต้องการตรวจสอบว่าโฆษณาโหลดเพียงพอระหว่างสตรีมเนื้อหาและก่อนที่ช่วงพักโฆษณาจะเริ่มขึ้น ให้ใช้ VideoPlayer.preload() และ VideoPlayer.isPreloaded()

1. โหลดสตรีมโฆษณาล่วงหน้า

สร้างเมธอด VideoPlayer.preload() เพื่อโหลดไฟล์ Manifest ของสตรีมโฆษณาล่วงหน้าและสร้างบัฟเฟอร์โฆษณาก่อนช่วงพักโฆษณา คุณต้องอัปเดตการตั้งค่าการสตรีมของเพลเยอร์ 'cacheInitSegments' เป็น true การอัปเดตการตั้งค่าจะช่วยให้แคชส่วนเริ่มต้นได้ ซึ่งจะช่วยหลีกเลี่ยงความล่าช้าเมื่อเปลี่ยนไปแสดงโฆษณา

/**
 * Starts ad stream prefetching into Media Source Extensions (MSE) buffer.
 * @param {string} url manifest url for ad stream playback.
 */
VideoPlayer.prototype.preload = function(url) {
  if (!this.player) {
    this.player = dashjs.MediaPlayer().create();
  }
  debugView.log('Player: init with ' + url);
  this.player.initialize(/* HTMLVideoElement */ null, url, /* autoplay */ true);

  this.player.updateSettings({
    'debug': {
      'logLevel': dashjs.Debug.LOG_LEVEL_WARNING,
      'dispatchEvent': true,  // flip to false to hide all debug events.
    },
    'streaming': {
      'cacheInitSegments': true,
    }
  });
  this.player.preload();
  this.attachPlayerListener();
  debugView.log('Player: Pre-loading into MSE buffer');
};video_player.js

2. ตรวจสอบบัฟเฟอร์โฆษณาที่โหลดล่วงหน้า

สร้างเมธอด VideoPlayer.isPreloaded() เพื่อตรวจสอบว่าบัฟเฟอร์โฆษณาโหลดล่วงหน้าเพียงพอเมื่อเทียบกับเกณฑ์บัฟเฟอร์ที่ตั้งไว้ในแอปหรือไม่ โดยทำดังนี้

// Ads will only play with 10 or more seconds of ad loaded.
var MIN_BUFFER_THRESHOLD = 10;video_player.js

/**
 * Checks if the ad is preloaded and ready to play.
 * @return {boolean} whether the ad buffer level is sufficient.
 */
VideoPlayer.prototype.isPreloaded = function() {
  var currentBufferLevel = this.player.getDashMetrics()
      .getCurrentBufferLevel('video', true);
  return currentBufferLevel >= MIN_BUFFER_THRESHOLD;
};video_player.js

แนบ Listener ของเพลเยอร์

หากต้องการเพิ่ม Listener เหตุการณ์สำหรับเหตุการณ์ของเพลเยอร์ dash.js ให้สร้างเมธอด VideoPlayer.attachPlayerListener(): PLAYBACK_PLAYING, PLAYBACK_ENDED, LOG และ ERROR เมธอดนี้ยังจัดการเหตุการณ์สำหรับ URI ของรหัส Scheme นอกเหนือจากการตั้งค่าฟังก์ชันการล้างข้อมูลเพื่อนำ Listener เหล่านี้ออก

var SCHEME_ID_URI = 'https://developer.apple.com/streaming/emsg-id3';video_player.js

/** Attaches event listener for various dash.js events.*/
VideoPlayer.prototype.attachPlayerListener = function() {
  var playingHandler = function() {
    this.onAdPodPlaying();
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['PLAYBACK_PLAYING'], playingHandler);
  var endedHandler = function() {
    this.onAdPodEnded();
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['PLAYBACK_ENDED'], endedHandler);
  var logHandler = function(e) {
    this.onLog(e);
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['LOG'], logHandler);
  var errorHandler = function(e) {
    this.onAdPodError(e);
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['ERROR'], errorHandler);

  var customEventHandler = null;
  if (this.onCustomEventHandler) {
    customEventHandler =
        this.onCustomEventHandler.bind(this.customEventHandlerScope);
    this.player.on(SCHEME_ID_URI, customEventHandler);
  }

  this.cleanUpPlayerListener = function() {
    this.player.off(
        dashjs.MediaPlayer.events['PLAYBACK_PLAYING'], playingHandler);
    this.player.off(dashjs.MediaPlayer.events['PLAYBACK_ENDED'], endedHandler);
    this.player.off(dashjs.MediaPlayer.events['LOG'], logHandler);
    this.player.off(dashjs.MediaPlayer.events['ERROR'], errorHandler);
    if (customEventHandler) {
      this.player.off(SCHEME_ID_URI, customEventHandler);
    }
  };
};video_player.js

ตั้งค่า Callback ของเหตุการณ์เพลเยอร์

หากต้องการจัดการการเล่นพ็อดโฆษณาตามเหตุการณ์ของเพลเยอร์ ให้สร้างเมธอด VideoPlayer.onAdPodPlaying(), VideoPlayer.onAdPodEnded() และ VideoPlayer.onAdPodError() ดังนี้

/**
 * Called when ad stream playback buffered and is playing.
 */
VideoPlayer.prototype.onAdPodPlaying = function() {
  debugView.log('Player: Ad Playback started');
};

/**
 * Called when ad stream playback has been completed.
 * Will call the restart of broadcast stream.
 */
VideoPlayer.prototype.onAdPodEnded = function() {
  debugView.log('Player: Ad Playback ended');
  this.stop();
  if (this.onAdPodEndedCallback) {
    this.onAdPodEndedCallback();
  }
};

/**
 * @param {!Event} event The error event to handle.
 */
VideoPlayer.prototype.onAdPodError = function(event) {
  debugView.log('Player: Ad Playback error from dash.js player.');
  this.stop();
  if (this.onAdPodEndedCallback) {
    this.onAdPodEndedCallback();
  }
};video_player.js

สร้าง Setter สำหรับเหตุการณ์ `onAdPodEnded`

ตั้งค่าฟังก์ชัน Callback ที่ทำงานเมื่อพ็อดโฆษณาเล่นจบโดยสร้างเมธอด VideoPlayer.setOnAdPodEnded() คลาสแอปใช้เมธอดนี้เพื่อเล่นเนื้อหาที่ออกอากาศต่อหลังจากช่วงพักโฆษณา

/**
 * Sets a callback function for when an ad pod has ended.
 * @param {!Function} callback Callback function.
 */
VideoPlayer.prototype.setOnAdPodEnded = function(callback) {
  this.onAdPodEndedCallback = callback;
};video_player.js

จัดการเหตุการณ์ข้อมูลเมตาของสตรีม

ตั้งค่าฟังก์ชัน Callback ที่ทำงานตามเหตุการณ์ emsg โดยสร้างเมธอด VideoPlayer.setEmsgEventHandler() สำหรับคู่มือนี้ ให้ใส่พารามิเตอร์ scope เนื่องจากคุณเรียกใช้ setEmsgEventHandler() นอก video_player.js

/**
 * Sets emsg event handler.
 * @param {!Function} customEventHandler Event handler.
 * @param {!Object} scope JS scope in which event handler function is called.
 */
VideoPlayer.prototype.setEmsgEventHandler = function(
    customEventHandler, scope) {
  this.onCustomEventHandler = customEventHandler;
  this.customEventHandlerScope = scope;
};video_player.js

แสดงและซ่อนวิดีโอเพลเยอร์สำหรับช่วงพักโฆษณา

หากต้องการแสดงวิดีโอเพลเยอร์ระหว่างช่วงพักโฆษณา และซ่อนเพลเยอร์หลังจากช่วงพักโฆษณาจบลง ให้สร้างเมธอด VideoPlayer.show() และ VideoPlayer.hide() ดังนี้

/** Shows the video player. */
VideoPlayer.prototype.show = function() {
  debugView.log('Player: show');
  this.broadbandWrapper.style.display = 'block';
};

/** Hides the video player. */
VideoPlayer.prototype.hide = function() {
  debugView.log('Player: hide');
  this.broadbandWrapper.style.display = 'none';
};video_player.js

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

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

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