এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

এই গাইডটি আপনাকে একটি কাউন্টডাউন টাইমার যোগ করার মাধ্যমে নিয়ে যায় যা বর্তমান বিজ্ঞাপনে অবশিষ্ট সেকেন্ডগুলিকে একটি HTML5 IMA SDK DAI বাস্তবায়নে প্রদর্শন করে৷ কাউন্টডাউন টাইমার একটি এইচটিএমএল উপাদান, তাই আপনি প্রয়োজন অনুসারে এর স্টাইলিং এবং অবস্থান সামঞ্জস্য করতে পারেন।

পূর্বশর্ত

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

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

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

dai.html

  <body onLoad="initPlayer()">
    <h2>IMA SDK DAI 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;
    }
  }