音频/视频

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

阿里云


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

使用方法:

在页面中引入 jquery 文件。

也想出现在这里?联系我们
创客主机
  1. <script src='path/to/jquery.min.js'></script>

HTML 结构:

使用一个[div]元素来包裹 HTML5 视频元素。

  1. <div id="videoBox" class="box">
  2.   <video width="400" controls>
  3.     <source src="sample.mp4" type="video/mp4"> 
  4.     Your browser does not support HTML5 video.
  5.   </video>
  6. </div>

CSS 样式:

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

  1. #videoBox {
  2.   border: 10px solid #212223;
  3.   transition: 0.5s;
  4. }
  5. video {
  6.   width: 100%;
  7.   vertical-align: bottom;
  8. }
  9.  
  10. #videoBox.in {
  11.   animation: ac 1s;
  12. }
  13.  
  14. #videoBox.out {
  15.   position: fixed;
  16.   bottom: 0;
  17.   right: 0;
  18.   width: 300px;
  19.   z-index: 999;
  20.   animation: an 0.5s;
  21. }

初始化插件:

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

  1. var ha = ( $('#videoBox').offset().top + $('#videoBox').height() );
  2.  
  3. $(window).scroll(function(){  
  4.  
  5.   if ( $(window).scrollTop() > ha + 500 ) { 
  6.     $('#videoBox').css('bottom','0'); 
  7.   } else if ( $(window).scrollTop() < ha + 200) {  
  8.     $('#videoBox').removeClass('out').addClass('in');     
  9.   } else {       
  10.     $('#videoBox').removeClass('in').addClass('out');   
  11.     $('#videoBox').css('bottom','-500px');             
  12.   };  
  13.  
  14. });

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

已有 669 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!