MOBILE HALFPAGE VIDEO DOCUMENTATION
The template is made as basic as possible so you have a simple starting point to begin building your creative.
The template consists of the following asset:
- index.html
index.html
The core library is included in the head of the document:
<!DOCTYPE html>
<html>
<head>
<meta name="ad.size" content="width=320,height=240">
<script type="text/javascript" src="http://onecreative.aol.com/ads/jsapi/ADTECH.js"></script>
</head>
Right after the body tag you can see a div with id: smartPlayerContainer. This div is required for the smartVideoPlayer. Underneath this div the player is created with the following script.
<div id="smartPlayerContainer"></div>
<script>
function init() {
ADTECH.require(['SmartVideoPlayer'], function() {
var smartPlayer = ADTECH.modules.SmartVideoPlayer.createPlayer({
container: smartPlayerContainer,
width: 320,
height: 168,
//poster: 'one_300x250.jpg',
src: {
ogv: 'video.ogv',
mp4: 'video.mp4',
webm: 'video.webm'
}
});
});
smartPlayer.on(SmartVideoPlayer.event.LOADED_METADATA, function() {
smartPlayer.dimensions(
smartPlayer.videoWidth(),
smartPlayer.videoHeight()
);
});
} ADTECH.ready(init);
The SmartVideoPlayer allows for auto-initiated delivery of video across devices to play in-line within your ads.
For example, on desktop environments that supports inline, auto-initiated HTML5 Video playback, it will default to using the standard VideoJS player, whereas, on mobile and tablet devices that do not support inline, auto-initiated HTML5 Video playback (such as iOS and certain Android devices), it will default to delivering a video like experience by using HTML5 Canvas to render frame by frame. This solves a major issue on mobile devices by circumventing the lack of auto initiated inline video playback, and provides a consistent, device and tag agnostic video experience.
You can find the smartVideoPlayer documentation here
The click is syntax is like so: ADTECH.click(‘Click Name‘, ‘your CLICK URL‘);
Underneath you see two divs are made clickable separately.
ADTECH.ready(function(){
var doc = document;
var lnk = doc.body;
var lnks = lnk.getElementsByTagName('div');
lnks[0].onclick = function(e){
e = e || window.event;
ADTECH.click('bottom', 'http://www.adsolutions.com');
e.stopPropagation();
e.cancelBubble = true;
return false;
};
lnks[2].onclick = function(e){
e = e || window.event;
ADTECH.click('video', 'http://www.adsolutions.com');
e.stopPropagation();
e.cancelBubble = true;
return false;
};
});
</script>
</body>
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 support@adsolutions.com (WeTransfer preferred)
Final creative or requests for a preview can be send to traffic@adsolutions.com
Also read the GENERAL DOCUMENTATION fur further reference on building HTML5 ads.