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

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

使用方法

在页面中引入jquery文件。

HTML结构

使用一个

元素来包裹HTML5视频元素。

Your browser does not support HTML5 video.

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