HbbTV पर IMA SDK का इस्तेमाल शुरू करें

IMA DAI SDK, HbbTV वीडियो प्लेयर ऐप्लिकेशन में इंटिग्रेट किया जा सकता है. IMA DAI SDK, ब्रॉडबैंड विज्ञापन स्ट्रीम के लिए Google Ad Manager की मांग को पूरा करता है, ताकि ब्रॉडकास्ट कॉन्टेंट स्ट्रीम के साथ विज्ञापन दिखाया जा सके. इस गाइड में, ब्रॉडकास्ट स्ट्रीम से मिले विज्ञापन इवेंट डेटा के आधार पर, विज्ञापन मेनिफ़ेस्ट लोड करने के बारे में बताया गया है.

पूरे सैंपल इंटिग्रेशन को देखने या साथ-साथ करने के लिए, IMA HTML5 DAI SDK के साथ HbbTV लीनियर सैंपल ऐप्लिकेशन डाउनलोड करें. टीवी के पुराने डिवाइसों पर काम करने के लिए, इस गाइड और GitHub के सैंपल ऐप्लिकेशन को ES5 JavaScript में लिखा गया है.

HbbTV के अलावा अन्य प्लैटफ़ॉर्म के साथ इंटिग्रेट करने के बारे में जानकारी पाने के लिए, इंटरैक्टिव मीडिया विज्ञापन SDK टूल देखें.

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

इस गाइड को पढ़ने से पहले, पक्का करें कि आपके पास ये चीज़ें हों:

  • IMA DAI का इस्तेमाल करने के लिए, आपके पास Ad Manager 360 Advanced खाता होना चाहिए. अगर आपके पास Ad Manager खाता है, तो ज़्यादा जानकारी के लिए अपने खाता मैनेजर से संपर्क करें. Ad Manager के लिए साइन अप करने के बारे में जानने के लिए, Ad Manager सहायता केंद्र पर जाएं.
  • मीडिया चलाने के लिए, ब्रॉडकास्ट ऑब्जेक्ट के साथ इंटरैक्ट करने वाला HbbTV ऐप्लिकेशन. ज़्यादा जानकारी के लिए, HbbTV Broadcast AV object देखें.
  • dash.js का ऐसा वर्शन जो प्रीलोडिंग की सुविधा के साथ काम करता हो. हमारा सुझाव है कि आप 4.6.0 या इसके बाद के वर्शन का इस्तेमाल करें.
  • ऐप्लिकेशन को होस्ट करने के लिए वेब सर्वर.
  • डीवीबी ब्रॉडकास्ट स्ट्रीम वाला टेस्टिंग एनवायरमेंट. टेस्टिंग एनवायरमेंट सेट अप करने के बारे में ज़्यादा जानकारी के लिए, HbbTV ऐप्लिकेशन चलाना लेख पढ़ें.
    • ब्रॉडकास्ट स्ट्रीम: कस्टम ऐप्लिकेशन की जानकारी वाली टेबल (एआईटी) का डेटा शामिल करके, ब्रॉडकास्ट स्ट्रीम तैयार करें. आपको टीवी पर ब्रॉडकास्ट स्ट्रीम भेजने का तरीका भी चाहिए. ब्रॉडकास्ट स्ट्रीम या अन्य तरीकों से डेटा ट्रांसमिट करने के लिए, डीवीबी मॉड्यूलेटर का इस्तेमाल किया जा सकता है.
    • वेब सर्वर: HbbTV ऐप्लिकेशन को ऐसे वेब सर्वर पर होस्ट करें जिसे टीवी से ऐक्सेस किया जा सकता हो.
  • पॉड सर्विंग मेनिफ़ेस्ट टाइप वाला लाइव स्ट्रीम इवेंट. इवेंट बनाने के लिए, डीएआई के लिए लाइव स्ट्रीम सेट अप करना लेख पढ़ें.

ब्रॉडकास्ट करने के लिए, स्ट्रीम बनाना

आपका HbbTV ऐप्लिकेशन, ब्रॉडकास्ट स्ट्रीम में HbbTV स्ट्रीम इवेंट सुनने के लिए broadcastContainer.addStreamEventListener() का इस्तेमाल करता है. विज्ञापनों को सही तरीके से लोड करने और चलाने के लिए, आपको ब्रॉडकास्ट स्ट्रीम को इन इवेंट टाइप के साथ सेट अप करना होगा, ताकि इससे जुड़े JSON स्ट्रिंग पेलोड को शामिल किया जा सके:

  • AD_BREAK_EVENT_ANNOUNCE - {"type":"adBreakAnnounce", "pod_id":1,"duration":90, "offset":10}
  • AD_BREAK_EVENT_START - {"type":"adBreakStart"}
  • AD_BREAK_EVENT_END - {"type":"adBreakEnd"}

