在线建站培训
您的位置: 魔客吧站长论坛网页特效查看内容

html5视频背景插件

轮子 发表于 2017-8-10 17:39:27 | 栏目:网页特效
网站特效
效果: 其它 
脚本: HTML5代码 
201707251501.jpg


简要教程
vidbacking是一款响应式的,跨平台的html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景。如果浏览器不支持HTML5视频,插件会自动将背景回退为指定的背景图片。
使用方法
在页面中引入jquery和jquery.vidbacking.js,以及jquery.vidbacking.css文件。
<link rel="stylesheet" href="path/to/jquery.vidbacking.css" />
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.vidbacking.js"></script>      
HTML结构

你可以在某个<div>或<section>元素上制作HTML5视频背景效果。也可以制作全屏的HTML5视频背景效果。对于全屏的视频背景,你需要在body标签之后添加HTML5 video标签,在video标签中需要添加vidbacking class类。
<video poster="screenshot1.jpg" autoplay muted loop class="vidbacking">
  <source src="video1.mp4" type="video/mp4">
  <source src="video1.webm" type="video/webm">
</video>                  
对于在<div>元素内制作视频背景效果,你只需要将video标签放在<div>元素内即可。
<div id="video-back">
  <video poster="screenshot1.jpg" autoplay muted loop class="vidbacking">
    <source src="video1.mp4" type="video/mp4">
    <source src="video1.webm" type="video/webm">
  </video>
    <!-- html content of the div -->
    <h1>Vidbacking Demo of <div> Background</h1>
</div>                  
初始化插件

在页面DOM元素加载完毕之后,可以通过vidbacking()方法来初始化该HTML5视频背景插件。
/* 全屏HTML5视频背景 */
<script type="text/javascript">
  $(function(){
        $('body').vidbacking();
  });
</script>

/* DIV元素内的HTML5视频背景 */
<script type="text/javascript">
  $(function(){
        $('#video-back').vidbacking();
  });
</script>
请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

售价:免费  [充值金币]  [免费赚金币]  [关于会员等级] 
下载权限: 无下载限制  [购买VIP]   [免费升VIP]

说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!如有侵犯您的版权,请及时联系我们,我们将尽快处理。