91 lines
3 KiB
HTML
91 lines
3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Vast-Player Example</title>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/vast-player@latest/dist/vast-player.min.js"></script>
|
||
|
|
<style>
|
||
|
|
#container {
|
||
|
|
width: 640px; height: 385px;
|
||
|
|
border: 1px black solid;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="container"></div>
|
||
|
|
<button id="startAd" onclick="player.startAd();" disabled>startAd()</button>
|
||
|
|
<button id="stopAd" onclick="player.stopAd();" disabled>stopAd()</button>
|
||
|
|
<button id="pauseAd" onclick="player.pauseAd();" disabled>pauseAd()</button>
|
||
|
|
<button id="resumeAd" onclick="player.resumeAd();" disabled>resumeAd()</button>
|
||
|
|
<button id="resizeAd" onclick="window.container.style.width = '1000px'; window.container.style.height = '602px';" disabled>resizeAd()</button>
|
||
|
|
<script>
|
||
|
|
(function(VASTPlayer) {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
VASTPlayer.vpaidSWFLocation = './.build/vast-player--vpaid.swf';
|
||
|
|
|
||
|
|
var player = new VASTPlayer(document.getElementById('container'));
|
||
|
|
var buttons = {
|
||
|
|
startAd: document.getElementById('startAd'),
|
||
|
|
stopAd: document.getElementById('stopAd'),
|
||
|
|
pauseAd: document.getElementById('pauseAd'),
|
||
|
|
resumeAd: document.getElementById('resumeAd'),
|
||
|
|
resizeAd: document.getElementById('resizeAd')
|
||
|
|
};
|
||
|
|
|
||
|
|
window.container = document.getElementById('container');
|
||
|
|
|
||
|
|
player.once('AdStarted', function() {
|
||
|
|
buttons.stopAd.disabled = false;
|
||
|
|
buttons.pauseAd.disabled = false;
|
||
|
|
buttons.resumeAd.disabled = false;
|
||
|
|
});
|
||
|
|
|
||
|
|
[
|
||
|
|
'AdLoaded',
|
||
|
|
'AdStarted',
|
||
|
|
'AdStopped',
|
||
|
|
'AdSkipped',
|
||
|
|
'AdSkippableStateChange',
|
||
|
|
'AdSizeChange',
|
||
|
|
'AdLinearChange',
|
||
|
|
'AdDurationChange',
|
||
|
|
'AdExpandedChange',
|
||
|
|
'AdRemainingTimeChange',
|
||
|
|
'AdVolumeChange',
|
||
|
|
'AdImpression',
|
||
|
|
'AdVideoStart',
|
||
|
|
'AdVideoFirstQuartile',
|
||
|
|
'AdVideoMidpoint',
|
||
|
|
'AdVideoThirdQuartile',
|
||
|
|
'AdVideoComplete',
|
||
|
|
'AdClickThru',
|
||
|
|
'AdInteraction',
|
||
|
|
'AdUserAcceptInvitation',
|
||
|
|
'AdUserMinimize',
|
||
|
|
'AdUserClose',
|
||
|
|
'AdPaused',
|
||
|
|
'AdPlaying',
|
||
|
|
'AdLog',
|
||
|
|
'AdError'
|
||
|
|
].forEach(function(type) {
|
||
|
|
player.on(type, function() {
|
||
|
|
var args = Array.prototype.slice.call(arguments);
|
||
|
|
console.log.apply(console, ['EVENT: ' + type].concat(args));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
player.load(
|
||
|
|
'https://mediatoday.ru/c/ads.xml?pid=10548&vr=1&rid=5432234&dl=https://google.com'
|
||
|
|
).then(function() {
|
||
|
|
window.player = player;
|
||
|
|
|
||
|
|
buttons.startAd.disabled = false;
|
||
|
|
buttons.resizeAd.disabled = false;
|
||
|
|
}).catch(function(reason) {
|
||
|
|
console.error(reason);
|
||
|
|
});
|
||
|
|
}(window.VASTPlayer));
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|