在有视频播放的页面上,有时我们需要滚动页面查看视频相关的内容信息,如简介、相关评论等,那么滚动页面时,视频播放器会离开视窗区域,这个时候我们可以使用JS和CSS技术将播放器切换固定到页面右下角。
使用方法
在页面中引入jquery文件。
<script src="path/to/jquery.min.js"></script>
知识兔HTML结构
使用一个<div>
元素来包裹HTML5视频<video>
元素。
<div id="videoBox" class="box">
<video width="400" controls>
<source src="sample.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
知识兔CSS样式
为视频元素添加下面的简单CSS样式:
#videoBox {
border: 10px solid #212223;
transition: 0.5s;
}
video {
width: 100%;
vertical-align: bottom;
}
#videoBox.in {
animation: ac 1s;
}
#videoBox.out {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
z-index: 999;
animation: an 0.5s;
}
知识兔Javascript
最后使用jquery来检测窗口的滚动事件,并在合适的位置切换videoBox的class类,使其隐藏和出现在右下角。
var ha = ( $('#videoBox').offset().top + $('#videoBox').height() );
$(window).scroll(function(){
if ( $(window).scrollTop() > ha + 500 ) {
$('#videoBox').css('bottom','0');
} else if ( $(window).scrollTop() < ha + 200) {
$('#videoBox').removeClass('out').addClass('in');
} else {
$('#videoBox').removeClass('in').addClass('out');
$('#videoBox').css('bottom','-500px');
};
});
知识兔看出来了吧,原理很简单,就是监听页面滚动事件,然后计算滚动距离,然后改变播放器容器的位置。