问题描述
我在复制具有自动关闭功能的 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">⊗</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",idvideo: "v1"
});
});
document.getElementById('v1').addEventListener('ended',myHandler,false);
function myHandler(e) {
document.getElementById("vidBox").style.display = "none";
window.alert('video-ended');
}
所以有什么推荐吗? 提前致谢
解决方法
它只需要更改 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">⊗</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",idvideo: "v1"
});
});
$(function () {
$('#vidBox2').VideoPopUp({
backgroundColor: "#F7212a",opener: "video2",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>