-jio-start-block-type-3
¶ Instream Video¶ IntroductionPre-roll video Ad(Pre-roll / Mid-roll or Ad-break) will play only one single Ad, Mid-roll video Ad, however, generally you can play series of Ads back to back. Both pre/mid roll Ad requires a container id to be provided in the <ins> tag. Mid-roll/Ad-break requires duration to be passed in the <ins> tag
You can apply custom styling on the container to suite your requirements.
|
 |
-jio-end-block-type-3
-jio-start-block-type-2
-jio-style-title
¶ Pre-roll
You need to provide an empty <div> tag & use the id of that div in the <ins> tag as the value of data-container-id property.
<div id="my-instream-video-container"></div>
<ins
id="[ENTER-UNIQUE-PLACEMENT-HERE]"
data-adspot-key="[ENTER- ADSPOTKEY-HERE]"
data-source="[ENTER-PACKAGE-NAME/APP-IDENTIFIER]"
data-container-id="[ID-OF-AN-EMPTY-DIV-ELEMENT]"></ins>
-jio-style-title
¶ Mid-roll/ad-break
Same like pre-roll, a container id must be provide along with a duration in seconds which must be equals or greater than 2 seconds.
<div id="my-instream-video-container"></div>
<ins
id="[ENTER-UNIQUE-PLACEMENT-HERE]"
data-adspot-key="[ENTER- ADSPOTKEY-HERE]"
data-source="[ENTER-PACKAGE-NAME/APP-IDENTIFIER]"
data-container-id="[ID-OF-AN-EMPTY-DIV-ELEMENT"
data-ad-break- duration="90"></ins>
You can set the Ad break within the INS tag data-ad-break-duration= [value in secs] attribute, in order to create an midroll. Midroll are instream ads that are played back to back till the duration completes.
This feature is used to monetize during live streaming of events where the duration of the ad breaks are unknown to the publisher
To initiate the Ad break you will need to use the below code into your application:
<ins
id="[ENTER-UNIQUE-PLACEMENTID-HERE]"
data-adspot-key="[ENTER-ADSPOTKEY-HERE]"
data-container-id="[ENTER-CONATINER-ID-WHERE-YOU-WANT-TO-SHOW-AN-AD]"
data-ad-break-duration="[ENTER-AD-BREAK-DURATION]"></ins>
data-ad-break-duration : ad break duration for a midroll
data-container-id : this is an placement where you want to show your Ad
Kindly ensure the minimum value for data-ad-break-duration is 2 or greater than 2 secs else the will not create a video Ad break while throwing appropriate error.
-jio-end-block-type-2
-jio-start-block-type-2
¶ Customizing Instream Ads
Application can customize the instream ads by overriding the default styling of the below classes.
-jio-tables
| Class Names | Description |
|---|---|
| .jads-bg-grey | For changing the background of the footer |
| .jads-icon | For changing the styling of the icons on the player |
| .jads-icon-play | For replacing the play icon |
| .jads-icon-play.jads-icon-playing | For replacing the pause icon |
| .jads-icon-mute | For replacing the unmute icon |
| .jads-icon-mute.jads-icon-muted | For replacing the mute icon |
| .jads-color-white | For changing the color of the ad timer |
| .jads_media_time | For changing the position of the ad timer |
| .jads-cta-box | For changing the position and styling of CTA |
| .jads-cta-top | For changing the position of visit advertiser |
| .jads-cta-bottom | For changing the position of skip |
| .jads-btn | For styling the buttons on the player |
| .jads-media-player-video | For styling video tag |
| .jads_progress_qs | For styling the address bar |
-jio-end-block-type-2