Skip to content

Instantly share code, notes, and snippets.

@varadarajana

varadarajana/Demplayer2.html

Created April 4, 2018 17:57
Show Gist options
  • Save varadarajana/9c0cd051b646a4f70a869a65143305be to your computer and use it in GitHub Desktop.
Save varadarajana/9c0cd051b646a4f70a869a65143305be to your computer and use it in GitHub Desktop.
Download ZIP
videojs VTTcues duration not in sync with the CUE out and CUE in durations in the m3u8 file
Raw
console.log
VIDEOJS: example A cue change fired at 40.644709 cue is VTTCue {adStartTime: 40.32, adEndTime: 80.64, vertical: "", snapToLines: true, line: "auto", …}adEndTime: 80.64adStartTime: 40.32align: "center"endTime: 80.64id: ""line: "auto"onenter: nullonexit: nullpauseOnExit: falseposition: "auto"size: 100snapToLines: truestartTime: 40.32text: "12"track: nullvertical: ""__proto__: VTTCue at 40.32
Raw
Demplayer2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>videojs-contrib-hls embed</title>
<!--
Uses the latest versions of video.js and videojs-contrib-hls.
<!-- Load dependent stylesheets. -->
<link href="http://ion.net.in/video/plugins/video.js/dist/video-js.css" rel="stylesheet">
<link rel="stylesheet" href="http://ion.net.in/video/plugins/videojs-contrib-ads/dist/videojs-contrib-ads.css" />
<link rel="stylesheet" href="http://ion.net.in/video/plugins/videojs-ima/dist/videojs.ima.css" />
<!-- Load dependent scripts -->
<script src="http://ion.net.in/video/plugins/video.js/dist/video.js"></script>
<script src="http://ion.net.in/video/plugins/videojs-contrib-ads/dist/videojs-contrib-ads.js"></script>
<script src="http://ion.net.in/video/plugins/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="http://ion.net.in/video/plugins/videojs-ima/dist/videojs.ima.js"></script>
</head>
<body>
<h1>Video.js Example Embed</h1>
<video id="content_video" class="video-js vjs-default-skin" controls preload="none" width="640" height="268"
data-setup='{}' crossorigin="anonymous">
<track id="metadata" kind="metadata">
</video>
<video id="video"
data-setup='{}' crossorigin="anonymous">
<track id="metadata" kind="metadata"></video>
<script type="text/javascript">
var Adplayer = videojs('video');
var adsManager;
var advert;
var cues = null;
let player = new videojs("content_video", {
html5: {
hls: {
withCredentials: false,
useCueTags: true
}
}
}, function () {
advert = new Ads();
}).ready(function () {
var cueChangeHandler = function (event) {
if (!this.activeCues || this.activeCues.length === 0) {
return;
}
var activeCue = this.activeCues[this.activeCues.length - 1];
cues = [activeCue];
videojs.log('example', 'A cue change fired at', player.currentTime(),
'cue is', cues[0], 'at', cues[0].startTime);
// Make an ad request
var processCue = function (player, cue, cueId, startTime) {
playAd();
};
player.ads.cueTextTracks.processAdTrack(player, cues, processCue);
};
// play an ad, given an opportunity
var playAd = function () {
player.ima.playAdBreak();
};
var processMetadataTrack = function (player, track) {
// Find the metadata track that's labeled "ads".
if (track.kind === 'metadata' && track.label === 'ad-cues') {
track.mode = 'hidden';
track.addEventListener('cuechange', cueChangeHandler);
}
}
// initialize the ads plugin, passing in any relevant options
Adplayer.ads({
debug: true
});
// Set up to process metadata cues
player.ads.cueTextTracks.processMetadataTracks(player, processMetadataTrack);
// Implement an interface for understanding the adCues
player.ads.cueTextTracks.setMetadataTrackMode = function (track) {
// The cues are invisible, so set them to hidden so they can be updated
track.mode = 'hidden';
};
player.ads.cueTextTracks.getCueId = function (player, cue) {
// Return the topmost id
return Number(cue.id);
};
});
player.on("timeupdate", function () {
if (cues != null) {
if (player.currentTime() >= cues[0].endTime) {
adsManager.discardAdBreak();
console.log('Ad cancelled');
cues = null;
}
}
})
player.src({
src: 'http://localhost/sampleoutput0104_1080p.m3u8',
type: 'application/x-mpegURL',
});
player.on('pause', function () {
});
player.on('play', function () {
});
var Ads = function () {
player.one('ready', this.bind(this, this.initFromStart));
var options = {
id: 'content_video',
autoPlayAdBreaks :false,
//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%3Dpremidpostlongpod&cmsid=496&vid=short_tencue&correlator=',
adsManagerLoadedCallback: this.adsManagerLoadedCallback.bind(this)
};
player.ima(options);
};
Ads.prototype.initFromStart = function () {
if (!this.initialized) {
this.init();
this.requestAdsAndPlay();
}
}
Ads.prototype.init = function () {
this.initialized = true;
player.ima.initializeAdDisplayContainer();
};
Ads.prototype.requestAdsAndPlay = function () {
player.ima.requestAds();
}
Ads.prototype.adsManagerLoadedCallback = function () {
var events = [
google.ima.AdEvent.Type.ALL_ADS_COMPLETED,
google.ima.AdEvent.Type.CLICK,
google.ima.AdEvent.Type.COMPLETE,
google.ima.AdEvent.Type.FIRST_QUARTILE,
google.ima.AdEvent.Type.LOADED,
google.ima.AdEvent.Type.MIDPOINT,
google.ima.AdEvent.Type.PAUSED,
google.ima.AdEvent.Type.RESUMED,
google.ima.AdEvent.Type.STARTED,
google.ima.AdEvent.Type.THIRD_QUARTILE
];
for (var index = 0; index < events.length; index++) {
player.ima.addEventListener(
events[index],
this.onAdEvent.bind(this));
}
adsManager = player.ima.getAdsManager();
player.ima.setAdBreakReadyListener(myAdBreakReadyListener);
};
function myAdBreakReadyListener() {
// Do stuff on ad break ready.
}
Ads.prototype.onAdEvent = function (event) {
var message = 'Ad event: ' + event.type;
this.log(message);
};
Ads.prototype.log = function (message) {
console.info(message);
}
Ads.prototype.bind = function (thisObj, fn) {
return function () {
fn.apply(thisObj, arguments);
};
};
</script>
</body>
</html>
Raw
sampleoutput0104_1080p.m3u8
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:12
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:11.520000,
tpo_res_30Mar_1080p0.ts
#EXTINF:9.600000,
tpo_res_30Mar_1080p1.ts
#EXTINF:9.600000,
tpo_res_30Mar_1080p2.ts
#EXTINF:9.600000,
tpo_res_30Mar_1080p3.ts
#EXT-X-CUE-OUT:12
#EXTINF:10,
#EXT-X-CUE-IN
#EXTINF:11.520000,
tpo_res_30Mar_1080p4.ts
#EXTINF:9.600000,
tpo_res_30Mar_1080p5.ts
#EXTINF:9.600000,
tpo_res_30Mar_1080p6.ts
#EXTINF:9.600000,
tpo_res_30Mar_1080p7.ts
#EXT-X-CUE-OUT:20.840000000000003
#EXTINF:10,
#EXT-X-CUE-OUT-CONT:10/20.840000000000003
#EXTINF:10,
#EXT-X-CUE-IN
#EXTINF:9.600000,
tpo_res_30Mar_1080p8.ts
#EXTINF:11.520000,
tpo_res_30Mar_1080p9.ts
#EXTINF:9.600000,
tpo_res_30Mar_1080p10.ts
#EXTINF:9.600000,
tpo_res_30Mar_1080p11.ts
#EXTINF:9.600000,
tpo_res_30Mar_1080p12.ts
#EXTINF:9.600000,
tpo_res_30Mar_1080p13.ts
#EXTINF:5.760000,
tpo_res_30Mar_1080p14.ts
#EXT-X-ENDLIST
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment