JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<script src="http://static.ligaportal.at/scripts/videojs/vast-client.js"></script>
<script src="http://static.ligaportal.at/scripts/videojs/videojs.ads.js"></script>
<script src="http://static.ligaportal.at/scripts/videojs/videojs.vast.js"></script>
<script src="http://static.ligaportal.at/scripts/videojs/videojs.ga.min.js"></script>
<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<link href="http://static.ligaportal.at/scripts/videojs/videojs.ads.css" rel="stylesheet">
<link href="http://static.ligaportal.at/scripts/videojs/videojs.vast.css" rel="stylesheet">
<h3>VAST link always delivering a test ad</h3>
<div class="videoWrapper" id="videoBox" style="width:480px; height:280px">
<video id="vid_673732" class="video-js vjs-default-skin" data-setup="{}" controls="" autoplay="" width="480" height="270">
<source src="https://s3.eu-central-1.amazonaws.com/vipr-app/data/ligaportal/video/v3e6ce7895-9ed2-461b-a342-9dd116fb77fe.webm" type="video/webm">
<source src="https://s3.eu-central-1.amazonaws.com/vipr-app/data/ligaportal/video/v3e6ce7895-9ed2-461b-a342-9dd116fb77fe.mp4" type="video/mp4">
</video>
</div>
<h3>VAST link NOT always delivering an ad</h3>
<div class="videoWrapper" id="videoBox" style="width:480px; height:280px">
<video id="vid_673662" class="video-js vjs-default-skin" data-setup="{}" controls="" autoplay="" width="480" height="270">
<source src="https://s3.eu-central-1.amazonaws.com/vipr-app/data/ligaportal/video/v37182f5a8-cad0-4d73-9037-59b5aca8d23e.webm" type="video/webm">
<source src="https://s3.eu-central-1.amazonaws.com/vipr-app/data/ligaportal/video/v37182f5a8-cad0-4d73-9037-59b5aca8d23e.mp4" type="video/mp4">
</video>
</div>
JavaScript
// init first player
videojs('vid_673732', {
"controls": true,
"autoplay": true,
"preload": "auto"
}, function () {
var videoPlayer = this;
videoPlayer.muted(false);
videoPlayer.ads();
videoPlayer.vast({
url: "http://ad3.adfarm1.adition.com/banner?sid=3108095&wpt=X",
skip: "-1"
}); // VAST link always delivering a test ad
videoPlayer.ga();
videoPlayer.on("loadedmetadata", function () {
videoPlayer.play();
});
});
// init second player
videojs('vid_673662', {
"controls": true,
"autoplay": true,
"preload": "auto"
}, function () {
var videoPlayer = this;
videoPlayer.muted(false);
videoPlayer.ads();
videoPlayer.vast({
url: "http://ad3.adfarm1.adition.com/banner?sid=2721754&wpt=X",
skip: "-1"
}); // VAST link NOT always delivering ads
videoPlayer.ga();
videoPlayer.on("loadedmetadata", function () {
videoPlayer.play();
});
});