IMA डीएआई SDK टूल का इस्तेमाल शुरू करना

IMA SDK आपकी वेबसाइटों और ऐप्लिकेशन में मल्टीमीडिया विज्ञापनों को इंटिग्रेट करना आसान बनाते हैं. IMA SDK ये काम कर सकते हैं किसी भी वेबसाइट या ऐप्लिकेशन से विज्ञापनों का अनुरोध करें वीएएसटी का पालन करने वाला विज्ञापन सर्वर और अपने ऐप्लिकेशन में विज्ञापन चलाने की सुविधा को मैनेज करना. IMA डीएआई SDK टूल की मदद से, ऐप्लिकेशन वीओडी या लाइव कॉन्टेंट, विज्ञापन और कॉन्टेंट वीडियो के लिए स्ट्रीम अनुरोध. इसके बाद, SDK टूल जोड़ी गई वीडियो स्ट्रीम की सुविधा मिलती है, ताकि आपको विज्ञापन और कॉन्टेंट वीडियो के बीच स्विच करने को मैनेज न करना पड़े शामिल हैं.

अपनी पसंद का डीएआई सलूशन चुनें

पॉड के तौर पर काम करने वाला डीएआई

इस गाइड में, लाइव या वीओडी कॉन्टेंट के लिए डीएआई पॉड सेविंग स्ट्रीम चलाने का तरीका बताया गया है. इसके लिए, HTML5 के लिए IMA डीएआई SDK टूल का इस्तेमाल किया गया है. साथ ही, वीडियो प्लेयर के तौर पर hls.js का इस्तेमाल किया गया है. अगर आपको पूरा सैंपल देखना या उसके साथ फ़ॉलो करना है के साथ इंटिग्रेट करते हैं, तो HLS.js और Safari प्लैटबैक, दोनों के लिए सहायता के साथ एचएलएस पॉड पेश करने का उदाहरण. DASH.js सहायता के लिए, DASH पॉड विज्ञापन दिखाने का उदाहरण देखें. इन सैंपल ऐप्लिकेशन को HTML5 डीएआई के GitHub रिलीज़ पेज से डाउनलोड किया जा सकता है.

डीएआई पॉड दिखाने की सुविधा के बारे में खास जानकारी

IMA DAI SDK का इस्तेमाल करके पॉड सर्विंग लागू करने के लिए, दो मुख्य कॉम्पोनेंट की ज़रूरत होती है. इन कॉम्पोनेंट के बारे में इस गाइड में बताया गया है:

  • PodStreamRequest / PodVodStreamRequest: यह एक ऑब्जेक्ट है, जो Google के विज्ञापन सर्वर को स्ट्रीम का अनुरोध करता है. अनुरोधों में नेटवर्क कोड की जानकारी होती है. साथ ही, PodStreamRequest के लिए कस्टम एसेट पासकोड और एपीआई पासकोड की ज़रूरत होती है. हालांकि, एपीआई पासकोड देना ज़रूरी नहीं है. दोनों में अन्य वैकल्पिक पैरामीटर शामिल होते हैं.

  • StreamManager: यह एक ऐसा ऑब्जेक्ट है जो वीडियो स्ट्रीम और IMA डीएआई SDK टूल के बीच कम्यूनिकेशन मैनेज करता है. जैसे, ट्रैकिंग पिंग को ट्रिगर करना और स्ट्रीम इवेंट को पब्लिशर को फ़ॉरवर्ड करना.

ज़रूरी शर्तें

शुरू करने से पहले, आपको इनकी ज़रूरत होगी:

  • तीन खाली फ़ाइलें:

    • dai.html
    • dai.css
    • dai.js

  • आपके कंप्यूटर पर Python इंस्टॉल होना चाहिए. इसके अलावा, टेस्टिंग के लिए वेब सर्वर या होस्ट किया गया कोई अन्य डेवलपमेंट एनवायरमेंट भी होना चाहिए

डेवलपमेंट एनवायरमेंट कॉन्फ़िगर करना

SDK टूल, पेज के प्रोटोकॉल का इस्तेमाल करके डिपेंडेंसी लोड करता है तो आपको अपने ऐप्लिकेशन की जांच करने के लिए वेब सर्वर का इस्तेमाल करना होगा. जल्दी लोकल डेवलपमेंट सर्वर शुरू करने का तरीका, Python के बिल्ट-इन सर्वर का इस्तेमाल करना है.

  1. कमांड लाइन का इस्तेमाल करके, उस डायरेक्ट्री से index.html फ़ाइल को चलाएं जिसमें यह मौजूद है:

    python -m http.server 8000

  2. किसी वेब ब्राउज़र में, http://localhost:8000/ पर जाएं

    Apache HTTP Server जैसे किसी भी होस्ट किए गए डेवलपमेंट एनवायरमेंट या वेब सर्वर का भी इस्तेमाल किया जा सकता है.

आसान वीडियो प्लेयर बनाना

सबसे पहले, dai.html को संशोधित करके एक सरल HTML5 वीडियो एलीमेंट और एक div बनाएं का इस्तेमाल विज्ञापन यूज़र इंटरफ़ेस (यूआई) एलिमेंट के लिए करें. साथ ही, dai.css को लोड करने के लिए ज़रूरी टैग जोड़ें और dai.js फ़ाइलें हैं. साथ ही, hls.js वीडियो प्लेयर इंपोर्ट करने के लिए भी किया जा सकता है.

इसके बाद, पेज के एलिमेंट का साइज़ और पोज़िशन तय करने के लिए, dai.css में बदलाव करें. आखिर में, dai.js में स्ट्रीम के अनुरोध की जानकारी को होल्ड करने के लिए वैरिएबल तय करें और पेज लोड होने पर चलने के लिए एक initPlayer() फ़ंक्शन होना चाहिए.

स्ट्रीम अनुरोध के कॉन्सटेंट नीचे दिए गए हैं:

  • BACKUP_STREAM: विज्ञापन दिखाने के लिए बैकअप स्ट्रीम का यूआरएल किसी गंभीर गड़बड़ी का सामना करना पड़ता है.

  • STREAM_URL: सिर्फ़ लाइव स्ट्रीम के लिए इस्तेमाल किया जाता है. वीडियो स्ट्रीम का यूआरएल, जो आपके मेनिफ़ेस्ट मैनिप्युलेटर या पॉड सर्विंग का इस्तेमाल करने वाले तीसरे पक्ष के पार्टनर ने दिया है. अनुरोध करने से पहले, आपको IMA डीएआई एसडीके से मिला स्ट्रीम आईडी डालना होगा. इस मामले में, स्ट्रीम के यूआरएल में एक प्लेसहोल्डर, [[STREAMID]] शामिल होता है. अनुरोध करने से पहले, इसे स्ट्रीम आईडी से बदल दिया जाता है.

  • NETWORK_CODE: आपके Ad Manager 360 खाते का नेटवर्क कोड.

  • CUSTOM_ASSET_KEY: सिर्फ़ लाइव स्ट्रीम के लिए इस्तेमाल किया जाता है. कस्टम एसेट की, जो Ad Manager 360 में आपके पॉड दिखाने वाले इवेंट की पहचान करती है. इसे इनके ज़रिए बनाया जा सकता है: मेनिफ़ेस्ट में बदलाव करने वाले या तीसरे पक्ष के पॉड सर्विंग पार्टनर को सबमिट करने की अनुमति दें.

  • API_KEY: सिर्फ़ लाइव स्ट्रीम के लिए इस्तेमाल किया जाता है. ज़रूरी नहीं है कि एपीआई पासकोड दिया जाए. हालांकि, IMA डीएआई SDK से स्ट्रीम आईडी पाने के लिए, एपीआई पासकोड की ज़रूरत पड़ सकती है.

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA DAI SDK Demo (HLS.JS)</h2>
    <video id="video"></video>
    <div id="ad-ui"></div>
</body>
</html>

dai.css

#video,
#ad-ui {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#ad-ui {
  cursor: pointer;
}

dai.js

var BACKUP_STREAM =
    'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'

// Stream Config.
const STREAM_URL = "https://encodersim.sandbox.google.com/masterPlaylist/...&stream_id=[[STREAMID]]";
const NETWORK_CODE = "51636543";
const CUSTOM_ASSET_KEY = "google-sample";
const API_KEY = "";

var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
}

IMA डीएआई SDK टूल लोड करें

इसके बाद, टैग से पहले dai.html में स्क्रिप्ट टैग का इस्तेमाल करके डीएआई फ़्रेमवर्क जोड़ें dai.js के लिए है.

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
...

StreamManager को शुरू करना और लाइव या वीओडी स्ट्रीम का अनुरोध करना

लाइव स्ट्रीम पॉड दिखाना

विज्ञापनों के किसी सेट का अनुरोध करने के लिए, ima.dai.api.StreamManager बनाएं. यह डीएआई स्ट्रीम का अनुरोध करने और उन्हें मैनेज करने के लिए ज़िम्मेदार होता है. कन्स्ट्रक्टर में एक वीडियो एलिमेंट होता है. साथ ही, नतीजे में मिलने वाले इंस्टेंस में विज्ञापन इंटरैक्शन मैनेज करने के लिए, विज्ञापन यूज़र इंटरफ़ेस (यूआई) एलिमेंट होता है.

इसके बाद, लाइव स्ट्रीम दिखाने वाले पॉड का अनुरोध करने के लिए, कोई फ़ंक्शन तय करें. यह फ़ंक्शन सबसे पहले एक PodStreamRequest बनाता है और StreamRequest के साथ कॉन्फ़िगर करता है दूसरे चरण में पैरामीटर दिए गए हैं और फिर streamManager.requestStream() को कॉल किया गया है उस अनुरोध ऑब्जेक्ट के साथ.

dai.js

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  requestLivePodStream(NETWORK_CODE, CUSTOM_ASSET_KEY, API_KEY);
}

function requestLivePodStream(networkCode, customAssetKey, apiKey) {
  // clear HLS.js instance, if in use
  if (hls) {
    hls.destroy();
  }

  // Generate a Pod Serving live Stream Request
  const streamRequest = new google.ima.dai.api.PodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.apiKey = apiKey;
  streamRequest.format = 'hls';
  streamManager.requestStream(streamRequest);
}

वीओडी (वीडियो ऑन डिमांड) पॉड दिखाना

विज्ञापनों के किसी सेट का अनुरोध करने के लिए, ima.dai.api.StreamManager बनाएं. यह की ज़िम्मेदारी डीएआई स्ट्रीम का अनुरोध करने और उन्हें मैनेज करने की है. कन्स्ट्रक्टर में एक वीडियो एलिमेंट होता है. साथ ही, विज्ञापन इंटरैक्शन को मैनेज करने के लिए, नतीजे में मिलने वाले इंस्टेंस में विज्ञापन यूज़र इंटरफ़ेस (यूआई) एलिमेंट होता है.

इसके बाद, वीओडी स्ट्रीम दिखाने वाले पॉड का अनुरोध करने के लिए कोई फ़ंक्शन तय करें. यह फ़ंक्शन सबसे पहले एक PodVodStreamRequest बनाता है और StreamRequest के साथ कॉन्फ़िगर करता है दूसरे चरण में पैरामीटर दिए गए हैं और फिर streamManager.requestStream() को कॉल किया गया है उस अनुरोध ऑब्जेक्ट के साथ.

dai.js

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  requestVodPodStream(NETWORK_CODE);
}

function requestVodPodStream(networkCode) {
  // clear HLS.js instance, if in use
  if (hls) {
    hls.destroy();
  }

  // Generate a Pod Serving VOD Stream Request
  const streamRequest = new google.ima.dai.api.PodVodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.format = 'hls';
  streamManager.requestStream(streamRequest);
}

स्ट्रीम इवेंट मैनेज करना

लाइव स्ट्रीम पॉड दिखाना

इसके बाद, बड़े वीडियो इवेंट के लिए इवेंट लिसनर लागू करें. यह उदाहरण onStreamEvent() फ़ंक्शन को कॉल करके, STREAM_INITIALIZED, ERROR, AD_BREAK_STARTED, और AD_BREAK_ENDED इवेंट को मैनेज करता है. यह फ़ंक्शन, स्ट्रीम लोड करने और गड़बड़ियों को मैनेज करता है. साथ ही, विज्ञापन चलने के दौरान प्लेयर कंट्रोल को बंद करता है. यह SDK टूल के लिए ज़रूरी है. स्ट्रीम लोड होने के बाद, वीडियो प्लेयर loadStream() फ़ंक्शन का इस्तेमाल करके, दिए गए यूआरएल को लोड और चलाता है.

dai.js

var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  
  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED,
    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],
    onStreamEvent,
    false);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      console.log('Stream initialized');
      loadStream(e.getStreamData().streamId);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadStream('');
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

function loadStream(streamID) {
  var url;
  if(streamID) {
    url = STREAM_URL.replace('[[STREAMID]]', streamID);
  } else {
    console.log('Stream Initialization Failed');
    url = BACKUP_STREAM;
  }
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
}

वीओडी पॉड दिखाना

इसके बाद, वीडियो के मुख्य इवेंट के लिए इवेंट लिसनर लागू करें. यह उदाहरण STREAM_INITIALIZED, LOADED, ERROR, AD_BREAK_STARTED, और onStreamEvent() फ़ंक्शन को कॉल करके AD_BREAK_ENDED इवेंट. यह यह फ़ंक्शन, स्ट्रीम लोड होने से जुड़ी गड़बड़ियों को ठीक करता है. साथ ही, इससे प्लेयर को बंद भी किया जा सकता है की मदद से कंट्रोल किया जा सकता है, जो SDK टूल के लिए ज़रूरी है.

इसके अलावा, वीओडी (वीडियो ऑन डिमांड) पॉड दिखाने वाली स्ट्रीम के लिए, कॉल करना ज़रूरी है StreamManager.loadStreamMetadata() STREAM_INITIALIZED इवेंट. आपको अपने वीडियो टेक्नोलॉजी पार्टनर (वीटीपी) से भी स्ट्रीम के यूआरएल का अनुरोध करना होगा. loadStreamMetadata() कॉल पूरा होने के बाद, यह एक LOADED इवेंट को ट्रिगर करता है. यहां आपको स्ट्रीम को लोड और चलाने के लिए, अपने स्ट्रीम यूआरएल के साथ loadStream() फ़ंक्शन को कॉल करना चाहिए.

var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  
  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED,
    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],
    onStreamEvent,
    false);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      const streamId = e.getStreamData().streamId;
      // 'vtpInterface' is a place holder for your own video technology
      //  partner (VTP) API calls.
      vtpInterface.requestStreamURL({
        'streamId': streamId,
      })
      .then( (vtpStreamUrl) => {
        streamUrl = vtpStreamUrl;
        streamManager.loadStreamMetadata();
      }, (error) => {
        // Handle the error.
      });
      break;
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      loadStream(streamUrl);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadStream();
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

function loadStream(url) {
  if(url) {
    console.log('Loading:' + url);
    hls.loadSource(url);
  } else {
    console.log('Stream Initialization Failed');
    hls.loadSource(BACKUP_STREAM);
  }
  hls.attachMedia(videoElement);
}

स्ट्रीम के मेटाडेटा को मैनेज करना

इस चरण में, विज्ञापन इवेंट होने पर SDK टूल को सूचना देने के लिए, मेटाडेटा के लिए इवेंट लिसनर लागू किए जाते हैं. इन-स्ट्रीम मेटाडेटा इवेंट को सुनने की सुविधा, अलग-अलग हो सकती है. यह इस पर निर्भर करता है कि स्ट्रीम फ़ॉर्मैट (HLS या DASH), स्ट्रीम का प्रकार (लाइव या वीओडी स्ट्रीम), आपका प्लेयर टाइप और डीएआई बैकएंड के टाइप के बारे में जानकारी मिलती है. ज़्यादा जानकारी के लिए, टाइमस्टैंप वाला मेटाडेटा वाली हमारी गाइड देखें.

एचएलएस स्ट्रीम फ़ॉर्मैट (लाइव और वीओडी स्ट्रीम, HLS.js प्लेयर)

अगर HLS.js प्लेयर का इस्तेमाल किया जा रहा है, तो यह सुनें HLS.js FRAG_PARSING_METADATA इवेंट को ID3 मेटाडेटा के तौर पर पाने और उसे StreamManager.processMetadata() वाला SDK टूल.

वीडियो लोड होने और तैयार होने के बाद, उसे अपने-आप चलाने के लिए, HLS.js MANIFEST_PARSED इवेंट को सुनें. इससे वीडियो चलाने की प्रोसेस शुरू हो जाएगी.

function loadStream(streamID) {
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  
  // Timed metadata is passed HLS stream events to the streamManager.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, parseID3Events);
  hls.on(Hls.Events.MANIFEST_PARSED, startPlayback);
}

function parseID3Events(event, data) {
  if (streamManager && data) {
    // For each ID3 tag in the metadata, pass in the type - ID3, the
    // tag data (a byte array), and the presentation timestamp (PTS).
    data.samples.forEach((sample) => {
      streamManager.processMetadata('ID3', sample.data, sample.pts);
    });
  }
}

function startPlayback() {
  console.log('Video Play');
  videoElement.play();
}

DASH.js (DASH स्ट्रीम का फ़ॉर्मैट, लाइव और वीओडी स्ट्रीम का टाइप)

अगर DASH.js प्लेयर का इस्तेमाल किया जा रहा है, तो लाइव या वीओडी (वीडियो ऑन डिमांड) के लिए ID3 का मेटाडेटा सुनने के लिए, आपको अलग-अलग स्ट्रिंग का इस्तेमाल करना होगा स्ट्रीम:

  • लाइव स्ट्रीम: 'https://developer.apple.com/streaming/emsg-id3'
  • वीओडी स्ट्रीम: 'urn:google:dai:2018'

StreamManager.processMetadata() की मदद से, SDK टूल में ID3 मेटाडेटा पास करें.

