Creatives
Creative billing

Video player components can be added to any HTML5 banner that requires video.

Adding a player

Container

File body.html must include a container for the player with a defined width and height.

Expand an example of the player container block
<div id="player_container" style="position : absolute; width: 640px; height: 360px;"></div>

Module ‘player’

Module ‘player’ listed as a function parameter.

Expand an example of the module function parameter
globalHTML5Api.on('load', function(Player){
  /*
    YOUR CODE IS HERE
  */
});
Expand an example of the JavaScript code snippet for video player
var player = Player.create({
  'src' : 'flip/video.mp4',
  'canSkip' : false,
  'loop' : false
 });
player.appendTo(document.getElementById('player_container'));

Method create() creates an object with parameters that are described below.

Player parameters
Parameter Value Description
src String URL of a video source;
format of a video file: .mp4
canSkip Boolean ǀ Number (sec) skip video (Skip button in the upper right corner), false (default);
number of seconds to the Skip button activation
skipText String text for the Skip button
loop Boolean used when a video must loop; false (default)
canFullscreen Boolean enable fullscreen mode
container object HTML Node container for video player to be placed in
Player methods
Method Arguments Description
player.appendTo(); object HTML Node player is appended to an indicated container
player.volume(); Number (1-100) the volume of sound; 50% by default
player.unmute(); turn sound on
player.mute(); turn sound off
player.play(); play a current video
player.pause(); pause a current video
player.hide(); hide a player
player.src(); String reset a current player video source
player.src().play(); String play a new video
player.on(event, callback); Function function call on event. Available events:

  • play
  • pause
  • mute
  • unmute
  • repeat
  • skip
  • click
  • complete
    Example:

    player.on('repeat', function(){
       player.src('http://yourdomain.com/video2.mp4');
    });
player.node.sound.hide(); hide Sound control
player.node.playPause.hide(); hide Play/Pause control
player.node.progress.hide(); hide Progress bar
create() Object player initialization
Updated on September 19, 2023