Skip to content

Instantly share code, notes, and snippets.

@derdeka

derdeka/example.html

Created August 4, 2015 10:08
Show Gist options
  • Save derdeka/f6d47ae8c8c0d52b7bb5 to your computer and use it in GitHub Desktop.
Save derdeka/f6d47ae8c8c0d52b7bb5 to your computer and use it in GitHub Desktop.
Download ZIP
example-videojs-vast-vpaid-with-youtube-tech
Raw
example.html
<!DOCTYPE html>
<html>
<head>
<title>videojs-vast-vpaid test</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script type="text/javascript">
// this is mandatory for IE8 !!!!!
document.createElement('video');
document.createElement('audio');
document.createElement('track');
</script>
<link rel="stylesheet" type="text/css" href="bower_components/normalize-css/normalize.css" />
<link rel="stylesheet" type="text/css" href="bower_components/videojs/dist/video-js/video-js.css" />
<link rel="stylesheet" type="text/css" href="bower_components/videojs-vast-vpaid/bin/videojs-vast-vpaid.css" />
<script type="text/javascript" src="bower_components/es5-shim/es5-shim.js"></script>
<script type="text/javascript" src="bower_components/xhook/dist/xhook.js"></script>
<script type="text/javascript" src="bower_components/swfobject/swfobject/swfobject.js"></script>
<script type="text/javascript" src="bower_components/videojs/dist/video-js/video.dev.js"></script>
<script type="text/javascript" src="bower_components/videojs-youtube/dist/vjs.youtube.js"></script>
<script type="text/javascript" src="bower_components/videojs-vast-vpaid/bin/videojs-vast-vpaid.js"></script>
</head>
<body>
<h1 class="title main">videojs-vast-vpaid plugin</h1>
<video id="player" class="video-js vjs-default-skin" controls preload="none" width="640" height="360" poster="http://news.yoou.buzz/wp-content/uploads/2015/07/0_big.jpg">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
<source src="http://www.youtube.com/watch?v=IkMPZ7WeDck" type="video/youtube" />
</video>
<script type="text/javascript">
videojs.plugin('ads-setup', function(opts) {
var player = this;
var vastAd = player.vastClient({
url: getAdsUrl,
playAdAlways: opts.playAdAlways || true,
adCancelTimeout: opts.adsCancelTimeout || 5000,
adsEnabled: !!opts.adsEnabled
});
player.on('reset', function () {
if (!!opts.adsEnabled) {
vastAd.enable();
} else {
vastAd.disable();
}
});
player.on('vast.aderror', function(evt) {
var error = evt.error;
if(error && error.message) {
console.error(error.message);
}
});
function getAdsUrl() {
var tag = opts.tag || '';
try {
var playerstyle = (typeof(window.getComputedStyle) != "undefined") ? window.getComputedStyle(player.el(), null) : player.el().currentStyle;
tag = tag.replace('__enable-vpaid__', VPAIDFLASHClient.isSupported() ? '1' : '0');
tag = tag.replace('__page-url__', escape(document.location.href));
tag = tag.replace('__player-width__', Math.max(parseInt(playerstyle.width) || 0, 100));
tag = tag.replace('__player-height__', Math.max(parseInt(playerstyle.height) || 0, 100));
tag = tag.replace('__random-number__', Math.round(Math.random() * 100000) );
} finally {
return tag;
}
}
});
videojs('player', {
'techOrder': ['youtube', 'flash', 'html5'],
'plugins': {
'ads-setup': {
'adsEnabled' :true,
'tag': 'http://search.spotxchange.com/vast/2.00/104034?VPAID=__enable-vpaid__&content_page_url=__page-url__&cb=__random-number__&player_width=__player-width__&player_height=__player-height__'
}
}
});
</script>
</body>
</html>
@killerhis
Copy link

Where you able to get youtube and vast working for videojs?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment