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

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

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

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

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

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

  • لاستخدام IMA DAI، يجب أن يكون لديك حساب على Ad Manager 360 Advanced. إذا كان لديك حساب على "مدير إعلانات 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، تحتاج إلى حدث بث مباشر لعرض الإعلانات المتسلسلة. للحصول على معلومات حول إعداد الحدث، يُرجى الاطّلاع على مقالة إعداد بث مباشر لإعلانات DAI. للوصول إلى مصدر البيانات الذي أعددته، يجب أن يحتوي التطبيق على المتغيّرات التالية:

  • 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 لإعداد حزمة تطوير البرامج (SDK) الخاصة بـ IMA DAI. تنفّذ المكوّنات التالية حزمة تطوير البرامج (SDK) لإدراج الإعلان الديناميكي من IMA DAI:

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

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

تحميل حزمة تطوير البرامج (SDK) في IMA DAI وDASH.js

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

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

التالي
إعداد فئة اللاعب