html5全屏把视频作为页面背景特效

---

发布时间：2018/5/17 12:22:42  次浏览  作者:admin

演示地址 http://lab.yn137.com/upload/laboratory/html5video/index2.html
两个效果的页面head部分引入了3个相同的CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/normalize.css" /> 
<link type="text/css" rel="stylesheet" href="css/demo.css"> 
<link type="text/css" rel="stylesheet" href="dist/jquery.vidbacking.css">

div区域视频背景的指定CSS样式文件为style1.css，全屏视频背景的指定CSS样式文件为style2.css，代码如下：

<link type="text/css" rel="stylesheet" href="css/style1.css"> 
<link type="text/css" rel="stylesheet" href="css/style2.css">

页面的body部分也有所区别，具体看页面代码即能明白了，两段代码如下：

<div class="video-back"> 
    <video poster="assets/screenshot1.jpg" autoplay muted loop class="vidbacking"> 
        <source src="assets/Rallye.mp4" type="video/mp4"> 
    </video> 
    <div class="htmleaf-demo center"> 
      <a href="index.html" class="current">div区域视频背景</a> 
      <a href="index2.html">全屏视频背景</a> 
    </div> 
    <div class="clearfix"></div> 
</div>

<div class="htmleaf-container"> 
    <video poster="assets/screenshot1.jpg" autoplay muted loop class="vidbacking"> 
        <source src="assets/Rallye.mp4" type="video/mp4"> 
    </video> 
    <div class="video-back"> 
        <div class="htmleaf-demo center"> 
          <a href="index.html">div区域视频背景</a> 
          <a href="index2.html" class="current">全屏视频背景</a> 
        </div> 
        <div class="clearfix"></div> 
    </div> 
</div>

页面的底部代码也略有不同，代码如下：

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="dist/jquery.vidbacking.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    $('.video-back').vidbacking(); 
}); 
</script>

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>  <script type="text/javascript" src="dist/jquery.vidbacking.js"></script>  <script type="text/javascript"> 
$(function(){ 
    $('body').vidbacking({ 
        'masked': true 
    });  });  </script>