當頁面滾動時將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 { 
  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');              
  };   
  
});

看出來了吧，原理很簡單，就是監聽頁面滾動事件，然后計算滾動距離，然后改變播放器容器的位置。