Use Videos in HTML5 Banners

HTML5 banner ads can have an embedded video by adding a video player component.

Video Player Component

With the Video Player component you can create an HTML video player.

Load the Components

To use Adform components in an HTML5 ad:

Load the main JavaScript library: Adform.DHTML.js within the <head> tags.
Load wanted component(s) after the main library's <script> tags.

Alternatively, you can insert the following code into your document:

<script>
document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
</script>
  <!--Components-->
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoPlayer.js"></script>
    <script src="//s1.adform.net/banners/scripts/components/Adform.Products.js"></script>
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoStats.js"></script>
    <script src="//s1.adform.net/banners/scripts/components/Adform.SingleExpanding.js"></script>
   <!--Components-->

For more information, see General Guidelines section in Add More Components to HTML5 Banners article.

Basic Setup

To create the Video Player component, use the default controls and styles provided by Adform. The player is fully compatible with the Adform system, including all the stats (events) and configuration options.

Note

Together with the Video Player component, use the Video Player Container, a highly customizable video player upgrade. It offers simplified video player reusability (add and remove the component) and code optimization.

Initiate the Video Player and the Video Player Container within the .html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Video MPU v 1.5</title>
    <link rel="stylesheet" href="//s1.adform.net/banners/scripts/components/styles/Adform.Styles-1.css" />
    <link rel="stylesheet" href="styles/custom.css" />
    <script>
        document.write('<script src="'+ (window.API_URL || '//s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
    </script>
    <!-- Components -->
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoContainer.js"></script>
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoPlayer.js"></script>
    <!-- Components -->
</head>
<body>
    <div id="adf-banner" class="adf-Banner adf-Background adf-Border u-sizeFull">
         
        <!-- Banner contents -->
        <div id="adf-click-area" class="adf-clickArea u-sizeFull">
            <div id="adf-logo" class="adf-Logo"></div>
        </div>
        <div id="adf-video" class="adf-Video u-hCentered"></div>
        <!-- Banner contents -->
     
    </div>
     
    <script src="scripts/custom.js"></script>
     
    <!-- User code -->
    <script>
    (function () {

            var clickArea = document.getElementById('adf-click-area');
            var clickTAGvalue = Adform.getVar('clickTAG') || '//www.adform.com'; // Adform.getVar() gets clickTAG variable from Adform, if it is not defined (e.g. banner is being tested locally) it will fallback to second value
            var landingpagetarget = Adform.getVar('landingPageTarget') || '_blank'; // same as above - landingPageTarget from Adform or falls back to _blank
            var banner = document.getElementById('adf-banner');
            var background = Adform.getAsset(4); // set banner background through additional asset
 
            var player = new Adf.VideoContainer({
                container: '#adf-video', // id or class of an element where the video should be rendered
                clicktag: clickTAGvalue,
                target: landingpagetarget
            });
 
            player.init(); // initialize video player
 
            clickArea.addEventListener('click', function () {
                window.open(clickTAGvalue, landingpagetarget);
            });
         })();
    </script>
    <!-- User code -->
</body>
</html>

Create folder scripts.
Inside the new folder, place the created custom.js.

Inside custom.js, place the following code:

/* REUSABLE UTILITIES */
 
/* SETS IMAGE AS BACKGROUND */
function setBackgroundImage(elem, background, position, size) {
    if (elem && background) {
        elem.style.background = 'url(' + background + ') no-repeat ' + (position || '50% 50%') + ' / ' + (size || 'cover');
    }
}
 
/* REMOVES ELEMENTS WHEN IMAGE IS SET AS BACKGROUND */
function removeElems() {
    [].forEach.call(arguments, function (id) {
        var elem = document.getElementById(id);
        elem.parentNode.removeChild(elem);
    });
}

Create folder styles.
Inside the new folder, place the created custom.css.

Inside the custom.css, place the following code:

/* Custom styles - write new or change existing styles below as necessary */
.adf-Video {
    top: 65px;
    background: #000;
    max-height: 100%;
    width: 100%;
}
.adf-Video::before {
    padding-top: 56.25%; /* 16:9 ratio */
    display: block;
    content: '';
}

Note

Click to see an example of the HTML5 banner ad with a video player.

Video Player HTML Structure

After initialization, the Video Player component renders as follows:

<div class="adform-video-container">
  <video preload="none" poster="./poster.jpg" width="600" height="450" class="" src="./video_file.mp4">
    <source src="./video_file.mp4">
  </video>
  <div style="position: absolute; top: 0px; width: 600px; height: 450px; background-image: url(./poster.jpg); background-color: rgb(0, 0, 0); background-size: contain; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></div>
  <div class="adform-video-big-play"></div>
  <div class="adform-video-play-pause"></div>
  <div class="adform-video-rewind"></div>
  <div class="adform-video-stop"></div>
  <div class="adform-video-seek-bar">
    <div class="adform-video-seek-bar-border">
      <div class="adform-video-seek-bar-background">
        <div class="adform-video-seek-bar-loaded"></div>
        <div class="adform-video-seek-bar-played"></div>
      </div>
    </div>
  </div>
  <div class="adform-video-sound"></div>
  <div class="adform-video-full-screen"></div>
</div>

Video Player Tracking

Video events:

video play start
played 25% of video
played 50% of video
played 75% of video
video playback complete

Video controls events:

play button press
pause button press
stop button press
sound on button press
sound off button press
full screen on button press
full screen off button press
rewind button press

Video Player Options

The following table provides the options that you can set when creating a video player.

Note

Content variables always overwrite some of these options.

Name	Type	Description
sources	Array	An array of objects representing video source file. Each source object must contain: file (required) property with a source URI MIME (optional) property with a video source mime type codec (optional) property with a video source and codec Bind mime and coded options as well. Example: `sources: [{ 'file': dhtml.getAsset(1), mime: 'video/mp4' }]`
width	Integer	Defines video player width (default is auto)
height	Integer	Defines video player height (default is auto)
poster	String	A path to an image file to work as a video poster while video hasn't started
loop	Boolean	Used when a video must be looped. (Default is false. Also, Code loopVideo content var will override this property.)
muted	Boolean	Used when a video must be muted. (Default is false. Also, soundOn content var will override this property.)
videoSeek	Boolean	Used for enabling and disabling the ability to use the seek bar in a video player (default is true)
autoplay	Boolean	Used when a video must be played when added to the stage. (Default is false. Also, autoPlay content var will override this property.)
preload	Boolean	Used for enabling video pre-loading. With this property set to true, the video will start loading even if it isn't playing. Note The amount preloaded may vary from browser to browser.
inview	Integer	Viewability percent, from 1 to 100. Works only when autoplay is enabled. Video automatically starts playing when percent is higher than defined, and pauses, when lower.
trackEvents	Boolean	Used when a video must send video events to a server (default is true)
theme	String	A link to a theme CSS. You can now use the new updated player theme V2. Simply pass-in parameter v2 to this option.
clicktag	String	Used when video needs to be clickable.
playOnExpand	Boolean	Used only in SingleExpanding banners. With this property set to true video player will automatically play/pause on expand/collapse events. Note: Note Works only when autoplay is enabled.

Note

Content vars might be set in Adform Studio or the platform. For example, autoplay could be set in the Adform Studio and this would override the setting autoplay:false in the player initialization.

Video Player Component Methods

VideoPlayer public methods	Description
create (static)	function create(options) Creates and returns a video player with all the possible controls. If the video isn't supported in a current browser or some options are incorrect, returns null. Arguments : options - Object, video player options (see Options paragraph). Returns: Partial - Video player object.
createVideo (static)	function createVideo(options) Creates and returns a video player with all the possible controls. If the video isn't supported in a current browser or some options are incorrect, returns null. Arguments: options - Object, video player options (see Options paragraph). Returns: Partial - Video player object.
createBigPlay (static)	function createBigPlay(htmlOrIdOrElem)
createPlayPause (static)	function createPlayPause(htmlOrIdOrElem)
createRewind (static)	function createRewind(htmlOrIdOrElem)
createStop (static)	function createStop(htmlOrIdOrElem)
createSound (static)	function createSound(htmlOrIdOrElem)
createFullScreen (static)	function createFullScreen(htmlOrIdOrElem) Creates and returns the corresponding video control. It's necessary to register a control(s) container element using {video}.addContainer({container}) for css states to work. Also, it's necessary to pass the video object using {videoControl}.bind({video}) method to bind the current control to an appropriate video. Arguments: htmlOrIdOrElem - Control container (optional). Possible values: HTML code, div id or HTML element. Returns: Partial - Video control object.
createSeekBar (static)	function createSeekBar() Creates and returns the video seek bar. It's necessary to pass the video object using {videoControl}.bind({video}) method to bind the seek bar to an appropriate video. Arguments: Doesn't accept any arguments. Returns: Partial - Video seek bar object.
setVideoSource	function setVideoSource(sources) This method is used to reset a current player video source. If no valid source is found, an error appears. After the source is reset, the play position of a new video will be started from the begining and the video player will be in the same state as it was before the source was reset, this means, if the video was playing, the new video will be playing as well, and if it was paused — the new video will also be paused. Arguments: sources — Array, an array with objects representing the video source file. Each source object must contain: file (required) property with source URI; mime (optional) property with video source mime type; codec (optional) property with video source and codec. Returns: Nothing.
setPoster	function setPoster(posterURL) The method is used to change a video poster. It must be executed immediately after setVideoSource is called, otherwise the poster of a newly switched video will be just a black rectangle. Arguments: posterURL - String, link to a poster image. Returns: Nothing.

Video public methods
addContainer	function addContainer(container) Register a container for the current video player. Depending on a different video state, specific classes will be applied to all the registered containers. This helps to control, for example, the video button states. Arguments: container - Partial, HTML code, id or HTML element. Returns: Partial - Video Partial instance.
play	function play() Play current video. Arguments: Doesn't accept any arguments. Returns: Partial - Video Partial instance
pause	function pause() Pause a current video. Arguments: Doesn't accept any arguments. Returns: Partial - Video Partial instance.
stop	function stop() Stop a current video. Arguments: Doesn't accept any arguments. Returns: Partial - Video Partial instance.
togglePlayPause	function toggle PlayPause() Play a video if it's paused or stopped, and pause the video if it's playing. Arguments: Does not accept any arguments. Returns: Partial - Video Partial instance.
toggleMute	function toggleMute() Mute a current video depending if it is unmuted and conversely. Arguments: Doesn't accept any arguments. Returns: Partial - Video Partial instance.
seek	function seek(position) Seek to a specific video position. Seeking is available only if the video was already played. Arguments: position — Number, Video position between 0 and 1. Returns: Partial — Video Partial instance.
mute	function mute(value) Set and get the current mute state. Arguments: value — Boolean, optional, new mute state. Returns: Boolean — when a video is muted returns true , otherwise returns false.

Video Controls public methods
bind	function bind(video) This method is used to bind a current control to an appropriate video Partial. Arguments: video — Video Partial object. Returns: Partial — Current control instance.

Video Player Properties

Video Player Properties

Property	Description	Type
video, playPause, rewind, stop, seekBar, sound, fullScreen	Used to get a corresponding video or video control Partial object.	Partial

Video Properties

Property	Description	Type	Default
nativeControls	Determines that player will use native controls of an HTML video tag. Some mobile browsers (such as iPhone Safari) play through the native video player.	Boolean	False
state	Current video state. VideoPlayer has three states: Stopped — video isn't playing and playback position is at 0 Paused — video isn't playing and playback position is greater than 0 Playing — video is playing	String	Stopped
trackEvents	Represents if video stats-events are tracked (true or false).	Boolean	True

Video Player Events

You can add (and remove) event listeners with methods {instance}.on() and {instance}.off().

Video Events

playProgress: dispatches on a video play progress change. Also, the play progress (value between 0 and 1) is passed to an event handler.
```
video.on('playProgress', function (progress) {
    console.log(progress);
});
```
loadProgress: dispatches on a video load progress change. Also, the load progress (value between 0 and 1) is passed to the event handler.
```
video.on('loadProgress', function (progress) {
    console.log(progress);
});
```

muted: dispatches when the video is muted or unmuted. Also, a mute state (true or false) is passed to the event handler.

video.on('muted', function (muted) {
    if (muted) {
        console.log('video is muted');
    } else {
        console.log('video is unmuted');
    }
});

state: dispatches on a video playback state change. Also, the playback state ('playing', 'stopped', 'paused') is passed to the event handler.
```
video.on('state', function (state) {
    console.log('Video is now ' + state);
});
```

changed:stage: dispatches when Partial object is added/removed to/from the HTML. Also staged property (true or false) is passed to the event handler.

partial.on('changed:stage', function (staged) {
    if (stage) {
        console.log('Partial is added to HTML');
    } else {
        console.log('Partial is removed from HTML');
    }
});

changed:node: dispatches on a node element change. Also, the new and old elements are passed to the event handler.

partial.on('changed:node', function (node, old) {
    console.log('Old Partial node: ' + old);
    console.log('Current Partial node: ' + node);
});

hover: dispatches on a mouse over/out. Also, the event target and event type are passed to the event handler.
mousedown: dispatches on a mouse down. Also, the event target and event type are passed to the event handler.
mouseup: dispatches on a mouse up. Also, the event target and event type are passed to the event handler.

click: dispatches on a mouse click. Also, the event target and event type are passed to the event handler.

function eventHandler(target, type) {
    console.log(type + ' event was dispatched');
}
 
partial.on('hover', eventHandler);
partial.on('mousedown', eventHandler);
partial.on('mouseup', eventHandler);
partial.on('click', eventHandler);

Video Player Styling

If you include the DHTML.js script, a video player loads the default Adform theme. Otherwise, include a custom (or Adform) CSS to its HTML or specify a link to it by setting the options.theme property. However, if you use your own CSS, the classes, described below, have to be implemented.

Video Player Container Class

Apply this class within a video player container's <div> tags.

.adform-video-container {}

Simple Controls Classes

.adform-video-play-pause {}
.adform-video-play-pause:hover {}
.adform-video-stop {}
.adform-video-stop:hover {}
.adform-video-rewind {}
.adform-video-rewind:hover {}
.adform-video-full-screen {}
.adform-video-full-screen:hover {}
.adform-video-sound:hover {}
.adform-video-sound:hover {}

Big Play Button Classes

You can use a big play button in both mobile and non-mobile environments. Its size is 25% of the video player (counting from the shorter margin).

.adform-video-big-play {}
.adform-video-big-play:hover {}

Seek Bar Classes

Seek bar (SeekBar) controls are used to provide visual feedback on the control's value. A user can touch or drag the seek bar to change its position. There are five seek bar classes. You can implement hover states for these classes.

.adform-video-seek-bar-border {}
.adform-video-seek-bar-border {}
.adform-video-seek-bar-background {}
.adform-video-seek-bar-loaded {}
.adform-video-seek-bar-played {}

State Classes

You can apply state classes to a video container to change the appearance of the video controls. State classes pair with some video control classes and override the primary control classes.

There are four types of state classes:

State classes	Class name
Sound (Mute) State	.adform-video-sound-on {} .adform-video-sound-off {}
l Screen State	.adform-video-full-screen-on {} .adform-video-full-screen-off {} .adform-video-no-full-screen {}
Tablet Environment	.adform-video-tablet {}
Video Playback State	.adform-video-state-stopped {} .adform-video-state-playing {} .adform-video-state-paused {}

Video Player Container Component

Video player container or wrapper is a highly customizable video player upgrade. It provides simplified video player reusability (add/remove component) and code optimization.

Note

Video Container isn't supported with MRAID based formats. It's compatible with Desktop and Mobile Web-based formats which use DHTML.js.

A video player container example:

See the template in Adform Studio.

Initialization

To make sure that the DHTML library and DHTML Video Player are implemented, initialize the container:

var player = new Adf.VideoContainer({
    container: '#adf-video', 
    clicktag: clickTAGvalue,
    target: landingpagetarget
});

player.init();

Required Settings

You must set these properties that have for the Video Container:

Name	Type	Description
container	`string`	ID or class of a DOM element where video should be rendered
clicktag	`string`	Clicktag URL
target	`string`	Clicktag target (such as "_blank")

Optional Settings

Name	Type	Default	Description
video	object	`{ sources: Adform.getVar(‘videoSources’), poster: Adform.getAsset(3), playOnExpand: true, theme: ‘v2’ }`	Video object that accepts the parameters used by Video Player component

Methods

See the possible exposed methods in the following table:

Name	Description
`player.video()`	Returns video object
`player.play()`	Starts video
`player.pause()`	Pauses video
`player.stop()`	Stops video
`player.mute()`	Mutes video
`player.unmute()`	Unmutes video
`player.toggleSound()`	Toggles video sound

Non-Adform Video Players

To automatically track Adform stats using any other video player or video element:

Load Adform scripts.
Create an AdformStats object.
Pass the video HTML element to the stats constructor.

Note

Only video events will be sent (see Video Player Tracking section). If video control events are necessary, implement them into custom video control.

Example of non-Adform video player

<!DOCTYPE html>
<html>
<head>
  <title>Demo</title>
</head>

  <body>
  <script>
    var components = [
      'VideoStats'
    ];
    document.write('<script src="' + (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv=' + Math.random()) + '"><\/script>');
  </script>

  <video id="video" controls>
    <source src="sample_mp4_video.mp4" type="video/mp4">
  </video>

  <script>
      var videoElement = document.getElementById('video');
      if (videoElement) new Adform.Component.VideoStats(videoElement);
  </script>

  
</body>
</html>

Video Player Component

Load the Components

Basic Setup

Note

Note

Video Player HTML Structure

Video Player Tracking

Video Player Options

Note

Note

Note

Note

Video Player Component Methods

Video Player Properties

Video Player Events

Video Player Styling

Video Player Container Class

Simple Controls Classes

Big Play Button Classes

Seek Bar Classes

State Classes

Video Player Container Component

Note

Initialization

Required Settings

Optional Settings

Methods

Non-Adform Video Players

Note

Example of non-Adform video player

<%= previousTitle %>

<%= nextTitle %>

In this article

Subscribe to Our Updates

What's New

<% if (!block.description) { %> <%= block.name %> <% } else { %> <%= block.name %> <% } %>

Get in touch

<% if (!block.description) { %> <%= block.name %> <% } else { %> <%= block.name %> <% } %>

Still have questions?

Categories

Toggle navigation menu

<%= category.name %>

Categories

Categories

Get in touch

<% if (!block.description) { %> <%= block.name %> <% } else { %> <%= block.name %> <% } %>