প্লেয়ার ক্লাস সেট আপ করুন

video_player.js এ, dash.js প্লেয়ার শুরু এবং নিয়ন্ত্রণ করার জন্য একটি ভিডিও প্লেয়ার র‍্যাপার ক্লাস সংজ্ঞায়িত করুন।

ব্রডব্যান্ড প্লেয়ার সেট আপ করুন

ভিডিও এবং র‍্যাপার ট্যাগ তৈরি করে আপনার অ্যাপে ব্রডব্যান্ড প্লেয়ারটি কোথায় রাখবেন তা নির্ধারণ করুন: 

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

ভিডিও প্লেয়ার তৈরি করুন

HTML এলিমেন্ট, dash.js প্লেয়ার এবং অন্যান্য ক্লাস পদ্ধতি ব্যবহার করতে পারে এমন কলব্যাকের জন্য ভেরিয়েবল দিয়ে ভিডিও প্লেয়ার ক্লাস শুরু করুন। 

/**
 * 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() পদ্ধতিটি তৈরি করুন। এরপর, বিজ্ঞাপন পড শেষ হওয়ার পরে পরিষ্কার করার জন্য create 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

বিজ্ঞাপন স্ট্রিম ম্যানিফেস্ট প্রিলোড করুন

কন্টেন্ট স্ট্রিম চলাকালীন এবং বিজ্ঞাপন বিরতি শুরু হওয়ার আগে বিজ্ঞাপনগুলি পর্যাপ্ত পরিমাণে লোড হয়েছে কিনা তা যাচাই করতে, VideoPlayer.preload() এবং VideoPlayer.isPreloaded() ব্যবহার করুন।

১. বিজ্ঞাপন স্ট্রিমটি প্রিলোড করুন

বিজ্ঞাপন স্ট্রিম ম্যানিফেস্ট প্রিলোড করার জন্য VideoPlayer.preload() পদ্ধতি তৈরি করুন এবং বিজ্ঞাপন বিরতির আগে একটি বিজ্ঞাপন বাফার তৈরি করুন। আপনাকে প্লেয়ার স্ট্রিমিং সেটিংস 'cacheInitSegments' কে true এ আপডেট করতে হবে। সেটিংস আপডেট করার মাধ্যমে, আপনি init বিভাগগুলিকে ক্যাশিং সক্ষম করেন, যা বিজ্ঞাপনগুলিতে স্যুইচ করার সময় বিলম্ব এড়ায়। 

/**
 * 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

২. প্রিলোডেড বিজ্ঞাপন বাফার পরীক্ষা করুন

অ্যাপে সেট করা বাফার থ্রেশহোল্ডের তুলনায় পর্যাপ্ত বিজ্ঞাপন বাফার প্রিলোড হয়েছে কিনা তা পরীক্ষা করার জন্য 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

প্লেয়ার লিসেনারের সাথে সংযুক্ত করুন

dash.js প্লেয়ার ইভেন্টের জন্য ইভেন্ট লিসেনারের যোগ করার জন্য, VideoPlayer.attachPlayerListener() পদ্ধতি তৈরি করুন: PLAYBACK_PLAYING , PLAYBACK_ENDED , LOG , এবং ERROR । এই পদ্ধতিটি স্কিম ID URI এর জন্য ইভেন্টগুলি পরিচালনা করে, এই লিসেনারের অপসারণের জন্য ক্লিন-আপ ফাংশন সেট করার পাশাপাশি। 

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

প্লেয়ার ইভেন্ট কলব্যাক সেট করুন

প্লেয়ার ইভেন্টের উপর ভিত্তি করে অ্যাড পড প্লেব্যাক পরিচালনা করতে, 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

onAdPodEnded ইভেন্টের জন্য সেটার তৈরি করুন

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

স্ট্রিম মেটাডেটা ইভেন্টগুলি পরিচালনা করুন

VideoPlayer.setEmsgEventHandler() পদ্ধতি তৈরি করে emsg ইভেন্টের উপর ভিত্তি করে একটি কলব্যাক ফাংশন সেট করুন। এই নির্দেশিকার জন্য, scope প্যারামিটারটি অন্তর্ভুক্ত করুন, যখন আপনি video_player.js এর বাইরে setEmsgEventHandler() ব্যবহার করবেন। 

/**
 * 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 ব্যবহার করে স্ট্রিম অনুরোধ করার জন্য, একটি অ্যাড পড ম্যানিফেস্ট পেতে, IMA স্ট্রিম ইভেন্ট শুনতে এবং IMA SDK-তে emsg ইভেন্টগুলি পাস করার জন্য একটি বিজ্ঞাপন পরিচালক ক্লাস তৈরি করুন।

পূর্ববর্তী
HbbTV-তে শুরু করুন
পরবর্তী
বিজ্ঞাপন ম্যানেজার ক্লাস তৈরি করুন