Preroll Vid Only [Youtube]

by ybombale

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.0.3/video-js.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/6.3.0/videojs-contrib-ads.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.0.3/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/6.3.0/videojs-contrib-ads.js"></script>
<!-- Source: https://stackoverflow.com/q/50732942 -->
<video id="testPlayer" class="video-js vjs-default-skin vjs-big-play-centered" autoplay controls width="640" height="360">
  <source src="http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8" type='application/x-mpegURL'>
</video>

CSS

.vjs-midroll-marker
{
	width: 5px;
	height: 100%;
	background-color: white;
	position: absolute;
}

.vjs-ad-playing .vjs-midroll-marker
{
	display: none;
}

JavaScript

var player = videojs("testPlayer");

player.ads();

player.on('readyforpreroll', function ()
{
	player.ads.startLinearAdMode();
	player.src("http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4");
});

player.one('adplaying', function() {
	player.trigger('ads-ad-started');
});

player.one('adended', function() {
	player.ads.endLinearAdMode();
});

player.trigger('adsready');