सब कुछ लोड हो जाने और तैयार हो जाने के बाद, वीडियो कंट्रोल अपने-आप दिखाने के लिए, DASH.js MANIFEST_LOADED इवेंट को सुनें.

const googleLiveSchema = 'https://developer.apple.com/streaming/emsg-id3';
const googleVodSchema = 'urn:google:dai:2018';
dashPlayer.on(googleLiveSchema, processMetadata);
dashPlayer.on(googleVodSchema, processMetadata);
dashPlayer.on(dashjs.MediaPlayer.events.MANIFEST_LOADED, loadlistener);

function processMetadata(metadataEvent) {
  const messageData = metadataEvent.event.messageData;
  const timestamp = metadataEvent.event.calculatedPresentationTime;

  // Use StreamManager.processMetadata() if your video player provides raw
  // ID3 tags, as with dash.js.
  streamManager.processMetadata('ID3', messageData, timestamp);
}

function loadlistener() {
  showControls();

  // This listener must be removed, otherwise it triggers as addional
  // manifests are loaded. The manifest is loaded once for the content,
  // but additional manifests are loaded for upcoming ad breaks.
  dashPlayer.off(dashjs.MediaPlayer.events.MANIFEST_LOADED, loadlistener);
}

लाइव स्ट्रीम के साथ शाका प्लेयर (डीएएसएच स्ट्रीम फ़ॉर्मैट)

अगर लाइव स्ट्रीम चलाने के लिए Shaka प्लेयर का इस्तेमाल किया जा रहा है, तो मेटाडेटा इवेंट सुनने के लिए स्ट्रिंग 'emsg' का इस्तेमाल करें. इसके बाद, StreamManager.onTimedMetadata() को किए गए कॉल में इवेंट मैसेज के डेटा का इस्तेमाल करें.

shakaPlayer.addEventListener('emsg', (event) => onEmsgEvent(event));

function onEmsgEvent(metadataEvent) {
  // Use StreamManager.onTimedMetadata() if your video player provides
  // processed metadata, as with Shaka player livestreams.
  streamManager.onTimedMetadata({'TXXX': metadataEvent.detail.messageData});
}

वीओडी स्ट्रीम (DASH स्ट्रीम फ़ॉर्मैट) वाला Shaka Player

अगर वीओडी स्ट्रीम चलाने के लिए Shaka प्लेयर का इस्तेमाल किया जा रहा है, तो मेटाडेटा इवेंट सुनने के लिए 'timelineregionenter' स्ट्रिंग का इस्तेमाल करें. फिर, StreamManager.processMetadata() स्ट्रिंग 'urn:google:dai:2018' के साथ.

shakaPlayer.addEventListener('timelineregionenter', (event) => onTimelineEvent(event));

function onTimelineEvent(metadataEvent) {
  const detail = metadataEvent.detail;
  if ( detail.eventElement.attributes &&
       detail.eventElement.attributes['messageData'] &&
       detail.eventElement.attributes['messageData'].value ) {
        const mediaId = detail.eventElement.attributes['messageData'].value;
        const pts = detail.startTime;
        // Use StreamManager.processMetadata() if your video player provides raw
        // ID3 tags, as with Shaka player VOD streams.
        streamManager.processMetadata('urn:google:dai:2018', mediaId, pts);
       }
}

खिलाड़ी के इवेंट मैनेज करना

अनुमति देने के लिए, वीडियो एलिमेंट के pause और start इवेंट में इवेंट लिसनर जोड़ें जब विज्ञापन के लिए ब्रेक के दौरान SDK टूल रुक जाए, तब वीडियो चलाना फिर से शुरू किया जा सके.

function loadStream(streamUrl) {
  ...
  
  videoElement.addEventListener('pause', onStreamPause);
  videoElement.addEventListener('play', onStreamPlay);
}

function onStreamPause() {
  console.log('paused');
  if (isAdBreak) {
    videoElement.controls = true;
    adUiElement.style.display = 'none';
  }
}

function onStreamPlay() {
  console.log('played');
  if (isAdBreak) {
    videoElement.controls = false;
    adUiElement.style.display = 'block';
  }
}

हो गया! अब आपके पास HTML5 के लिए IMA DAI SDK टूल की मदद से, पॉड सेविंग स्ट्रीम में विज्ञापनों का अनुरोध करने और उन्हें दिखाने का विकल्प है. SDK टूल की ज़्यादा बेहतर सुविधाओं के बारे में जानने के लिए, दूसरी गाइड या GitHub पर मौजूद सैंपल देखें.