DEVELOPER LEVEL - Beginner
Have recently started programming. Only Familiar with HTM/CSS/JS & NodeJS.
THE PROJECT -
I'm using this ↓ code to play files using plyr Video player in my website.
LINK TO CODEPEN (The below snippet is very lengthy, please refer to the code on codepen, this will help you guys to work this out more easily)
THE PROBLEM -
How do I integrate VAST/VPAID with the Video Players in the above case,
to how it is done on this codepen page → VAST Integrated DEMO
Any kind of Input is appreciated.
Here is the link to the player docs, if it helps - https://github.com/sampotts/plyr
$(document).ready(function() {
VideoAudioHandler();
});
var StopAllVideoNotv = function(v) {
$(plyr.get()).each(function() {
if (this.getContainer() != v.detail.plyr.getContainer()) {
this.pause();
}
});
};
var GetPlayingVideo = function() {
$("video").filter(function() {
var video = $(this).get(0);
return !video.paused;
});
};
var VideoAudioHandler = function() {
$("video").each(function() {
$('<div class="videoContainer"></div>').insertBefore(this).append(this);
$(this).attr("video-id", "video-" + Date.now());
});
plyr.setup(document.querySelectorAll("video"), {
enabled: true
});
$(plyr.get()).each(function() {
this.on('playing', function(event) {
StopAllVideoNotv(event);
CloseSmallVideo();
});
});
$(window).scroll(function() {
var PlayingVideo = $(plyr.get()).filter(function() {
return !this.isPaused();
})[0];
// none of videos is playing
if (PlayingVideo == undefined) return 0;
//if video is playing and not visible to screen and no small video
if (!$(PlayingVideo.getContainer()).visible(true) && $(".SmallVideo").length == 0) {
PlayingVideo.pause();
var n = $("<div class='SmallVideo'></div>");
n.attr("related-video", $(PlayingVideo.getMedia()).attr("video-id"));
var sv = $(PlayingVideo.getMedia()).clone();
sv.get(0).currentTime = PlayingVideo.getCurrentTime();
n.append(sv);
n.appendTo("body");
plyr.setup('.SmallVideo', {
enabled: true,
autoplay: true
});
$('<button type="button" onclick="CloseSmallVideo(this)" class="closeSmallVideoBtn" aria-label="Play"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 47.971 47.971" style="enable-background:new 0 0 47.971 47.971;" xml:space="preserve"> <g> <path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88 c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242 C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879 s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"/> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg></button>').appendTo('.SmallVideo .plyr');
}
//if video is playing and visible to screen
else {
}
});
};
var CloseSmallVideo = function(e) {
if ($(".SmallVideo").length == 0) return 0;
var v = plyr.get($(".SmallVideo .plyr").get(0));
v[0].pause();
$(".SmallVideo").remove();
};$(document).ready(function() {
VideoAudioHandler();
}
);
var StopAllVideoNotv=function(v) {
$(plyr.get()).each(function() {
if (this.getContainer() !=v.detail.plyr.getContainer()) {
this.pause();
}
}
);
}
;
var GetPlayingVideo=function() {
$("video").filter(function() {
var video=$(this).get(0);
return !video.paused;
}
);
}
;
var VideoAudioHandler=function() {
$("video").each(function() {
$('<div class="videoContainer"></div>').insertBefore(this).append(this);
$(this).attr("video-id", "video-"+ Date.now());
}
);
plyr.setup(document.querySelectorAll("video"), {
enabled: true
}
);
$(plyr.get()).each(function() {
this.on('playing', function(event) {
StopAllVideoNotv(event);
CloseSmallVideo();
}
);
}
);
$(window).scroll(function() {
var PlayingVideo=$(plyr.get()).filter(function() {
return !this.isPaused();
}
)[0];
// none of videos is playing
if(PlayingVideo==undefined) return 0;
//if video is playing and not visible to screen and no small video
if(!$(PlayingVideo.getContainer()).visible(true) && $(".SmallVideo").length==0) {
PlayingVideo.pause();
var n=$("<div class='SmallVideo'></div>");
n.attr("related-video", $(PlayingVideo.getMedia()).attr("video-id"));
var sv=$(PlayingVideo.getMedia()).clone();
sv.get(0).currentTime=PlayingVideo.getCurrentTime();
n.append(sv);
n.appendTo( "body");
plyr.setup('.SmallVideo', {
enabled: true, autoplay: true
}
);
$('<button type="button" onclick="CloseSmallVideo(this)" class="closeSmallVideoBtn" aria-label="Play"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 47.971 47.971" style="enable-background:new 0 0 47.971 47.971;" xml:space="preserve"> <g> <path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88 c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242 C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879 s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"/> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg></button>').appendTo('.SmallVideo .plyr');
}
//if video is playing and visible to screen
else {}
}
);
}
;
var CloseSmallVideo=function(e) {
if($(".SmallVideo").length==0) return 0;
var v=plyr.get($(".SmallVideo .plyr").get(0));
v[0].pause();
$(".SmallVideo").remove();
}
;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-visible/1.2.0/jquery.visible.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/2.0.18/plyr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/plyr/2.0.18/plyr.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-title">
<div class="caption">
<h3 class="heading">المقدمة</h3>
</div>
</div>
<div class="portlet-body" style="height: auto;">
<p>بل أما فسقط تمهيد, من على ونتج الشمل الإمتعاض. و سابق الأثنان وقد. انه حاول والفلبين عن, ثم جمعت وبولندا بين, دون ٣٠ تونس قدما عشوائية. دنو عن فرنسية التكاليف. كما إختار استراليا، التغييرات هو, شيء بـ طوكيو وقوعها، للسيطرة. كل تكبّد والإتحاد
الخارجية ذات, مئات الأوضاع ما وتم.
</p>
</div>
</div>
</div>
<div class="col-md-12">
<video width="640" height="360" poster="resources/poster.PNG" preload="none" controls playsinline webkit-playsinline>
<source src="https://tmdcdn.s3.amazonaws.com/Big_Buck_Bunny_1080_10s_2MB.mp4">
</video>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>إذ مما الأحمر بتخصيص. من الضغوط المعاهدات وبالتحديد، تعد, شدّت مقاطعة الجديدة، دار تم, عرض أن الجوي غينيا والتي. الأمم علاقة ان ولم, عل مدينة الطريق يكن. يكن و نقطة وتنصيب, ودول فهرست إذ يبق, أخر مع النفط انتصارهم التغييرات. الإمداد بريطانيا وصل
عن.
</p>
</div>
<div class="col-md-12">
<video width="640" height="360" poster="resources/poster.PNG" preload="none" controls playsinline webkit-playsinline>
<source src="https://tmdcdn.s3.amazonaws.com/Big_Buck_Bunny_1080_10s_2MB.mp4">
</video>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-title">
<div class="caption">
<h3 class="heading">أعمدة نصوص</h3>
</div>
</div>
<div class="portlet-body" style="height: auto;">
<main class="entry-content">
<p><em>كُلفة</em> والمعدات مكن في, عل دنو تطوير لأداء وانهاء. لإعادة ابتدعها ما أخر, فقد أن فسقط لكون! كل جديداً البولندي ضرب, الستار بتخصيص عن بلا! بأيدي لإنعدام ثم الى, أملاً ويتّفق يبق إذ! خيار عقبت قد كان, وبعض الإنزال للإتحاد وصل مع. ما
وزارة عملية الستار يكن, هو دار تصفح مسارح للمجهود, أن الخطّة وحرمان بالإنزال تحت.
<br>كُلفة والمعدات مكن في, عل دنو تطوير لأداء وانهاء. لإعادة ابتدعها ما أخر, فقد أن فسقط لكون! كل جديداً البولندي ضرب, الستار بتخصيص عن بلا! بأيدي لإنعدام ثم الى, أملاً ويتّفق يبق إذ! خيار
عملية الستار يكن, هو دار تصفح مسارح للمجهود, أن الخطّة وحرمان بالإنزال تحت.</p>
</main>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-title">
<div class="caption">
<h3 class="heading">أعمدة نصوص</h3>
</div>
</div>
<div class="portlet-body" style="height: auto;">
<main class="entry-content">
<p><em>كُلفة</em> والمعدات مكن في, عل دنو تطوير لأداء وانهاء. لإعادة ابتدعها ما أخر, فقد أن فسقط لكون! كل جديداً البولندي ضرب, الستار بتخصيص عن بلا! بأيدي لإنعدام ثم الى, أملاً ويتّفق يبق إذ! خيار عقبت قد كان, وبعض الإنزال للإتحاد وصل مع. ما
وزارة عملية الستار يكن, هو دار تصفح مسارح للمجهود, أن الخطّة وحرمان بالإنزال تحت.
<br>كُلفة والمعدات مكن في, عل دنو تطوير لأداء وانهاء. لإعادة ابتدعها ما أخر, فقد أن فسقط لكون! كل جديداً البولندي ضرب, الستار بتخصيص عن بلا! بأيدي لإنعدام ثم الى, أملاً ويتّفق يبق إذ! خيار عقبت قد كان, وبعض الإنزال للإتحاد وصل مع. ما وزة الستار يكن, هو دار تصفح مسارح للمجهود, أن الخطّة وحرمان بالإنزال تحت.</p>
</main>
</div>
</div>
</div>
<div class="col-md-12">
<video width="640" height="360" poster="resources/poster.PNG" preload="none" controls playsinline webkit-playsinline>
<source src="https://tmdcdn.s3.amazonaws.com/Big_Buck_Bunny_1080_10s_2MB.mp4">
</video>
</div>
</div>
</div>