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

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

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

पूरी सेवा वाला डीएआई

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

IMA डीएआई की खास जानकारी

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

  • StreamRequest— VODStreamRequest या LiveStreamRequest: ऐसा ऑब्जेक्ट जो स्ट्रीम के अनुरोध के बारे में बताता है. स्ट्रीम के अनुरोध, वीडियो ऑन डिमांड या लाइव स्ट्रीम के लिए किए जा सकते हैं. अनुरोध, Content ID, एपीआई पासकोड या पुष्टि करने वाले टोकन वगैरह के बारे में बताते हैं पैरामीटर का इस्तेमाल करें.
  • StreamManager: यह एक ऐसा ऑब्जेक्ट है जो डाइनैमिक ऐड इंसर्शन स्ट्रीम और डीआई बैकएंड के साथ इंटरैक्शन को मैनेज करता है. स्ट्रीम मैनेजर, ट्रैकिंग पिंग को भी मैनेज करता है. साथ ही, स्ट्रीम और विज्ञापन इवेंट को पब्लिशर को फ़ॉरवर्ड करता है.

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

  • तीन खाली फ़ाइलें
    • dai.html
    • dai.css
    • dai.js
  • आपके कंप्यूटर पर Python इंस्टॉल होना चाहिए या टेस्टिंग के लिए इस्तेमाल किया जाने वाला वेब सर्वर होना चाहिए

डेवलपमेंट सर्वर शुरू करना

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

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

    python -m http.server 8000

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

    आप किसी अन्य वेब सर्वर का भी उपयोग कर सकते हैं, जैसे Apache HTTP सर्वर.

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

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

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 DAI 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'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";

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

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

IMA डीएआई SDK टूल लोड करना

इसके बाद, dai.html में स्क्रिप्ट टैग का इस्तेमाल करके IMA फ़्रेमवर्क जोड़ें. यह टैग, 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 बनाएं. यह डीआई स्ट्रीम का अनुरोध करने और उन्हें मैनेज करने के लिए ज़िम्मेदार होता है. कंस्ट्रक्टर में एक वीडियो एलिमेंट होता है और इससे मिलने वाले इंस्टेंस में विज्ञापन पर होने वाले क्लिक मैनेज करने के लिए, विज्ञापन यूज़र इंटरफ़ेस (यूआई) एलिमेंट होता है.

इसके बाद, स्ट्रीम का अनुरोध करने वाले फ़ंक्शन तय करें. इस उदाहरण में, वीओडी और लाइव स्ट्रीम, दोनों के लिए फ़ंक्शन शामिल हैं. ये फ़ंक्शन, क्रमशः VODStreamRequest और LiveStreamRequest के इंस्टेंस बनाते हैं. इसके बाद, streamRequest पैरामीटर के साथ streamManager.requestStream() को कॉल करते हैं. लाइव स्ट्रीम के लिए, आपको समय के साथ मेटाडेटा इवेंट को सुनने और इवेंट को StreamManager पर फ़ॉरवर्ड करने के लिए, एक हैंडलर भी जोड़ना होगा. आपके पास, कोड पर टिप्पणी करने या उससे जुड़ी टिप्पणी को हटाने का विकल्प है. ऐसा करने पर, आपके इस्तेमाल के हिसाब से कोड सही रहेगा. दोनों तरीकों में, वैकल्पिक एपीआई पासकोड का इस्तेमाल किया जाता है. अगर सुरक्षित स्ट्रीम का इस्तेमाल किया जा रहा है, तो आपको डीएआई पुष्टि करने की कुंजी बनानी होगी.

इस उदाहरण में, कोई भी स्ट्रीम सुरक्षित नहीं है. इसलिए, apiKey का इस्तेमाल नहीं किया गया है.

dai.js

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

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(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(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null);
}

function requestVODStream(cmsId, videoId, apiKey) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

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

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

आपके पास वीडियो एलिमेंट के pause और start इवेंट के लिए इवेंट लिसनर सेट अप करने का विकल्प भी है. इससे, विज्ञापन के दौरान IMA के रुकने पर, उपयोगकर्ता को वीडियो चलाना फिर से शुरू करने की अनुमति मिलती है.

डीआई के साथ काम करने के लिए, आपके कस्टम प्लेयर को लाइव स्ट्रीम के लिए आईडी3 इवेंट को IMA डीआई SDK टूल में पास करना होगा, जैसा कि सैंपल कोड में दिखाया गया है.

dai.js

var isAdBreak;

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

  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],
    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');
      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 loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}

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 डीएआई SDK टूल से विज्ञापनों का अनुरोध कर रहे हैं और उन्हें दिखा रहे हैं. SDK टूल की बेहतर सुविधाओं के बारे में जानने के लिए, अन्य गाइड या GitHub पर सैंपल देखें.