UNPKG

videogular2

Version:

Videogular is a video application framework for desktop and mobile powered by Angular

41 lines (33 loc) 2.11 kB
# VgImaAds @Component Component to display videos and banners with the [Google IMA HTML5 SDK](https://developers.google.com/interactive-media-ads/docs/sdks/html5/). ## Inputs | Input | Description | |--- |--- | | vgFor | Target media `id` property to play/pause the specified media. This parameter is optional and only necessary if you have more than one media registered into `VgAPI`. | | vgAdTagUrl | Required. String to the advertisement tag url. | | vgCompanion | Optional. String with the `id` of a container to display the companion ad. If you want to read more about it, please look [official docs](https://developers.google.com/interactive-media-ads/docs/sdks/html5/companions-gpt). | | vgCompanionSize | Optional. Array of numbers with sizes of the companion ad. Format: `[width, height]`. | | vgNetwork | Optional. String with the network id provided by [Google Publisher Tag](https://developers.google.com/doubleclick-gpt/). | | vgUnitPath | Optional. String with the unit path id provided by [Google Publisher Tag](https://developers.google.com/doubleclick-gpt/). | | vgSkipButton | Optional. String with a query selector to display a custom skip button. You must set the element with `position` style to `absolute` and `z-index` at least `1`. | ## HTML Definition ```html <vg-player id="demo-player"> <vg-ima-ads [vgCompanion]="'companion-ad'" [vgCompanionSize]="[728, 90]" [vgNetwork]="'6062'" [vgUnitPath]="'iab_vast_samples'" [vgAdTagUrl]="'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator='" [vgSkipButton]="'.skip-button'"> </vg-ima-ads> <video #myMedia [vgMedia]="myMedia" id="my-video" src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4"> </video> </vg-player> <div class='skip-button'>custom skip ad button</div> <div id="companion-ad"></div> ```