无法在同一页面中复制具有自动关闭功能的HTML5视频灯箱

Question

我在复制具有自动关闭功能的HTML5视频灯箱时遇到问题，当我试图在同一页面中放入2个或更多个盒子时，它会崩溃(我给了它不同的id(

来自codpen的项目令牌：https://codepen.io/jared-lynskey/pen/qBBJpZG?editors=1010

HTML

<a href="javascript:void(0)" id="video1">-- open video --</a>
<br />
<div id="vidBox">
<div id="videCont">
<video autoplay id="v1" controls="controls">
<source src="https://www.w3schools.com/htmL/mov_bbb.webm" type="video/webm">
<source src="https://www.w3schools.com/htmL/mov_bbb.mp4" type="video/mp4">
</video>
</div>
</div>

CSS

#closer_videopopup{
position: absolute;
display: table-cell;
right: 2%;
top: 2%;
font-size: 32px;
text-align: center;
vertical-align: middle;
padding: auto;
cursor: default;
background: none;
border: none;
color: #ffffff;

z-index: 100004;
}
#opct{
position: fixed;
z-index: 100000;
width: 100%;
height: 100%;
top: 0;
left:0;
bottom: 0;
right: 0;
filter: alpha(opacity=90);
-moz-opacity: 0.90;
opacity: 0.9;
}
#videCont{
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
margin: auto;
max-width: 720px;
height: 0;
height: auto !important;
}
video{
position: absolute;
top: 15%;
left: 0;
width: 100%;
opacity: 1 !important;
}
#video1{
cursor: pointer; cursor: hand;
}

JS-

(function ($) {
$.fn.VideoPopUp = function (options) {

var defaults = {
backgroundColor: "#000000",
opener: "video",
maxweight: "640",
pausevideo: false,
idvideo: ""
};

var patter = this.attr('id');
var settings = $.extend({}, defaults, options);
var video = document.getElementById(settings.idvideo);
function stopVideo() {
video.pause();
video.currentTime = 0;
}

$('#' + patter + '').css("display", "none");
$('#' + patter + '').append('<div id="opct"></div>');
$('#opct').css("background", settings.backgroundColor);
$('#' + patter + '').css("z-index", "100001");
$('#' + patter + '').css("position", "fixed")
$('#' + patter + '').css("top", "0");
$('#' + patter + '').css("bottom", "0");
$('#' + patter + '').css("right", "0");
$('#' + patter + '').css("left", "0");
$('#' + patter + '').css("padding", "auto");
$('#' + patter + '').css("text-align", "center");
$('#' + patter + '').css("background", "none");
$('#' + patter + '').css("vertical-align", "vertical-align");
$("#videCont").css("z-index", "100002");
$('#' + patter + '').append('<div id="closer_videopopup">&otimes;</div>');
$("#" + settings.opener + "").on('click', function () {
$('#' + patter + "").show();
$('#'+settings.idvideo+'').trigger('play');
});
$("#closer_videopopup").on('click', function () {
if(settings.pausevideo==true){
$('#'+settings.idvideo+'').trigger('pause');
}else{
stopVideo();
}
$('#' + patter + "").hide();
});
return this.css({
});
};
}(jQuery));


$(function () {
$('#vidBox').VideoPopUp({
backgroundColor: "#17212a",
opener: "video1",
maxweight: "640",
idvideo: "v1"
});
});

document.getElementById('v1').addEventListener('ended',myHandler,false);
function myHandler(e) {



document.getElementById("vidBox").style.display = "none";
window.alert('video-ended');
}

有什么建议吗？提前感谢

Answer 1

它只需要更改ID。

(function ($) {
$.fn.VideoPopUp = function (options) {

var defaults = {
backgroundColor: "#000000",
opener: "video",
maxweight: "640",
pausevideo: false,
idvideo: ""
};

var patter = this.attr('id');
var settings = $.extend({}, defaults, options);
var video = document.getElementById(settings.idvideo);
function stopVideo() {
video.pause();
video.currentTime = 0;
}
var player = $('#' + patter + '');
player.css("display", "none");
player.append('<div class="opct"></div>')
.css("background", settings.backgroundColor);
player.css("z-index", "100001");
player.css("position", "fixed")
player.css("top", "0");
player.css("bottom", "0");
player.css("right", "0");
player.css("left", "0");
player.css("padding", "auto");
player.css("text-align", "center");
player.css("background", "none");
player.css("vertical-align", "vertical-align");
player.find(".videCont").css("z-index", "100002");
player.append('<div class="closer_videopopup">&otimes;</div>')
.on('click', function () {
if(settings.pausevideo==true){
$('#'+settings.idvideo+'').trigger('pause');
}else{
stopVideo();
}
player.hide();
});
$("#" + settings.opener + "").on('click', function () {
player.show();
$('#'+settings.idvideo+'').trigger('play');
});
return this.css({
});
};
}(jQuery));


$(function () {
$('#vidBox').VideoPopUp({
backgroundColor: "#17212a",
opener: "video1",
maxweight: "640",
idvideo: "v1"
});
});
$(function () {
$('#vidBox2').VideoPopUp({
backgroundColor: "#F7212a",
opener: "video2",
maxweight: "640",
idvideo: "v2"
});
});

document.getElementById('v1').addEventListener('ended',function(e) {
document.getElementById("vidBox").style.display = "none";
window.alert('video1-ended');
},false);
document.getElementById('v2').addEventListener('ended', function (e) {
document.getElementById("vidBox2").style.display = "none";
window.alert('video2-ended');
},false);

.closer_videopopup{
position: absolute;
display: table-cell;
right: 2%;
top: 2%;
font-size: 32px;
text-align: center;
vertical-align: middle;
padding: auto;
cursor: default;
background: none;
border: none;
color: #ffffff;

z-index: 100004;
}
.opct{
position: fixed;
z-index: 100000;
width: 100%;
height: 100%;
top: 0;
left:0;
bottom: 0;
right: 0;
filter: alpha(opacity=90);
-moz-opacity: 0.90;
opacity: 0.9;
}
.videCont{
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
margin: auto;
max-width: 720px;
height: 0;
height: auto !important;
}
video{
position: absolute;
top: 15%;
left: 0;
width: 100%;
opacity: 1 !important;
}
#video1,
#video2{
cursor: pointer; cursor: hand;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:void(0)" id="video1">-- open video 1--</a>
<a href="javascript:void(0)" id="video2">-- open video 2--</a>
<br />
<div id="vidBox">
<div class="videCont">
<video autoplay id="v1" controls="controls">
<source src="https://www.w3schools.com/htmL/mov_bbb.webm" type="video/webm">
<source src="https://www.w3schools.com/htmL/mov_bbb.mp4" type="video/mp4">
</video>
</div>
</div>
<div id="vidBox2">
<div class="videCont">
<video autoplay id="v2" controls="controls">
<source src="https://www.w3schools.com/htmL/mov_bbb.webm" type="video/webm">
<source src="https://www.w3schools.com/htmL/mov_bbb.mp4" type="video/mp4">
</video>
</div>
</div>