بدء استخدام حزمة تطوير البرامج لإعلانات الوسائط التفاعلية على 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 على خادم ويب يمكن لـ التلفزيون الوصول إليه.
  • حدث بث مباشر من النوع بيان عرض الإعلانات المتسلسلة لإنشاء الحدث، يُرجى الاطّلاع على مقالة إعداد بث مباشر لـ DAI.

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

يستخدم تطبيق 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" الذي تم إنشاؤه أثناء عملية إعداد البث المباشر لـ DAI

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

يستخدم هذا الدليل بنية ملف مشابهة لبنية ملف نموذج تطبيق 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: كائن يعالج بثوق إدراج الإعلانات الديناميكية والتفاعلات مع واجهة DAI الخلفية يعالج مدير البث أيضًا طلبات التتبُّع ويرسل أحداث البث والإعلانات إلى الناشر.

للحصول على تعليمات تفصيلية حول إعداد بيئة الاختبار، يُرجى الاطّلاع على هذا الدليل حول تشغيل تطبيق 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>
index.html

بعد ذلك، عليك إنشاء فئة برنامج تضمين لمشغّل الفيديو لبدء مشغّل dash.js والتحكّم فيه.

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