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

प्लैटफ़ॉर्म चुनें: HTML5 Android iOS tvOS Cast Roku

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

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

पूरी सेवा पॉडकास्ट की सुविधा

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

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

ध्यान दें: IMA DAI SDK for HTML5, HLS और DASH, दोनों तरह की स्ट्रीम के साथ काम करता है. हालांकि, इन्हें चलाने के लिए अलग-अलग मीडिया प्लेयर या एक्सटेंशन की ज़रूरत होती है. जैसे, HLS.js या DASH.js. इन्हें लागू करने के तरीके भी अलग-अलग होते हैं.

इस गाइड में, HLS स्ट्रीम चलाने के लिए HLS.js और IMA DAI SDK को कॉन्फ़िगर करने का तरीका बताया गया है. साथ ही, DASH के लिए लागू करने के तरीके में अंतर के बारे में अहम नोट दिए गए हैं.

IMA के साथ DASH डीएआई स्ट्रीम लागू करने के लिए, IMA DASH.js सैंपल ऐप्लिकेशन देखें.

IMA DAI का इस्तेमाल करने के लिए, आपके पास Ad Manager 360 Advanced खाता होना चाहिए. अगर आपके पास Ad Manager खाता है, तो ज़्यादा जानकारी के लिए अपने खाता मैनेजर से संपर्क करें. Ad Manager के लिए साइन अप करने के बारे में जानकारी पाने के लिए, Ad Manager सहायता केंद्र पर जाएं.

ध्यान दें: अन्य प्लैटफ़ॉर्म के साथ इंटिग्रेट करने या IMA क्लाइंट-साइड SDK टूल इस्तेमाल करने के बारे में जानकारी पाने के लिए, Interactive Media Ads SDK टूल देखें.

IMA डीएआई के बारे में खास जानकारी

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

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

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

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

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

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

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

   python -m http.server 8000

   ध्यान दें: http.server सिर्फ़ Python 3.x में उपलब्ध है.

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

   Apache HTTP Server जैसे किसी अन्य वेब सर्वर का भी इस्तेमाल किया जा सकता है.

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

सबसे पहले, dai.html में बदलाव करके, एचटीएमएल5 वीडियो एलिमेंट और क्लिकथ्रू के लिए इस्तेमाल किया जाने वाला div बनाएं. यहां दिए गए उदाहरण में, IMA डीएआई एसडीके को इंपोर्ट करने का तरीका बताया गया है. ज़्यादा जानकारी के लिए, IMA DAI SDK इंपोर्ट करना लेख पढ़ें.

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

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA SDK DAI Demo (HLS.JS)</h2>
  <video id="video"></video>
  <div id="adUi"></div>
  <button id="play-button">Play</button>
</body>
</html>

dai.html

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

#adUi {
  cursor: pointer;
}

#play-button {
  position: absolute;
  top: 400px;
  left: 15px;
}
dai.css

// This stream will be played if ad-enabled playback fails.
const BACKUP_STREAM =
    'http://storage.googleapis.com/testtopbox-public/video_content/bbb/' +
    'master.m3u8';

// Live stream asset key.
// const TEST_ASSET_KEY = 'c-rArva4ShKVIAkNfy6HUQ';

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

// Ad Manager network code.
const NETWORK_CODE = '21775744923';
const API_KEY = null;

// StreamManager which will be used to request ad-enabled streams.
let streamManager;

// hls.js video player
const hls = new Hls();

// Video element
let videoElement;

// Ad UI element
let adUiElement;

// The play/resume button
let playButton;

// Whether the stream is currently in an ad break.
let adBreak = false;

/**
 * Initializes the video player.
 */
function initPlayer() {
  videoElement = document.getElementById('video');
  playButton = document.getElementById('play-button');
  adUiElement = document.getElementById('adUi');
  createStreamManager();
  listenForMetadata();

  // Show the video controls when the video is paused during an ad break,
  // and hide them when ad playback resumes.
  videoElement.addEventListener('pause', () => {
    if (adBreak) {
      showVideoControls();
    }
  });
  videoElement.addEventListener('play', () => {
    if (adBreak) {
      hideVideoControls();
    }
  });

  playButton.addEventListener('click', () => {
    console.log('initiatePlayback');
    requestStream();
    // Hide this play button after the first click to request the stream.
    playButton.style.display = 'none';
  });
}
dai.js

