بدء استخدام حزمة تطوير البرامج لإعلانات الوسائط التفاعلية على HbbTV

تتيح حزمة تطوير البرامج (SDK) الخاصة بميزة "الإعلانات الديناميكية أثناء عرض الفيديو" من "إعلانات الوسائط التفاعلية" إمكانية الدمج في تطبيق بسيط لمشغّل فيديو HbbTV. وتتيح حزمة تطوير البرامج (SDK) الخاصة بميزة "الإعلانات الديناميكية أثناء عرض الفيديو" من "إعلانات الوسائط التفاعلية" طلبات Google Ad Manager لبث إعلانات النطاق العريض لمصاحبة بث محتوى. يتناول هذا الدليل تحميل بيان إعلان استنادًا إلى بيانات أحداث الإعلان من بث الفيديو.

لعرض نموذج دمج مكتمل أو اتّباعه، نزِّل تطبيق HbbTV Linear التجريبي مع حزمة تطوير البرامج لإعلانات البث المباشر في HTML5 من "إعلانات الوسائط التفاعلية". لإتاحة استخدام هذا الدليل وتطبيق GitHub النموذجي على أجهزة التلفزيون القديمة، تم إعدادهما بلغة ES5 JavaScript.

ملاحظة: تتيح حزمة تطوير البرامج لإدراج الإعلان الديناميكي في إعلانات الوسائط التفاعلية بتنسيق HTML5 استخدام بيانات وصفية لسلاسل الإعلانات، وتتطلّب مشغّل وسائط يتيح التحميل المُسبَق للبث. يستخدم هذا الدليل dash.js لمشغّل الفيديو.

للحصول على معلومات حول التكامل مع منصات أخرى غير HbbTV، يُرجى الاطّلاع على حِزم تطوير البرامج لإعلانات الوسائط التفاعلية.

المتطلبات الأساسية

قبل مواصلة قراءة هذا الدليل، تأكَّد من توفّر ما يلي:

• لاستخدام IMA DAI، يجب أن يكون لديك حساب على "مدير الإعلانات 360" المتقدّم. إذا كان لديك حساب على "مدير إعلانات Google"، يُرجى التواصل مع مدير حسابك للحصول على مزيد من التفاصيل. للحصول على معلومات حول الاشتراك في "مدير إعلانات Google"، يُرجى الانتقال إلى مركز مساعدة "مدير إعلانات Google".
• تطبيق HbbTV يتفاعل مع عنصر البث لتشغيل الوسائط. لمزيد من التفاصيل، راجِع مقالة عنصر HbbTV Broadcast AV.
• إصدار dash.js يتوافق مع التحميل المُسبَق ننصحك باستخدام الإصدار 4.6.0 أو إصدار أحدث.
• خادم ويب لاستضافة التطبيق
• بيئة اختبار تتضمّن بث DVB للحصول على تعليمات تفصيلية حول إعداد بيئة الاختبار، يُرجى الاطّلاع على تشغيل تطبيق HbbTV.
  • بث مباشر: يمكنك إعداد بث مباشر يحتوي على بيانات مخصّصة في "جدول معلومات التطبيق" (AIT). تحتاج أيضًا إلى طريقة لنقل بث الفيديو ليتمكّن التلفزيون من استقباله. يمكنك استخدام معدِّل DVB لنقل بث الفيديو أو طرق أخرى.
  • خادم الويب: استضافة تطبيق HbbTV على خادم ويب يمكن للتلفزيون الوصول إليه
• حدث بث مباشر من النوع بيان خدمة حزمة إعلانية لإنشاء الحدث، يُرجى الاطّلاع على إعداد بث مباشر باستخدام ميزة "إدخال الإعلانات الديناميكي".

إنشاء بث متوافق

يستخدم تطبيق HbbTV broadcastContainer.addStreamEventListener() للاستماع إلى أحداث بث HbbTV في بثك. لتحميل الإعلانات وتشغيلها بشكل صحيح، يجب إعداد بثك المباشر باستخدام أنواع الأحداث التالية لتضمين حمولة سلسلة 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"}

بالنسبة إلى هذه الأحداث، أدرِج حمولة سلسلة JSON مع streamEvent.type. لإتاحة التحميل المُسبَق للإعلانات، يجب أن يتضمّن الحدث AD_BREAK_EVENT_ANNOUNCE السمتَين streamEvent.duration وstreamEvent.offset. لمزيد من المعلومات، يُرجى الاطّلاع على الاستماع إلى أحداث بث HbbTV. لإعداد بثك المباشر، اطّلِع على مثال بث نقل MPEG المتعدّد الإرسال. لاستخدام نموذج البث، عليك تعديل عنوان URL لجدول معلومات التطبيق لإعداد البث الخاص بك.

إنشاء مجموعة إعلانية تعرض حدث بث مباشر

لعرض الإعلانات على تطبيق HbbTV، تحتاج إلى حدث بث مباشر لعرض حزمة إعلانات. للحصول على معلومات حول كيفية إعداد الحدث، يُرجى الاطّلاع على إعداد بث مباشر باستخدام ميزة "إدراج الإعلانات الديناميكي". للوصول إلى مصدر البيانات الذي أعددته، يجب أن يحتوي التطبيق على المتغيّرات التالية:

• ‫NETWORK_CODE: هو رمز شبكة "مدير الإعلانات" لطلب الإعلانات.
• ‫CUSTOM_ASSET_KEY: مفتاح مواد العرض المخصّصة في "مدير إعلانات Google" الذي تم إنشاؤه أثناء عملية إعداد البث المباشر لإدراج الإعلان الديناميكي.

إنشاء بنية ملفات التطبيق

يستخدم هذا الدليل بنية ملفات مشابهة لتطبيق IMA HbbTV التجريبي. ولتتمكّن من اتّباع هذا الدليل، أنشئ الملفات التالية:

• ‫index.html: فهرس HTML لتطبيقك.
• ‫Style.css: نمط CSS لتطبيقك
• ‫application.js: نقطة دخول JS الرئيسية. تدير هذه السمة حالة التشغيل والفواصل الإعلانية.
• video_player.js: تدير مشغّل dash.js المستخدَم لتشغيل الإعلانات.
• ‫ads_manager.js: يدير عملية إعداد IMA وطلب البث ومعالجة الأحداث.

ads_manager.js لإعداد حزمة تطوير البرامج لإدراج الإعلان الديناميكي في "إعلانات الوسائط التفاعلية". تنفّذ المكوّنات التالية حزمة تطوير البرامج لإدراج الإعلان الديناميكي من "إعلانات الوسائط التفاعلية":

• ‫PodStreamRequest: هو عنصر يحدّد طلب بث إلى خوادم Google الإعلانية.
• StreamManager: كائن يعالج عمليات بث "إدراج الإعلان الديناميكي" والتفاعلات مع الخادم الخلفي لـ "إدراج الإعلان الديناميكي". يتولّى مدير البث أيضًا معالجة إشارات التتبُّع وإعادة توجيه أحداث البث والإعلانات إلى الناشر.

للحصول على تعليمات تفصيلية حول إعداد بيئة الاختبار، يُرجى الرجوع إلى هذا الدليل حول تشغيل تطبيق HbbTV.

تحميل حزمة تطوير البرامج لإدراج الإعلان الديناميكي من "إعلانات الوسائط التفاعلية" وDASH.js

لبدء تشغيل بث إعلاني، حمِّل حزمة تطوير البرامج (SDK) الخاصة بميزة "الإعلانات الديناميكية أثناء عرض الفيديو" (DAI) من "إعلانات الوسائط التفاعلية" (IMA) وdash.js في تطبيقك. قبل علامة application.js، أضِف dash.js وإطار عمل "إعلانات الوسائط التفاعلية" باستخدام علامات النصوص البرمجية في index.html.

<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 والتحكّم فيه.