我想在我的滑块上显示一个视频弹出窗口。但现在有一个z指数问题。视频位于滑块图像的后面。在jQuery代码中添加movie.css( "zIndex", 2147483647 );后，视频位于Firefox中的滑块图像前面，但不在Chrome中。
除此之外，控件无效。即使使用jquery movie.prop("controls",true);添加控件，您也只能看到控件，还有一些悬停效果，但您无法按任何按钮。随着视频控件=“真”，Chrome中甚至出现浏览器崩溃。
我正在互联网上找到一些关于影子树的东西，但我仍然不知道如何让它工作。我知道您可以使用::-webkit-media-controls在css中选择视频控件，但由于Chrome浏览器崩溃且firefox不是webkit浏览器，我无法测试它。不幸的是我不知道如何选择firefox视频控件属性。没有::-moz-media-controls。
我无法发布所有代码，但我希望这足以获得一些帮助：
$(document).ready(function () {
// show popup when you click on the link
var movie = $('#movie');
$('#clips li').click(function (event) {
event.preventDefault();
var pdf_id = $(this).attr('class');
var clip_id = $(this).children().attr('id');
for (var i = 0; i < topkeys.length; i++) {
if (pdf_id == topkeys[i]) {
var lowerkeys = $.map(pdf_videos[i], function (n) {
return Object.keys(n);
});
for (var j = 0; j < lowerkeys.length; j++) {
if (clip_id == lowerkeys[j]) {
var thumbnail = pdf_videos[i][pdf_id][clip_id]['mainthumbnail'];
var mp4url = pdf_videos[i][pdf_id][clip_id]['mp4url'];
var webmurl = pdf_videos[i][pdf_id][clip_id]['webmurl'];
$("#movie").attr('poster', thumbnail);
$("#mp4").attr('src', mp4url);
$("#webm").attr('src', webmurl);
var movie = $('#movie');
$('.overlay-bg').show();
movie.get(0);
movie.load();
movie.prop("controls",true);
//movie.css( "zIndex", 2147483647 );
}
}
}
}
});
if (movie[0].paused) {
$('.pause-btn').hide();
};
// hide popup when user clicks on close button
$('.close-btn').click(function () {
$('.overlay-bg').hide(); // hide the overlay
movie[0].pause();
});
$('.play-btn').click(function () {
movie[0].play(); //Select a DOM ELEMENT!
$('.pause-btn').show();
$('.play-btn').hide();
$("#movie").mouseleave(function() {
$('.pause-btn').delay(2000).fadeOut('slow');
});
$("#movie").mouseenter(function() {
$(".pause-btn").show();
});
});
$('.pause-btn').click(function () {
movie[0].play(); //Select a DOM ELEMENT!
$('.pause-btn').hide();
$('.play-btn').show();
});
if (movie[0].paused) {
$('.pause-btn').hide();
};
if (!movie[0].paused) {
$("#movie").mouseenter(function() {
$(".pause-btn").show();
}).mouseleave(function() {
$('.pause-btn').delay(2000).fadeOut('slow');
});
}
$('.pause-btn').click(function () {
movie[0].pause(); //Select a DOM ELEMENT!
});
// hides the popup if user clicks anywhere outside the container
$('.overlay-bg').click(function () {
$('.overlay-bg').hide();
movie[0].pause();
})
// prevents the overlay from closing if user clicks inside the popup overlay
$('#clip_id').click(function () {
return false;
});
});
此代码的作用： 您在滑块中看到图像，有几个带图像的演示文稿（所有列表元素与一个演示文稿的图像具有相同的ID）。滑块下方有视频缩略图（根据当前幻灯片元素的列表元素ID，视频缩略图的大小和数量）。如果单击缩略图，则会显示视频弹出窗口。但随后令人沮丧的部分开始 - 您无法访问控件或视频位于幻灯片元素后面。那么如何预防？
P.S。：我正在使用bx滑块作为图像滑块。
HTML：
<div class="overlay-bg">
<div id="videowrapper">
<div id="wrapper2">
<div id="left-column2">
<div id="clip_id" class="clip">
<video id="movie" poster="http://url.jpg">
<source id="mp4" type="video/mp4" src="http://url.mp4"></source>
<source id="webm" type="video/webm" src="http://url.webm"></source>
</video>
<button class="close-btn">X</button>
<button class="play-btn">▶</button>
<button class="pause-btn">II</button>
</div>
</div>
</div><!-- end wrapper2 -->
</div><!-- end videowrapper -->
</div> <!-- end overlay-bg -->
CSS：
#left-column2 {
position: absolute;
top: 260px;
width:632px;
height: 320px;
}
#wrapper2 {
width: 1012px;
margin: 0 auto;
}
.clip video {
width: 568px;
/*height: 320px; new height*/
height: 426px;
position: absolute;
left: 32px;
top: 0px;
}
#overlay {
position: absolute;
top: 0px;
left: 32px;
width: 568px;
/*height: 320px; new height*/
height: 426px;
background-color: #000;
z-index: 9999;
}
#overlay video {
width: 568px;
/*height: 320px; new height*/
height: 426px;
}
#close_button {
z-index: 10000;
position: absolute;
top: 90px;
right: 32px;
width: 20px;
height: 20px;
color: #fff;
font-weight: bold;
font-size: 20px;
cursor: pointer;
}
.overlay-bg {
display: none;
position: fixed;
top: 0;
left: 0;
height:100%;
width: 100%;
cursor: pointer;
background: #000; /* fallback */
background: rgba(0,0,0,0.75);
}
.close-btn {
position: absolute;
cursor: pointer;
width: 20px;
height: 20px;
top: 30px;
right: 0px;
}
.play-btn {
position: absolute;
cursor: pointer;
width: 50px;
height: 50px;
border-radius: 50%;
top: 210px;
left: 285px;
opacity: 0.7;
font-size: 30px;
}
.pause-btn {
position: absolute;
cursor: pointer;
width: 50px;
height: 50px;
border-radius: 50%;
top: 210px !important;
left: 285px;
opacity: 0.7;
font-weight: bold;
font-size: 30px;
}
.close-btn:hover {
background: #05abe0;
}
.play-btn:hover {
background: #05abe0;
}
.pause-btn:hover {
background: #05abe0;
}
#movie {
z-index: 2147483646 !important;
display: block !important;
position: relative !important;
}