From September, Flash will no longer be supported by Chrome. Prepare for the shift towards HTML5 by visiting our Flash to HTML5 help page

Check it out!

HTML5 Video Player


The VideoPlayer javascript component is designed to help users to easily create the HTML video player.

  • Components Loading

    If you wish to use Adform Components for HTML ad, you must:

    • load main Adform.DHTML.js.
    • load desired component(s) under main library inside <head></head> tag

    This can be done by inserting such code snippet to 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-->
    

    General guidelines for components loading can be found in General Guidelines.

    All avialable components can be found under Adform HTML5 API Components section.

  • Basic Setup

    The Video Player component can be simply created with default controls and styles provided by Adform. The player will be fully compatible with the Adform system, including all the stats (events) and configuration.

    Together with Video Player component, we strongly suggest to use Video Player ContainerIt provides simplified video player re-usability (add/remove component) and code optimization.

    More information about Video Player Container can be found here

    Example:

    1. Initiate Video player and Video Player container inside .html document as follows:
      <!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);
                  });
      
                  if (background) {
                      setBackgroundImage(banner, background);
                      removeElems('adf-logo'); // ids of elements to be removed
                      banner.classList.remove('adf-Background', 'adf-Border');
                  }
      
              })();
          </script>
          <!-- User code -->
      </body>
      </html>
    2. Create folder scriptsthen created custom.js and place it inside new folder.
    3. Inside custom.js place such 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);
          });
      }
      
    4. Create folder stylesthen created custom.css and place it inside new folder.
    5. Inside custom.css place such 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: '';
      }

    Info: To find the example follow this link.

     

  • Video Player HTML Structure
    <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

    List of options that can be set when creating a video player. Some of these options will be always overwritten by content vars.

    • sources - 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
    • width - defines video player width (default is 'auto')
    • height – defines video player height (default is 'auto')
    • poster – a path to an image file to work as video poster while video has not started
    • loop – used when a video must loop (default is false, also 'loopVideo' content var will override this property)
    • muted – used when a video must be muted (default is false, also 'soundOn' content var will override this property)
    • videoSeek - used for enabling and disabling the ability to use seek bar in video player. (default is true)
    • autoplay – used when a video must play then added to the stage (default is false, also 'autoPlay' content var will override this property). Please refer to 'Video Autoplay on Mobile' section below, for more information regarding Mobile devices compatibility.
    • preload - used for enabling video pre-loading. With this property set to true the video will start loading even if it is not playing. Note: amount preloaded may vary from browser to browser.
    • inview – viewability percent, from 1 to 100. Works only when autoplay enabled. Video automatically starts playing when percent is higher than defined, and pauses, when lower. Play with demo.
    • trackEvents – used when a video must send video events to a server (default is true)
    • theme – a link to a theme CSS. You can now use new updated player theme V2. Simply pass in parameter "v2" to this option.
    • clicktag – used when video needs to be clickable
    • playOnExpand - used only in SingleExpanding banners. With this property set to true video player will automatically play/pause on expand/collapse events. Noteworks only when autoplay enabled.
  • Video Player Methods
    VideoPlayer public methods  

    create (static)

    function create(options)

    Creates and returns a video player with all the possible controls. If the video is not 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 the wrapped video element. If the video is not supported in a current browser or some options are incorrect, returns null.

    Arguments
    options - Object, video player options (see Options paragraph).

    Returns
    Partial - Wrapped video element.

    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 is necessary to register a control(s) container element using {video}.addContainer({container}) for css states to work.

    Also, it is 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 is necessary to pass the video object using {videoControl}.bind({video}) method to bind the seek bar to an appropriate video.

    Arguments
    Does not 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 should 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
    Does not accept any arguments.

    Returns
    Partial - Video Partial instance.

    pause

    function pause()

    Pause a current video.

    Arguments

    Does not accept any arguments.

    Returns
    Partial - Video Partial instance.

    stop

    function stop()

    Stop a current video.

    Arguments

    Does not accept any arguments.

    Returns
    Partial - Video Partial instance.

    togglePlayPause

    function togglePlayPause()

    Play a video if it is paused or stopped, and pause the video if it is 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
    Does not 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

    VideoPlayer Properties are: video, playPause, rewind, stop, seekBar, sound, fullScreen

    • Description: these properties are used to get a corresponding video or video control Partial object.
    • Type: Partial

    Video Properties

    • nativeControls
      Description: determinate's that player will use native controls of an HTML video tag. Some mobile browsers (such as iPhone Safari) play through the native video player.
      Type: Boolean
      Default: false
    • state
      Description: current video state. VideoPlayer has three states:
      • "stopped" – video is not playing and playback position is at 0;
      • "paused" – video is not playing and playback position is greater then 0;
      • "playing" – video is playing.

        Type: String
        Default: "stopped"
    • trackEvents
      Description: represents if video stats-events are tracked (true or false).
      Type: Boolean
      Default: true
  • Video Player Events

    Event listeners can be added and removed using 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 video is muted or unmuted. Also mute state (true or false) is passed to 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);
      });

    Partial Events

    Partial events can be listened on any Partial object (video player, video, play button, etc.).

    • 'staged' - dispatches when an object is added to DOM.
      partial.on('staged', function (state) {
          console.log('Partial is added to HTML');
      });
    • '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);

     

  • Styling Video Player

    In case DHTML.js script is included, a video player will load the default Adform theme. Otherwise, a user should include a custom (or Adform) CSS to its HTML or specify a link to it by setting the options.theme property. However, if the user will use his own CSS, the classes, described bellow, have to be implemented.

    Video Player Container Class

    Class is applied to a video player container div.

     .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

    A Big play button is used in both mobile and not mobile environments. Its size is 25% of the video player, counting from the shorter marginal.

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

    Seek Bar Classes

    The Seek bar is composed of 5 classes (see the image below). Depending on the need, a user can also implement hover states for the following classes.

    Html _video _seekbar

    .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

    The State classes are applied to a video container and used to change the graphical appearance of current video controls. Basically, this means that the state classes go in pair with some video control classes and override the primary control classes.

    There are 4 types of the 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 {}