डीआई के लिए IMA SDK टूल सेट अप करना

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

वह DAI समाधान चुनें जिसमें आपकी दिलचस्पी है

पॉड सर्विंग डीएआई

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

पॉड सर्व करने के लिए डाइनैमिक ऐड इंसर्शन की खास जानकारी

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

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

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

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

शुरू करने से पहले, आपके पास ये चीज़ें होनी चाहिए:

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

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

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

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

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

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

    python -m http.server 8000

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

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

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

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

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

स्ट्रीम के अनुरोध के लिए इस्तेमाल होने वाले कॉन्स्टेंट यहां दिए गए हैं:

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

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

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

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

  • API_KEY: सिर्फ़ लाइव स्ट्रीम के लिए इस्तेमाल किया जाता है. यह एक वैकल्पिक एपीआई पासकोड है. IMA DAI 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="adUi"></div>
</body>
</html>

dai.css

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

#adUi {
  cursor: pointer;
}

dai.js

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

// Stream Config.
const STREAM_URL = "";
const NETWORK_CODE = "";
const CUSTOM_ASSET_KEY = "";
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 DAI SDK टूल लोड करना

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

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);
}

वीओडी पॉड सर्विंग

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

इसके अलावा, VOD पॉड सर्विंग स्ट्रीम के लिए, 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);
}

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

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

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

अगर HLS.js प्लेयर का इस्तेमाल किया जा रहा है, तो ID3 मेटाडेटा पाने के लिए HLS.js FRAG_PARSING_METADATA इवेंट को सुनें. इसके बाद, 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() की मदद से, आईडी3 मेटाडेटा को एसडीके पर पास करें.

सभी चीज़ें लोड होने और तैयार होने के बाद, वीडियो कंट्रोल अपने-आप दिखने लगें, इसके लिए 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 Player में लाइव स्ट्रीम (DASH स्ट्रीम फ़ॉर्मैट)

अगर लाइव स्ट्रीम चलाने के लिए Shaka player का इस्तेमाल किया जा रहा है, तो मेटाडेटा इवेंट सुनने के लिए '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});
}

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

अगर आपको वीओडी स्ट्रीम चलाने के लिए Shaka player का इस्तेमाल करना है, तो मेटाडेटा इवेंट सुनने के लिए '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 इवेंट में इवेंट लिसनर जोड़ें, ताकि विज्ञापन ब्रेक के दौरान एसडीके के रुकने पर उपयोगकर्ता वीडियो को फिर से चला सके.

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';
  }
}

IMA DAI ऐसेट मिटाना

IMA DAI SDK की मदद से, पॉड सर्विंग स्ट्रीम में विज्ञापनों का अनुरोध करने और उन्हें दिखाने की प्रोसेस पूरी होने के बाद, हमारा सुझाव है कि पॉड सर्विंग सेशन पूरा होने के बाद, सभी संसाधनों को हटा दें. स्ट्रीम का प्लेबैक रोकने, विज्ञापन की सभी ट्रैकिंग रोकने, और लोड की गई सभी स्ट्रीम ऐसेट को रिलीज़ करने के लिए, StreamManager.destroy() को कॉल करें.

SDK की अन्य बेहतर सुविधाओं के बारे में जानने के लिए, अन्य गाइड या GitHub पर मौजूद सैंपल देखें.