当前位置:主页 > 网页特效 > 播放器代码 >

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

发布时间:2018/08/01 来源:互联网 浏览: 关键词:HTML5 视频播放器 播放器代码 
HTML5视频播放器随页面滚动固定页面右下角效果 HTML5视频播放器随页面滚动固定页面右下角效果
阿里云

简要教程

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

使用方法

在页面中引入jquery文件。

<scriptsrc='path/to/jquery.min.js'></script>  

HTML结构

使用一个<div>元素来包裹HTML5视频<video>元素。

<divid="videoBox"class="box">
  <videowidth="400"controls>
    <sourcesrc="sample.mp4"type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>    

CSS样式

为视频元素添加下面的简单CSS样式:

#videoBox {
  border:10pxsolid#212223;
  transition:0.5s;
}
video {
  width:100%;
  vertical-align:bottom;
}
 
#videoBox.in {
  animation: ac1s;
}
 
#videoBox.out {
  position:fixed;
  bottom:0;
  right:0;
  width:300px;
  z-index:999;
  animation: an0.5s;
} 

初始化插件

最后使用jquery来检测窗口的滚动事件,并在合适的位置切换videoBox的class类,使其隐藏和出现在右下角。

varha = ( $('#videoBox').offset().top + $('#videoBox').height() );
 
$(window).scroll(function(){ 
 
  if( $(window).scrollTop() > ha + 500 ) {
    $('#videoBox').css('bottom','0');
  }elseif( $(window).scrollTop() < ha + 200) { 
    $('#videoBox').removeClass('out').addClass('in');    
  }else{      
    $('#videoBox').removeClass('in').addClass('out');  
    $('#videoBox').css('bottom','-500px');            
  }; 
 
});

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top