ima-ad-player
Version:
Yet another Google IMA video ad player.
297 lines (266 loc) • 13 kB
HTML
<html>
<head>
<meta name="viewport" content="width=655, user-scalable=yes" />
<!-- <script src="http://192.168.1.113:8080/console.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/can-autoplay@3.0.0/build/can-autoplay.min.js"></script>
<script src="videoplayer.js"></script>
<script src="ima-ad-player.js"></script>
<style>
.content-video {
width: 640px;
height: 360px;
background-color: #000;
overflow: hidden;
}
.ad-container-video, .ad-container {
position: absolute;
top: 0px;
left: 0px;
width: 640px;
height: 360px;
}
.ad-overlay {
position: absolute;
top: 0px;
left: 0px;
width: 640px;
height: 360px;
display: table;
visibility: hidden;
background: #000;
cursor: pointer;
}
.ad-overlay-text {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
font-size: 300%;
}
.ad-custom-click {
position: absolute;
top: 90px;
left: 160px;
width: 320px;
height: 180px;
background-color: coral;
opacity: 0.2;
visibility: hidden;
}
.btn {
margin-top: 360px;
width: 10em;
height: 5em;
}
</style>
</head>
<body>
<div class="ad">
<div class="ad-container-video">
<video class="content-video" playsinline src="https://diffusepro.com/resources/sample/h264_big_buck_bunny_trailer-1080p.mp4"></video>
</div>
<div class="ad-container"></div>
<div class="ad-custom-click"></div>
<div class="ad-overlay"><div class="ad-overlay-text"><div>Click to play</div></div></div>
</div>
<div>
<button class="btn btn-stop-ad" disabled>STOP AD</button>
<button class="btn btn-play" disabled>PLAY VIDEO</button>
<button class="btn btn-pause" disabled>PAUSE VIDEO</button>
</div>
<script>
(function () {
var videoElement = document.querySelector('.content-video');
var adContainer = document.querySelector('.ad-container');
var adClickElement = document.querySelector('.ad-custom-click');
var adOverlay = document.querySelector('.ad-overlay');
var stopAdButton = document.querySelector('.btn-stop-ad');
var playButton = document.querySelector('.btn-play');
var pauseButton = document.querySelector('.btn-pause');
function detectMobile() {
// http://detectmobilebrowsers.com/
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
var isMobile = detectMobile();
// This function bind and log ad player events
function bindAdEvents(adPlayer) {
var logEvent = function(o) {
/**
* o.name is event name
* o.data is event object (may equals undefined)
* o.target is ad player instance
*/
var m = '[AD PLAYER] ' + o.name;
console.log.apply(console, o.data ? [m, o] : [m]);
};
[
/** ImaPlayer events **/
'ad_play_intent',
'ad_play',
'ad_request_intent',
'ad_request',
// 'ads_manager_loaded',
// 'ads_rendering_settings',
// 'ads_manager',
'ad_begin',
'ad_non_linear',
'ad_stop_intent',
'ad_stop',
'ad_end',
'ad_error',
'error',
/** IMA SDK events **/
'ad_break_ready',
'ad_buffering',
'ad_can_play',
'ad_metadata',
// 'ad_progress',
'all_ads_completed',
'click',
'complete',
'content_pause_requested',
'content_resume_requested',
'duration_change',
'first_quartile',
'impression',
'interaction',
'linear_changed',
'loaded',
'log',
'midpoint',
'paused',
'resumed',
'skippable_state_changed',
'skipped',
'started',
'third_quartile',
'user_close',
'video_clicked',
'video_icon_clicked',
'viewable_impression',
'volume_changed',
'volume_muted',
].forEach(function(k) {
adPlayer.on(k, function(o) {
logEvent(o);
});
});
}
// This function handle video player autoplay policy
function handleVpAutoplay(videoPlayer, preloadAd) {
canAutoplay.video({timeout: 800, muted: false}).then(function(o) {
if (o.result && !isMobile) {
// Can autoplay
videoPlayer.play();
} else {
// Check for ad pre-request
preloadAd && videoPlayer.preloadAd();
// Can not autoplay (display overlay)
videoPlayer.showOverlay()
}
});
}
var TAG_VAST2 = 'https://diffusepro.com/video-ad/vast/linear/vast2.xml';
var TAG_VAST2_VPAID_NOAD = 'https://diffusepro.com/video-ad/vast/linear/vast2_vpaid_noad.xml';
var TAG_VAST3_NOAD = 'https://diffusepro.com/video-ad/vast/linear/vast3_noad.xml';
var TAG_VMAP_PREROLLS = 'https://diffusepro.com/video-ad/vast/linear/vmap_prerolls.xml';
// IMA Sample Tags: https://developers.google.com/interactive-media-ads/docs/sdks/html5/tags
// Single Skippable Inline
var TAG_SKIPPABLE = 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=';
// VMAP Pre-, Mid-, and Post-rolls, Single Ads
var TAG_VMAP = 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=';
// Single Non-linear Inline
var TAG_NON_LINEAR = 'https://pubads.g.doubleclick.net/gampad/ads?sz=480x70&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dnonlinear&correlator=';
// Single VPAID 2.0 Non-Linear
var TAG_NON_LINEAR_VPAID = 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dnonlinearvpaid2js&correlator=';
// VMAP - Pre-roll Single Ad, Mid-roll Standard Pod with 3 ads, Post-roll Single Ad
var TAG_PODS = 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpostpod&cmsid=496&vid=short_onecue&correlator=';
// For development purposes, ad player is created and injected in video player
// (in "real world" scenario, ad player should be created by video player plugin)
ImaAdPlayer({
video: videoElement,
displayContainer: adContainer,
tag: TAG_VMAP,
vpaidMode: ImaAdPlayer.vpaidMode.INSECURE,
locale: 'fr',
maxDuration: 30000,
nonLinearMaxDuration: 8000,
restoreVideo: true,
// adsRequestOptions: {
// vastLoadTimeout: 10000,
// },
// adsRenderingOptions: {
// loadVideoTimeout: 10000,
// useStyledLinearAds: true,
// useStyledNonLinearAds: true,
// },
// timeout: 2000,
// debug: true,
// clickTracking: adClickElement,
// adWillAutoPlay: false, // Default is true
// adWillPlayMuted: true, // Default is false
// continuousPlayback: true, // Default is undefined
}, function(player, error) {
if (error) {
// Ad player creation failed
return console.log(error);
}
console.log('Google IMA SDK Version ' + google.ima.VERSION);
bindAdEvents(player);
// Here can setup global settings
// google.ima.settings.setDisableCustomPlaybackForIOS10Plus(true);
// player.on('ads_manager', function(o) {
// // Ads manager is available, call discardAdBreak() to skip preroll but play midroll and postroll (if VMAP tag)
// player.discardAdBreak();
// });
// player.on('skippable_state_changed', function(o) {
// // Attempt to focus skip button (if available)
// player.focus();
// });
// Create video player
var vp = new VideoPlayer({
videoElement: videoElement,
playButton: playButton,
pauseButton: pauseButton,
stopAdButton: stopAdButton,
adOverlay: adOverlay,
adPlayer: player,
});
var requestAdIfNoAutoplay = false; // Set to true to pre-load ad when autoplay is not allowed
// player.on('started', function(){ adClickElement.style.visibility = 'visible'; });
// player.on('ad_end', function(){ adClickElement.style.visibility = 'hidden'; });
// Fast & dirty ad playback custom controls
// var __e = document.createElement('div');
// player.on('started', function(o) {
// var __p = o.target;
// var __isPlaying = true;
// __e.innerText = 'Pause';
// __e.style.position = 'absolute';
// __e.style.visibility = 'visible';
// __e.style.zIndex = '10000';
// __e.addEventListener('click', function() {
// if (__isPlaying) {
// __p.pause();
// __e.innerText = 'Play';
// __isPlaying = false;
// } else {
// __p.resume();
// __e.innerText = 'Pause';
// __isPlaying = true;
// }
// });
// var __container = __p.getDisplayContainer();
// __container.appendChild(__e);
// });
// player.on('ad_end', function() {
// __e.style.visibility = 'hidden';
// });
handleVpAutoplay(vp, requestAdIfNoAutoplay);
});
})();
</script>
</body>
</html>