39,082
社区成员
发帖
与我相关
我的任务
分享
<section class="block-5">
<div class="video">
<ul id="video">
<c:forEach items="${VideoList}" var="poVal" varStatus="status">
<li class="css3">
<video src="${poVal.hi13}" id="myVideo${status.index+1}" width="100%" height="100%" poster="${poVal.hi10}" style="cursor:pointer;"></video>
<div class="video-play"></div>
<div class="video-name">${poVal.hi02}</div>
</li>
</c:forEach>
</ul>
</div>
<div>
<a id="video_left_arrow" class="left_arrow"></a>
<a id="video_right_arrow" class="right_arrow"></a>
</div>
</section>
$(document).ready(function(e) {
if($('#video').length == 0){
return;
}
var sindex = 0;
var len = $('#video li').length;
picShow(0)
var index = 0;
function picShow(i){
$('#video li').eq(i).stop(true,true).fadeIn().siblings().fadeOut();
$('#video li').siblings().find('.video-name').removeClass('anit');
$('#video li').eq(i).find('.video-name').addClass('anit');
sindex = i;
}
if(len > 1){
var playPic;
picPlay();
$('#video li').hover(
function(e){
window.clearInterval(playPic);
},
function(e){
picPlay();
}
);
function picPlay(){
playPic = setInterval(function(){
if($('.block-5').hasClass('playing')){
return;
}
index++;
if(index==len){index=0;}
picShow(index);
},IntervalTime);
}
$('#video_left_arrow').click(function(){
index--;
if(index==-1){index=len-1;}
picShow(index);
clearInterval(playPic);
picPlay();
});
$('#video_right_arrow').click(function(){
index++;
if(index==len){index=0;}
picShow(index);
clearInterval(playPic);
picPlay();
});
}else{
$('#video_left_arrow').hide();
$('#video_right_arrow').hide();
}
$('.block-5 li').each(function(index, element) {
var video = document.getElementById($(this).find('video').attr('id'));
video.onclick = function(e){
if(video.paused){
video.play();
}else{
video.pause();
}
}
video.onplay = function(e){
if(typeof($(this).attr("controls"))=="undefined"){
$(this).attr('controls','controls');
}
$('.block-5').addClass('playing');
}
video.onpause = function(e){
$('.block-5').removeClass('playing');
$(this).removeAttr('controls');
}
video.onended = function(e){
$(this).removeAttr('controls');
$('.block-5').removeClass('playing');
}
video.onpageshow = function(e){
console.log(55545455);
}
$(this).find('div').click(function(e) {
video.play();
});
});
VideoHeight();
$(window).resize(function(){
VideoHeight();
});
function VideoHeight(){
winwei = parseInt($(document.body).width());
$('.block-5,.block-5 .video,.block-5 li').css('height',winwei/2);
}
});
.block-5{position:relative;overflow:hidden;width:100%;margin-top:60px;background:#FAFAFA;}
.block-5 .video,.block-5 #video{width:100%;display:block;}
.block-5 li{width:100%;display:none;text-align:center;cursor:pointer;}
.block-5 video{width:100%;height:100%;background-color:#000;}
.block-5 .video-play{position:absolute;width:120px;height:120px;top:50%;left:50%;margin-top:-60px;margin-left:-60px;background: url(svg/video_play.svg);background-size:120px 120px;display:block;cursor:pointer;}
.block-5 .video-name{position:absolute;left:0;bottom:0;width:100%;height:70px;line-height:70px;color:#FAFAFA;font-size:32px;text-align:center;background:#000000;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));background:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);background:-o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);background:-ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));-transition: all 0.5s ease-out 0.1s;transition: all 0.5s ease-out 0.1s;opacity:0;}
.block-5.playing .video-play,.block-5.playing .video-name,.block-5.playing .left_arrow,.block-5.playing .right_arrow{display:none !important;}