इन इवेंट के लिए, streamEvent.type के साथ JSON स्ट्रिंग पेलोड शामिल करें. विज्ञापन को पहले से लोड करने की सुविधा के लिए, AD_BREAK_EVENT_ANNOUNCE इवेंट में streamEvent.duration और streamEvent.offset शामिल होना चाहिए. ज़्यादा जानकारी के लिए, HbbTV स्ट्रीम के इवेंट सुनना लेख पढ़ें. ब्रॉडकास्ट स्ट्रीम सेट अप करने के लिए, मल्टीप्लेक्स की गई MPEG ट्रांसपोर्ट स्ट्रीम का उदाहरण देखें. उदाहरण स्ट्रीम का इस्तेमाल करने के लिए, आपको अपनी स्ट्रीम के सेटअप के लिए, ऐप्लिकेशन की जानकारी वाली टेबल का यूआरएल अपडेट करना होगा.

पॉडकास्ट के लिए लाइव स्ट्रीम इवेंट बनाना

अपने HbbTV ऐप्लिकेशन पर विज्ञापन दिखाने के लिए, आपको लाइव स्ट्रीम इवेंट के लिए पॉड की ज़रूरत होगी. इवेंट सेट अप करने के बारे में जानकारी के लिए, डीएआई के लिए लाइव स्ट्रीम सेट अप करना लेख पढ़ें. सेट अप की गई स्ट्रीम को ऐक्सेस करने के लिए, ऐप्लिकेशन में ये वैरिएबल होने चाहिए:

  • NETWORK_CODE: विज्ञापन अनुरोध करने के लिए Ad Manager नेटवर्क कोड.
  • CUSTOM_ASSET_KEY: यह Ad Manager की कस्टम ऐसेट की है. इसे डीएआई के लिए लाइव स्ट्रीम सेट अप करने की प्रोसेस के दौरान जनरेट किया जाता है.

ऐप्लिकेशन फ़ाइल का स्ट्रक्चर बनाना

इस गाइड में, IMA HbbTV सैंपल ऐप्लिकेशन के फ़ाइल स्ट्रक्चर का इस्तेमाल किया गया है. इस गाइड में दिए गए निर्देशों का पालन करने के लिए, ये फ़ाइलें बनाएं:

  • index.html: आपके ऐप्लिकेशन के लिए एचटीएमएल इंडेक्स.
  • Style.css: आपके ऐप्लिकेशन के लिए सीएसएस स्टाइलिंग.
  • application.js: मुख्य JS एंट्री पॉइंट. यह कुकी, वीडियो चलाने की स्थिति और विज्ञापन ब्रेक को मैनेज करती है.
  • video_player.js: यह कुकी, विज्ञापन चलाने के लिए इस्तेमाल किए जाने वाले dash.js प्लेयर को मैनेज करती है.
  • ads_manager.js: यह IMA सेटअप, स्ट्रीम के अनुरोध, और इवेंट हैंडलिंग को मैनेज करता है.

ads_manager.js IMA DAI SDK टूल सेट अप करता है. नीचे दिए गए कॉम्पोनेंट, IMA DAI SDK टूल का इस्तेमाल करते हैं:

  • PodStreamRequest: यह एक ऐसा ऑब्जेक्ट है जो Google के विज्ञापन सर्वर को स्ट्रीम के अनुरोध के बारे में बताता है.
  • StreamManager: यह एक ऐसा ऑब्जेक्ट है जो डाइनैमिक ऐड इंसर्शन वाली स्ट्रीम और डीएआई बैकएंड के साथ इंटरैक्शन को मैनेज करता है. स्ट्रीम मैनेजर, ट्रैकिंग पिंग को भी मैनेज करता है. साथ ही, स्ट्रीम और विज्ञापन इवेंट को पब्लिशर को भेजता है.

टेस्टिंग एनवायरमेंट सेट अप करने के बारे में ज़्यादा जानकारी के लिए, HbbTV ऐप्लिकेशन चलाने के बारे में इस गाइड को पढ़ें.

IMA डीएआई SDK टूल और DASH.js को लोड करना

ब्रॉडकास्ट विज्ञापन स्ट्रीम का कॉन्टेंट चलाने के लिए, अपने ऐप्लिकेशन में IMA DAI SDK और dash.js लोड करें. application.js टैग से पहले, index.html में स्क्रिप्ट टैग का इस्तेमाल करके dash.js और IMA फ़्रेमवर्क जोड़ें.

<script src="https://cdn.jsdelivr.net/npm/dashjs@latest/dist/dash.all.min.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
index.html

इसके बाद, dash.js प्लेयर को शुरू और कंट्रोल करने के लिए, वीडियो प्लेयर रैपर क्लास बनाएं.

आगे बढ़ें
प्लेयर क्लास सेट अप करना