Use Videos in HTML5 Banners

Viktorija
Viktorija
  • Updated

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

Use the Video Player Container together with the Video Player component. It provides a simplified video player reusability (add and remove component) and code optimization.

  1. 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>
  2. Create folder scripts.

  3. Inside the new folder, place the created custom.js.

  4. 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);
        });
    }
  5. Create folder styles.

  6. Inside the new folder, place the created custom.css.

  7. 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:

video_player_component.png

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:

  1. Load Adform scripts.

  2. Create an AdformStats object.

  3. 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>

Was this article helpful?

/
How we can make it better?

Thank you for your feedback!