开发人员级别 -初学者
最近开始编程。只熟悉 HTM/CSS/JS 和 NodeJS。
项目-
我正在使用这个↓代码在我的网站上使用plyr视频播放器播放文件。
CODEPEN的链接 （下面的代码片段很长，请参考 codepen 上的代码，这将帮助你们更轻松地解决这个问题）
问题-
在上述情况下，我如何将 VAST/VPAID 与视频播放器集成，
以及如何在此代码笔页面上完成 → VAST 集成演示
任何类型的输入都值得赞赏。
如果有帮助，这里是播放器文档的链接 - 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>