在有视频播放的页面上，有时我们需要滚动页面查看视频相关的内容信息，如简介、相关评论等，那么滚动页面时，视频播放器会离开视窗区域，这个时候我们可以使用JS和CSS技术将播放器切换固定到页面右下角。
使用方法
在页面中引入jquery文件。
<script src="path/to/jquery.min.js"></script>
HTML结构
使用一个<p>元素来包裹HTML5视频<video>元素。
<p id="videoBox" class="box">
<video width="400" controls>
<source src="sample.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</p>
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');
};
});
看出来了吧，原理很简单，就是监听页面滚动事件，然后计算滚动距离，然后改变播放器容器的位置。
以上就上有关当页面滚动时将HTML5视频播放器固定在页面右下角的全部内容，学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。