video标签

m0894 2018-09-28 05:14:07
我在页面的中部放置了多个video标签的视频,仅显示一个,使用setInterval定时轮转显示。可是问题来了,如果滚动条没有滚动到video标签没有问题,可是当滚动条拉过video标签,到底部时,每转换一个视频就滚动条的位置就变动一次,要嘛视频顶部在屏幕顶上,要嘛视频的顶部在屏幕的中间。这是怎么引起的?页面中还有类似的图片的轮播,图片的轮播没有问题,我删了视频这一段没有出现我说的那种状况。而且保留视频这一段的语句,仅仅删除了video标签,也不会出现滚动条异常。基本可以肯定是video标签引起,但是怎么引起的就不知道了。

<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;}
...全文
669 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
蜂窝煤2333 2018-10-30
  • 打赏
  • 举报
回复
试试看,谢谢分享
m0894 2018-10-05
  • 打赏
  • 举报
回复
引用 3 楼 jslang 的回复:
[quote=引用 2 楼 m0894 的回复:]
[quote=引用 1 楼 jslang 的回复:]
<div class="video"> 设置一个固定的 height,并且设置overflow: hidden;

有设置固定高的啊,看js最后几行[/quote]并且设置overflow: hidden;[/quote]
还是不行。放弃轮播视频了
m0894 2018-09-29
  • 打赏
  • 举报
回复
引用 1 楼 jslang 的回复:
<div class="video"> 设置一个固定的 height,并且设置overflow: hidden;

有设置固定高的啊,看js最后几行
天际的海浪 2018-09-29
  • 打赏
  • 举报
回复
引用 2 楼 m0894 的回复:
[quote=引用 1 楼 jslang 的回复:] <div class="video"> 设置一个固定的 height,并且设置overflow: hidden;
有设置固定高的啊,看js最后几行[/quote]并且设置overflow: hidden;
天际的海浪 2018-09-28
  • 打赏
  • 举报
回复
<div class="video"> 设置一个固定的 height,并且设置overflow: hidden;

39,082

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