با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
IMA DAI SDK از ادغام با یک برنامه پخش کننده ویدیوی HbbTV حداقل پشتیبانی می کند. IMA DAI SDK تقاضای Google Ad Manager را برای جریان تبلیغات پهن باند برای همراهی با جریان محتوای پخشی را قادر می‌سازد. این راهنما بارگیری مانیفست آگهی را بر اساس داده‌های رویداد آگهی از جریان پخش پوشش می‌دهد.
برای مشاهده یا دنبال کردن یک نمونه کامل یکپارچه، برنامه نمونه خطی HbbTV را با IMA HTML5 DAI SDK دانلود کنید. برای پشتیبانی از دستگاه های تلویزیون قدیمی، این راهنما و برنامه نمونه GitHub در جاوا اسکریپت ES5 هستند.
قبل از ادامه این راهنما، تأیید کنید که موارد زیر را دارید:
برای استفاده از IMA DAI، باید یک حساب Ad Manager 360 Advanced داشته باشید. اگر حساب Ad Manager دارید، برای جزئیات بیشتر با مدیر حساب خود تماس بگیرید. برای کسب اطلاعات در مورد ثبت نام در Ad Manager، از مرکز راهنمای Ad Manager دیدن کنید.
یک برنامه HbbTV که با شی پخش شده برای پخش رسانه تعامل دارد. برای جزئیات بیشتر، HbbTV Broadcast AV را ببینید.
نسخه dash.js که از پیش بارگیری پشتیبانی می کند. توصیه می کنیم از نسخه 4.6.0 یا بالاتر استفاده کنید.
یک وب سرور برای میزبانی برنامه.
یک محیط آزمایشی با جریان پخش DVB. برای دستورالعمل‌های دقیق در مورد راه‌اندازی محیط آزمایش، به اجرای برنامه HbbTV مراجعه کنید.
پخش جریانی : یک جریان پخش حاوی داده های جدول اطلاعات برنامه (AIT) سفارشی آماده کنید. شما همچنین به راهی برای انتقال جریان پخش برای دریافت توسط تلویزیون نیاز دارید. می توانید از یک مدولاتور DVB برای انتقال جریان پخش یا روش های دیگر استفاده کنید.
وب سرور : برنامه HbbTV را روی یک وب سرور قابل دسترسی توسط تلویزیون میزبانی کنید.
برنامه HbbTV شما از broadcastContainer.addStreamEventListener() برای گوش دادن به رویدادهای پخش جریانی HbbTV در جریان پخش شما استفاده می کند. برای بارگیری و پخش صحیح تبلیغات، باید جریان پخش خود را با انواع رویداد زیر تنظیم کنید تا شامل بار رشته JSON مرتبط باشد:
برای این رویدادها، یک بار رشته JSON با streamEvent.type اضافه کنید. برای پشتیبانی از بارگیری از قبل آگهی، رویداد AD_BREAK_EVENT_ANNOUNCE باید شامل streamEvent.duration و streamEvent.offset باشد. برای اطلاعات بیشتر، گوش دادن به رویدادهای جریان HbbTV را ببینید. برای تنظیم جریان پخش خود، به مثال جریان انتقال MPEG چندگانه مراجعه کنید. برای استفاده از جریان مثال، باید URL جدول اطلاعات برنامه را برای تنظیم جریان خود به روز کنید.
یک رویداد پخش زنده برای سرویس پاد ایجاد کنید
برای ارائه تبلیغات به برنامه HbbTV خود، به یک رویداد پخش جریانی زنده نیاز دارید. برای اطلاعات در مورد راه اندازی رویداد، به تنظیم جریان زنده برای DAI مراجعه کنید. برای دسترسی به جریانی که تنظیم کرده‌اید، برنامه باید متغیرهای زیر را داشته باشد:
NETWORK_CODE : کد شبکه Ad Manager برای درخواست تبلیغات.
CUSTOM_ASSET_KEY : کلید دارایی سفارشی Ad Manager که در طول فرآیند راه‌اندازی پخش زنده برای DAI ایجاد می‌شود.
ساختار فایل برنامه را ایجاد کنید
این راهنما از ساختار فایل مشابهی با برنامه نمونه IMA HbbTV استفاده می کند. برای دنبال کردن این راهنما، فایل های زیر را ایجاد کنید:
index.html : فهرست HTML برای برنامه شما.
Style.css : یک ظاهر طراحی CSS برای برنامه شما.
application.js : نقطه ورودی اصلی JS. playstate و وقفه های تبلیغاتی را مدیریت می کند.
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 اضافه کنید.
تاریخ آخرین بهروزرسانی 2025-08-30 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-08-30 بهوقت ساعت هماهنگ جهانی."],[[["\u003cp\u003eThis guide provides instructions on integrating the IMA DAI SDK into an HbbTV video player application for dynamic ad insertion.\u003c/p\u003e\n"],["\u003cp\u003ePrerequisites include an Ad Manager 360 Advanced account, an HbbTV app, a compatible dash.js version, a web server, and a testing environment with a DVB broadcast stream.\u003c/p\u003e\n"],["\u003cp\u003eThe broadcast stream needs specific event types with JSON payloads for ad break announcements, starts, and ends to trigger ad insertion.\u003c/p\u003e\n"],["\u003cp\u003eA pod serving livestream event is required in Ad Manager to deliver ads to the HbbTV app.\u003c/p\u003e\n"],["\u003cp\u003eThe integration process involves creating the application file structure, loading the IMA DAI SDK and dash.js, and setting up the stream request and ad management.\u003c/p\u003e\n"]]],[],null,["The IMA DAI SDK supports integration into a minimal HbbTV video player app. The\nIMA DAI SDK enables Google Ad Manager demand for a broadband ad stream to\naccompany a broadcast content stream. This guide covers\n[loading an ad manifest](/ad-manager/dynamic-ad-insertion/sdk/html5/TODO_link_to_ad_pod_manifest)\nbased on ad event data from the broadcast stream.\n\nTo view or follow along with a completed sample integration, download the\n[HbbTV Linear Sample App with IMA HTML5 DAI SDK](//github.com/googleads/googleads-ima-html5-dai/tree/main/hbbtv).\nTo support older TV devices, this guide and the GitHub sample app are in ES5\nJavaScript.\n| **Note:** The IMA DAI SDK for HTML5 supports ad pod manifests, and requires a media player with stream preloading support. This guide uses [dash.js](//github.com/Dash-Industry-Forum/dash.js/) for the video player.\n\nFor information on integrating with other non-HbbTV platforms, see\n[Interactive Media Ads SDKs](/interactive-media-ads).\n\nPrerequisites\n\nBefore continuing with this guide, confirm you have the following:\n\n- To use IMA DAI, you must have an [Ad Manager 360 Advanced](//support.google.com/admanager/answer/3485387) account. If you have an Ad Manager account, contact your account manager for more details. For information about signing up for Ad Manager, visit the [Ad Manager Help Center](//support.google.com/admanager/answer/7084151).\n- An HbbTV app interacting with the broadcast object for media playback. For more details, see [HbbTV Broadcast AV object](//developer.hbbtv.org/guide/broadcast-video-control/handling-the-broadcast-av-object/).\n- A dash.js version that supports preloading. We recommend using version 4.6.0 or later.\n- A web server to host the application.\n- A testing environment with a DVB broadcast stream. For detailed instructions on setting up your testing environment, see [Running an HbbTV application](//developer.hbbtv.org/tutorials/running-a-hbbtv-application-on-a-hybrid-terminal/).\n - **Broadcast Stream**: Prepare a broadcast stream containing custom Application Information Table (AIT) data. You also require a way to transmit the broadcast stream for reception by the TV. You can use a DVB modulator to transmit the broadcast stream, or other methods.\n - **Web Server**: Host the HbbTV application on a web server accessible by the TV.\n- A livestream event with type **Pod serving manifest** . To create the event, see [Set up a livestream for DAI](//support.google.com/admanager/answer/7294289).\n\nCreate a compatible broadcast stream\n\nYour HbbTV app uses `broadcastContainer.addStreamEventListener()` to listen\nto HbbTV stream events in your broadcast stream. To properly load and play ads,\nyou must set up your broadcast stream with the following event types to\ninclude the associated JSON string payload:\n\n- `AD_BREAK_EVENT_ANNOUNCE` - `{\"type\":\"adBreakAnnounce\", \"pod_id\":1,\"duration\":90, \"offset\":10}`\n- `AD_BREAK_EVENT_START` - `{\"type\":\"adBreakStart\"}`\n- `AD_BREAK_EVENT_END` - `{\"type\":\"adBreakEnd\"}`\n\nFor these events, include a JSON string payload with `streamEvent.type`. To\nsupport ad preloading, the `AD_BREAK_EVENT_ANNOUNCE` event must include\n`streamEvent.duration` and `streamEvent.offset`. For more information, see\n[Listen to HbbTV stream events](/ad-manager/dynamic-ad-insertion/sdk/html5/hbbtv-application#listen_to_hbbtv_stream_events).\nTo set up your broadcast stream, see the example\n[multiplexed MPEG transport stream](https://storage.googleapis.com/interactive-media-ads/media/ima-hbbtv-sample-transfer-stream.ts).\nTo use the example stream, you must update the application information table URL\nfor your own stream setup.\n\nCreate a pod serving livestream event\n\nTo serve ads to your HbbTV app, you need a pod serving livestream event. For\ninformation on setting up the event, see\n[Set up a livestream for DAI](//support.google.com/admanager/answer/7294289).\nTo access the stream you set up, the app must have the following variables:\n\n- `NETWORK_CODE`: The Ad Manager network code for requesting ads.\n- `CUSTOM_ASSET_KEY`: The Ad Manager custom asset key generated during the process of setting up the livestream for DAI.\n\nCreate the application file structure\n\nThis guide uses a similar file structure to the\n[IMA HbbTV sample app](//github.com/googleads/googleads-ima-html5-dai/tree/main/hbbtv).\nTo follow along with this guide, create the following files:\n\n- `index.html`: HTML index for your app.\n- `Style.css`: CSS styling for your app.\n- `application.js`: Main JS entry point. Manages playstate and ad breaks.\n- `video_player.js`: Manages the dash.js player used for ad playback.\n- `ads_manager.js`: Manages the IMA setup, stream request, and event handling.\n\n`ads_manager.js` sets up the IMA DAI SDK. The following components implement the\nIMA DAI SDK:\n\n- [`PodStreamRequest`](/ad-manager/dynamic-ad-insertion/sdk/html5/reference/js/PodStreamRequest): An object that defines a stream request to Google's advertising servers.\n- [`StreamManager`](/ad-manager/dynamic-ad-insertion/sdk/html5/reference/js/StreamManager): An object that handles dynamic ad insertion streams and interactions with the DAI backend. The stream manager also handles tracking pings and forwards stream and ad events to the publisher.\n\nFor detailed instructions on setting up your testing environment, refer to this\nguide on [running an HbbTV application](//developer.hbbtv.org/tutorials/running-a-hbbtv-application-on-a-hybrid-terminal/).\n\nLoad the IMA DAI SDK and DASH.js\n\nTo begin broadcast ad stream playback, load the IMA DAI SDK and dash.js into\nyour app. Before the `application.js` tag, add dash.js and the IMA framework\nusing script tags in `index.html`. \n\n \u003cscript src=\"https://cdn.jsdelivr.net/npm/dashjs@latest/dist/dash.all.min.js\"\u003e\u003c/script\u003e\n \u003cscript src=\"//imasdk.googleapis.com/js/sdkloader/ima3_dai.js\"\u003e\u003c/script\u003e \n https://github.com/googleads/googleads-ima-html5-dai/blob/d215db4a053d12c842e899da470684142ff732f6/hbbtv/index.html#L23-L24\n\nNext, create a video player wrapper class to initiate and control the dash.js\nplayer."]]
