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

IMA SDK आपकी वेबसाइटों और ऐप्लिकेशन में मल्टीमीडिया विज्ञापनों को इंटिग्रेट करना आसान बनाते हैं. IMA SDK ये काम कर सकते हैं किसी भी वेबसाइट या ऐप्लिकेशन से विज्ञापनों का अनुरोध करें वीएएसटी का पालन करने वाला विज्ञापन सर्वर और अपने ऐप्लिकेशन में विज्ञापन चलाने की सुविधा को मैनेज करना. 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 HTTP सर्वर.

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

सबसे पहले, 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.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 और फिर streamManager.requestStream() पर कॉल करें streamRequest पैरामीटर के साथ. लाइव स्ट्रीम के लिए, आपको हैंडलर को समयबद्ध मेटाडेटा इवेंट को सुनने और इवेंट को StreamManager. आपके पास, कोड पर टिप्पणी करने या उससे जुड़ी टिप्पणी को हटाने का विकल्प है. ऐसा करने पर, आपके इस्तेमाल के हिसाब से कोड सही रहेगा. दोनों तरीकों में, वैकल्पिक एपीआई पासकोड का इस्तेमाल किया जाता है. अगर सुरक्षित स्ट्रीम का इस्तेमाल किया जा रहा है, तो यह करने की ज़रूरत है DAI पुष्टि करने वाली कुंजी बनाएं.

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

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