@playkit-js/playkit-js-ima
Version:
[](https://github.com/kaltura/playkit-js-ima/actions/workflows/run_canary_full_flow.yaml) [ • 2.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.button {
height: 40px;
width: 120px;
font-size: 17px;
margin: 10px;
}
.input {
height: 30px;
width: 720px;
}
</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>
<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>
<br>
<input type="text" class="input" placeholder="Ad Tag Url" name="adTagUrl">
<button class="button" onclick="playAdNow()">Play Ad Now</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;
}
function playAdNow() {
var adTagUrlElement = document.getElementsByName("adTagUrl")[0];
if (adTagUrlElement && adTagUrlElement.value) {
window.player.playAdNow(adTagUrlElement.value);
}
}
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: '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='
}
}
});
</script>
</body>
</html>