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

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

لعرض نموذج تكامل مكتمل أو اتّباعه، نزِّل الـ HbbTV Linear Sample App مع حزمة IMA HTML5 DAI SDK. للتوافق مع أجهزة التلفزيون القديمة، يتوفّر هذا الدليل وتطبيق GitHub النموذجي بلغة JavaScript ES5.

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

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

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

  • لاستخدام ميزة IMA DAI، يجب أن يكون لديك حساب على "مدير إعلانات Google" 360 المتقدّم. إذا كان لديك حساب على "مدير إعلانات Google"، يُرجى التواصل مع مدير حسابك للحصول على مزيد من التفاصيل. للحصول على معلومات عن الاشتراك في "مدير إعلانات Google"، يُرجى زيارة الـ مركز مساعدة "مدير إعلانات Google".
  • تطبيق HbbTV يتفاعل مع عنصر البث لتشغيل الوسائط لمزيد من التفاصيل، يُرجى الاطّلاع على مقالة HbbTV Broadcast AV object.
  • إصدار من 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 حزمة IMA DAI SDK. تنفِّذ المكوّنات التالية حزمة IMA DAI SDK:

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

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

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

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