js视频播放器随页面滚动出现右下角

html标签video

<div id="videoBox" class="box"> 
  <video width="400" controls> 
    <source src="video.mp4" type="video/mp4">  
    Your browser does not support HTML5 video. 
  </video> 
</div>

当页面滚动到一定高度，视频播放器将在右下角出现

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');              
  };   
  
});