@playkit-js/playkit-js-ima
Version:
[](https://github.com/kaltura/playkit-js-ima/actions/workflows/run_canary_full_flow.yaml) [ • 2.42 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.button {
height: 40px;
width: 120px;
font-size: 17px;
margin: 10px;
}
</style>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="./playkit-ima.js"></script>
</head>
<body>
<div id="player-placeholder" style="width: 640px; height: 360px;"></div>
<div id="testCompanionLong" style="width: 728px; height:90px"></div>
<div id="testCompanionSquare" style="width: 300px; height: 250px"></div>
<button class="button" onclick="play()">Play</button>
<button class="button" onclick="pause()">Pause</button>
<button class="button" onclick="volumeUp()">Volume [+]</button>
<button class="button" onclick="volumeDown()">Volume [-]</button>
<button class="button" onclick="toggleMute()">Toggle Mute</button>
<button class="button" onclick="seek()">Seek [+5]</button>
<script>
function play() {
window.player.play();
}
function pause() {
window.player.pause();
}
function volumeUp() {
window.player.volume += 0.1;
}
function volumeDown() {
window.player.volume -= 0.1;
}
function toggleMute() {
window.player.muted = !window.player.muted;
}
function seek() {
window.player.currentTime += 5;
}
window.player = Playkit.loadPlayer('player-placeholder', {
playback: {
playsinline: false,
autoplay: false,
muted: false
},
sources: {
progressive: [
{
"mimetype": "video/mp4",
"url": "https://cfvod.kaltura.com/pd/p/1726172/sp/172617200/serveFlavor/entryId/1_po3v31zx/v/1/ev/7/flavorId/1_67zt1djx/fileName/BBB_(Basic_Small_-_WEB_MBL_(H264_400)).mp4/name/a.mp4"
}
]
},
plugins: {
ima: {
adTagUrl: 'http://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=xml_vmap1&unviewed_position_start=1&cust_params=sample_ar%3Dpreonly&cmsid=496&vid=short_onecue&correlator=[timestamp]',
companions: {
sizeCriteria: 'SELECT_EXACT_MATCH',
ads: {
testCompanionSquare: {
width: 300,
height: 250
},
testCompanionLong: {
width: 728,
height: 90
}
}
}
}
}
});
</script>
</body>
</html>