বিজ্ঞাপনের কাউন্টডাউন টাইমার তৈরি করা

এই নির্দেশিকা থেকে আপনি IMA DAI SDK-এর মাধ্যমে কীভাবে বিজ্ঞাপন কাউন্টডাউন টাইমার প্রয়োগ করবেন তা জানতে পারবেন। কাউন্টডাউন টাইমার হল একটি HTML এলিমেন্ট, তাই আপনি প্রয়োজন অনুযায়ী এর স্টাইলিং ও পজিশনিং অ্যাডজাস্ট করতে পারবেন।

পূর্বশর্ত

এই নির্দেশিকাটি শুরু করা যাক নির্দেশিকায় বর্ণিত HTML5 DAI উদাহরণকে ভিত্তি করে তৈরি করা হয়েছে।

টাইমার তৈরি করা হচ্ছে

টাইমার তৈরি করতে, HTML-এ একটি প্লেসহোল্ডার এলিমেন্ট যোগ করুন এবং CSS-এ স্টাইলিং প্রয়োগ করুন। তারপরে, AdProgress ইভেন্ট শোনার জন্য কিছু JavaScript যোগ করুন এবং ইভেন্টের adProgressData থেকে অবশিষ্ট সময় গণনা করুন।

dai.html

  <body onLoad="initPlayer()">
    <h2>IMA DAI SDK for HTML5 Demo (HLS.JS)</h2>
      <video id="video"></video>
      <div id="adUi"></div>
      <div id="ad-timer">Ad not currently playing.</div>
  </body>

dai.css

#ad-timer {
  display: inline-block;
  margin-top: 375px;
  padding: 15px;
  border: 1px solid #000;
}

...

dai.js

  ...

  var streamManager;   // used to request ad-enabled streams.
  var hls = new Hls(); // hls.js video player
  var videoElement;
  var adUiElement;
  var timerElement

  ...

  function initPlayer() {
    videoElement = document.getElementById('video');
    adUiElement = document.getElementById('adUi');
    timerElement = document.getElementById('ad-timer');

  ...

  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.LOADED,
     google.ima.dai.api.StreamEvent.Type.ERROR,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED,
     google.ima.dai.api.StreamEvent.Type.PAUSED,
     google.ima.dai.api.StreamEvent.Type.RESUMED,
     google.ima.dai.api.StreamEvent.Type.AD_PROGRESS],
    onStreamEvent,
    false);

  ...

  function onStreamEvent(e) {
    switch (e.type) {
      case google.ima.dai.api.StreamEvent.Type.LOADED:
        console.log('Stream loaded');
        loadUrl(e.getStreamData().url);
        break;
      case google.ima.dai.api.StreamEvent.Type.ERROR:
        console.log('Error loading stream, playing backup stream.' + e);
        loadUrl(BACKUP_STREAM);
        break;
      case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
        console.log('Ad Break Started');
        videoElement.controls = false;
        adUiElement.style.display = 'block';
        break;
      case google.ima.dai.api.StreamEvent.Type.AD_PROGRESS:
        var progressData = e.getStreamData().adProgressData;
        var timeRemaining = Math.ceil(progressData.duration - progressData.currentTime);
        timerElement.innerHTML = 'Ad finished in: ' + timeRemaining;
        break;
      case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
        timerElement.innerHTML = 'Ad not currently playing.';
        console.log('Ad Break Ended');
        videoElement.controls = true;
        adUiElement.style.display = 'none';
        break;
      default:
        break;
    }
  }