[email protected]
mobile logo

REPLAYER DOCUMENTATION

Adsolutions / Documentation  / REPLAYER DOCUMENTATION

REPLAYER DOCUMENTATION

The template is made as basic as possible so you have a simple starting point to begin building your creative.

TEMPLATE PREVIEW

The template consists of the following assets:

  • index.html
  • code.js
  • style.css

index.html
The html is fairly basic. It links the .css and .js files. It includes the core library:

<!doctype html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://onecreative.aol.com/ads/jsapi/ADTECH.js"></script>
<script type="text/javascript" src="code.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
<title></title>
</head>
<body>
	<div id="background" class="">
		<div id="videoContainer" class="vidContracted">
			<video id="videoPlayer" autoplay></video>
			<div id="mute" class="button hide"></div>		 
		</div>
		<div id="closeButton" class="button hide"></div>	
		<div id="expandButton" class="button"></div>	
	</div>
</body>
</html>

 

code.js
In the .js file the player is created and the sources are set. Plus when the video finishes it will replay. In sources you can add yours.

/////Adds VAST reporting/////
ADTECH.registerVideoPlayer(vid);

/////Define your video sources below/////
var sources = [
	{
			options:[
				{type:'video/mp4',src:'adsolutions_mobile_480x270.mp4'},
				{type:'video/webm',src:'video.webmsd.webm'}
			]
	}/*,
	{
			options:[
				{type:'mp4',src:'file2.mp4'},
				{type:'webm',src:'file2.webm'}
			]
	}*/
];

function selectSource(index){
	var video = sources[index];
	for(var i = 0; i < video.options.length; i++){
		if(vid.canPlayType(video.options[i].type) != ""){
			vid.src = video.options[i].src; 	
			break;
		}
	}
}
selectSource(0);
vid.style.opacity = 1;
vid.play();
muteButton.style.display = "block";

muteButton.onclick = function(e){
	if(isMuted === true){ 
		vid.muted = false;
		muteButton.style.backgroundImage = "url('images/mute.png')";
		isMuted = false;
	} else {
		vid.muted = true;
		muteButton.style.backgroundImage = "url('images/unmute.png')";
		isMuted = true;	
	}
};	
	
/////Defines what should occur when the video finishes/////
vid.onended = function(){
	vid.play();
};

You can also spot a function that handles what happens when the closeButton is clicked. Yu can add elements to the elm [] to hide them.

closeButton.onclick = function(e){
		///// Contract Event shown in reporting /////
		ADTECH.contract();
		/*if(isPlaying){
     vid.pause();
		}*/
		contracted = true;
		/////Add any elements that should be hidden in the contracted state of the add/////
		var elm = [closeButton,muteButton];
		for(i = 0; i < elm.length; i++){
			if ( elm[i].className.match(/(?:^|\s)hide(?!\S)/) === null){
				elm[i].className += " hide";	 
			}		  
		}
		document.getElementById("background").className = " contracted";
	    expandButton.style.display = "block";
};

Underneath that bit of code you’ll find the function that handles what should happen when the ad expands. Again you can add elements to the  var expC = [vid ,closeButton, muteButton]; aray to make them visible on expand.

expandButton.onclick = function(e){
  if(contracted){  
	///// Expand Event shown in reporting /////
    ADTECH.expand();
	///// Add any elements that should be visible in the expanded state /////
    var expC = [vid ,closeButton, muteButton];
    for(i = 0; i < expC.length; i++){
      if ( expC[i].className.match(/(?:^|\s)hide(?!\S)/)){
        expC[i].className = expC[i].className.replace(/(?:^|\s)hide(?!\S)/, "");   
      }    
    }   
  }  
  expandButton.style.display = "none";
  background.className = " expanded";
  contracted = false;
  if(isPlaying){
    vid.play();
  }
};

The code.js file is also the spot where the click is implemented. You can change the URL in this file. Or designate it to a different element or add multiple clickable elements.

///// Set your desired click name plus cick URL: ADTECH.click("yourname","yourURL"); /////	
background.onclick = function(e){
  e = e || window.event; var obj = e.target || e.srcElement;
      if(!contracted && obj.className.indexOf("button") == -1){
        ADTECH.click("expanded", "http://www.adsolutions.com");
      }  
};

The click is syntax is like so: ADTECH.click(‘Click Name‘, ‘your CLICK URL‘);

Click Name is used in the reports to distinguish which click through button was clicked on. You don’t have to enter the URL if you don’t know it yet. We can handle it for you if you send the URL or redirect later on.

SUPPORT
During the design phase we can provide you with a preview URL so you can see the work in action and make changes to your design accordingly. Send us the source files and fonts to [email protected] (WeTransfer preferred)

Final creative or requests for a preview can be send to [email protected]

Also read the GENERAL DOCUMENTATION fur further reference on building HTML5 ads.