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 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.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 रुक जाने पर भी उपयोगकर्ता, वीडियो को फिर से चला सकेंगे.

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