HTML5视频播放器随页面滚动固定页面右下角效果

当前位置:主页 > Html5库 > 音频视频播放器 > HTML5视频播放器随页面滚动固定页面右下角效果
HTML5视频播放器随页面滚动固定页面右下角效果
分享:

    插件介绍

    这是一款可以自动将HTML5视频播放器在页面向下滚动时,将其固定在页面右下角位置的jquery和CSS3效果。

    浏览器兼容性

    浏览器兼容性
    时间:2017-04-07
    阅读:
麦子学院
简要教程

这是一款可以自动将HTML5视频播放器在页面向下滚动时,将其固定在页面右下角位置的jquery和CSS3效果。

使用方法

在页面中引入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;
}                
                
初始化插件

最后使用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');             
  };  

});
                

网友评论