विज्ञापन के लिए रोके गए ब्रेक के दौरान वीडियो को फिर से चलाने के लिए, वीडियो एलिमेंट के pause और start इवेंट के लिए इवेंट लिसनर सेट अप करें. इससे, प्लेयर कंट्रोल को दिखाया और छिपाया जा सकेगा.

/**
 * Hides the video controls.
 */
function hideVideoControls() {
  videoElement.controls = false;
  adUiElement.style.display = 'block';
}

/**
 * Shows the video controls.
 */
function showVideoControls() {
  videoElement.controls = true;
  adUiElement.style.display = 'none';
}
dai.js

IMA DAI SDK को लोड करना

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

<script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
dai.html

StreamManager को शुरू करना

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

/**
 * Create the StreamManager and listen to stream events.
 */
function createStreamManager() {
  streamManager =
      new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.LOADED, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.ERROR, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED, onStreamEvent);
}
dai.js

स्ट्रीम करने का अनुरोध करना

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

/**
 * Makes a stream request and plays the stream.
 */
function requestStream() {
  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, NETWORK_CODE, API_KEY);
  // Uncomment line below and comment one above to request a LIVE stream.
  // requestLiveStream(TEST_ASSET_KEY, NETWORK_CODE, API_KEY);
}

/**
 * Requests a Live stream with ads.
 * @param {string} assetKey
 * @param {?string} networkCode
 * @param {?string} apiKey
 */
function requestLiveStream(assetKey, networkCode, apiKey) {
  const streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.networkCode = networkCode;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

/**
 * Requests a VOD stream with ads.
 * @param {string} cmsId
 * @param {string} videoId
 * @param {?string} networkCode
 * @param {?string} apiKey
 */
function requestVODStream(cmsId, videoId, networkCode, apiKey) {
  const streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.networkCode = networkCode;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}
dai.js

स्ट्रीम के अनुरोध के दोनों तरीकों में, एपीआई पासकोड का इस्तेमाल किया जा सकता है. अगर आपको सुरक्षित स्ट्रीम का इस्तेमाल करना है, तो आपको डीएआई की पुष्टि करने वाली कुंजी बनानी होगी. ज़्यादा जानकारी के लिए, DAI वीडियो स्ट्रीम के अनुरोधों की पुष्टि करना लेख पढ़ें. इस उदाहरण में, किसी भी स्ट्रीम को DAI प्रमाणीकरण कुंजी का इस्तेमाल करके सुरक्षित नहीं किया गया है. इसलिए, apiKey का इस्तेमाल नहीं किया गया है.

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

आपको टाइम किए गए मेटाडेटा इवेंट सुनने के लिए, एक हैंडलर भी जोड़ना होगा. साथ ही, विज्ञापन ब्रेक के दौरान विज्ञापन इवेंट दिखाने के लिए, IMA को StreamManager क्लास में इवेंट फ़ॉरवर्ड करने होंगे:

/**
 * Set up metadata listeners to pass metadata to the StreamManager.
 */
function listenForMetadata() {
  // Timed metadata is handled differently by different video players, and the
  // IMA SDK provides two ways to pass in metadata,
  // StreamManager.processMetadata() and StreamManager.onTimedMetadata().
  //
  // Use StreamManager.onTimedMetadata() if your video player parses
  // the metadata itself.
  // Use StreamManager.processMetadata() if your video player provides raw
  // ID3 tags, as with hls.js.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we 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);
      });
    }
  });
}
dai.js

इस गाइड में, स्ट्रीम चलाने के लिए hls.js प्लेयर का इस्तेमाल किया गया है. हालांकि, मेटाडेटा लागू करने का तरीका, आपके इस्तेमाल किए जा रहे प्लेयर के टाइप पर निर्भर करता है.

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

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

/**
 * Responds to a stream event.
 * @param {!google.ima.dai.api.StreamEvent} e
 */
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');
      adBreak = true;
      hideVideoControls();
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      adBreak = false;
      showVideoControls();
      break;
    default:
      break;
  }
}

/**
 * Loads and plays a Url.
 * @param {string} url
 */
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();
  });
}
dai.js

स्ट्रीम लोड होने पर, वीडियो प्लेयर दिए गए यूआरएल को loadUrl() फ़ंक्शन का इस्तेमाल करके लोड करता है और चलाता है.

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