You may ask this question if you want to let the user know when and how many mid-rolls there are during the video.
Similar questions may be:
Showing visual cues indicating the moment in which the ads will start is certainly useful. This is not (yet) a THEOplayer standard feature, but what follows is a first step in that direction. Please keep in mind that this solution is still in development and has to date several limitations.
Add this line to your CSS
.adCue {width:.3em; height:100%; background-color: white; position:absolute; top:0;}
Your AdDescription should look something like this
player.source.ads: [
{
"sources": "path/to/your-pre/midroll1.xml",
"timeOffset": value //valid values: ["start", "end", numbers]
},
{
"sources": "path/to/your-pre/midroll2.xml",
"timeOffset": value //valid values: ["start", "end", numbers]
},
{...}
]
Include (or call) this JavaScript snippet on your page:
THEOdisplayCues.js
var adsPresent = !!player.source.ads;
var contentDuration = 0;
var to = [];
var checker = true;
var playedAds = [];
player.addEventListener('pause', ()=>{checker=false;});
player.addEventListener('playing', ()=>{
var adIsPlaying = player.ads.playing;
detectTimeOffset();
detectDuration(adIsPlaying);
if(!checker){checker = adIsPlaying}
if(checker){
!adIsPlaying ? drawCues() : destroyCues();
}
});
player.addEventListener('sourcechange', function () {
playedAds.length = 0;
});
player.ads.addEventListener('adend', (adEvent)=> {
playedAds.push(adEvent.ad.adBreak.timeOffset);
});
function drawCues() {
var progressBar = element.querySelector('.vjs-progress-control.vjs-control');
for (var i=0; i<to.length; i++){
var timeOffset = to[i];
if (playedAds.indexOf(timeOffset) === -1) {
var left = to[i] * progressBar.offsetWidth/contentDuration;
var div = document.createElement("div");
div.setAttribute('to', to[i]);
div.classList.add("adCue");
div.style.left = left +"px";
progressBar.children[0].appendChild(div);
}
}
}
function destroyCues() {
var cues = element.querySelectorAll('.vjs-progress-control.vjs-control .adCue');
for (cue of cues){
cue.parentNode.removeChild(cue);
}
}
function detectDuration(adIsPlaying) {
if (!adIsPlaying) {
contentDuration = player.duration;
//console.log("Duration ",contentDuration)
}
var t = 0;
for (var ad of player.source.ads){
to[t] = to[t] == "end" ? contentDuration : to[t];
t++;
}
}
function detectTimeOffset() {
if(adsPresent){
var t = 0;
for (var ad of player.source.ads){
to[t]= ad.timeOffset==undefined ? 0: ad.timeOffset=="start"? 0: ad.timeOffset;
t++;
}
}
//console.log("TimeOffsets ",to);
}