当页面滚动时将HTML5视频播放器固定在页面右下角

在有视频播放的页面上，有时我们需要滚动页面查看视频相关的内容信息，如简介、相关评论等，那么滚动页面时，视频播放器会离开视窗区域，这个时候我们可以使用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 { 
   100%; 
  vertical-align: bottom; 
} 
  
#videoBox.in { 
  animation: ac 1s; 
} 
  
#videoBox.out { 
  position: fixed; 
  bottom: 0; 
  right: 0; 
   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');              
  };   
  
});

看出来了吧，原理很简单，就是监听页面滚动事件，然后计算滚动距离，然后改变播放器容器的位置。