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

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

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

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

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

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

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

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

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

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

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

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

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

    python -m http.server 8000

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

    किसी दूसरे वेब सर्वर, जैसे कि Apache एचटीटीपी सर्वर का भी इस्तेमाल किया जा सकता है.

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

सबसे पहले, क्लिकथ्रू के लिए इस्तेमाल करने के लिए, dai.html में बदलाव करके एक आसान HTML5 वीडियो एलिमेंट और एक div बनाएं. साथ ही, 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 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.js के टैग से पहले dai.html में स्क्रिप्ट टैग का इस्तेमाल करके IMA फ़्रेमवर्क जोड़ें.

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

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

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

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

डीएआई के साथ काम करने के लिए, आपके कस्टम प्लेयर को लाइव स्ट्रीम के लिए ID3 इवेंट को 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 पर सैंपल देखें.