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 का अडवांस खाता होना चाहिए. अगर आपके पास Ad Manager खाता है, तो ज़्यादा जानकारी के लिए अपने खाता मैनेजर से संपर्क करें. Ad Manager के लिए साइन अप करने के बारे में जानने के लिए, Ad Manager का सहायता केंद्र देखें.
  • मीडिया चलाने के लिए, ब्रॉडकास्ट ऑब्जेक्ट के साथ इंटरैक्ट करने वाला HbbTV ऐप्लिकेशन. ज़्यादा जानकारी के लिए, HbbTV ब्रॉडकास्ट एवी ऑब्जेक्ट देखें.
  • dash.js का ऐसा वर्शन जो पहले से लोड करने की सुविधा के साथ काम करता हो. हमारा सुझाव है कि वर्शन 4.6.0 या उसके बाद के वर्शन का इस्तेमाल करें.
  • ऐप्लिकेशन को होस्ट करने के लिए, वेब सर्वर.
  • डीवीबी ब्रॉडकास्ट स्ट्रीम वाला टेस्टिंग एनवायरमेंट. टेस्टिंग एनवायरमेंट सेट अप करने के बारे में ज़्यादा जानकारी के लिए, HbbTV ऐप्लिकेशन चलाना लेख देखें.
    • ब्रॉडकास्ट स्ट्रीम: कस्टम ऐप्लिकेशन इन्फ़ॉर्मेशन टेबल (एआईटी) डेटा वाली ब्रॉडकास्ट स्ट्रीम तैयार करें. आपको टीवी पर ब्रॉडकास्ट स्ट्रीम भेजने का तरीका भी चाहिए. ब्रॉडकास्ट स्ट्रीम भेजने के लिए, डीवीबी मॉड्यूलेटर या अन्य तरीकों का इस्तेमाल किया जा सकता है.
    • वेब सर्वर: 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: मुख्य जेएस एंट्री पॉइंट. प्लेस्टेट और विज्ञापन ब्रेक मैनेज करता है.
  • video_player.js: विज्ञापन चलाने के लिए इस्तेमाल किए जाने वाले dash.js प्लेयर को मैनेज करता है.
  • ads_manager.js: IMA सेटअप, स्ट्रीम के अनुरोध, और इवेंट हैंडलिंग को मैनेज करता है.

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

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

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

IMA DAI SDK और DASH.js लोड करना

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
<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>

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

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