[null,null,["上次更新時間：2025-08-31 (世界標準時間)。"],[[["\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."]]
