image.png

插件描述：vidbacking是一款響應(yīng)式的，跨平臺(tái)的html5視頻背景插件。該視頻背景插件允許你在頁(yè)面中的某個(gè)div后整個(gè)頁(yè)面中使用HTML5視頻作為背景。如果瀏覽器不支持HTML5視頻，插件會(huì)自動(dòng)將背景回退為指定的背景圖片。

Video Background Plugin

vidbacking是一款響應(yīng)式的，跨平臺(tái)的html5視頻背景插件。該視頻背景插件允許你在頁(yè)面中的某個(gè)div后整個(gè)頁(yè)面中使用HTML5視頻作為背景。如果瀏覽器不支持HTML5視頻，插件會(huì)自動(dòng)將背景回退為指定的背景圖片。

使用方法

在頁(yè)面中引入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結(jié)構(gòu)

你可以在某個(gè)<div>或<section>元素上制作HTML5視頻背景效果。也可以制作全屏的HTML5視頻背景效果。對(duì)于全屏的視頻背景，你需要在body標(biāo)簽之后添加HTML5 video標(biāo)簽，在video標(biāo)簽中需要添加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>

對(duì)于在<div>元素內(nèi)制作視頻背景效果，你只需要將video標(biāo)簽放在<div>元素內(nèi)即可。

<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>

初始化插件

在頁(yè)面DOM元素加載完畢之后，可以通過(guò)vidbacking()方法來(lái)初始化該HTML5視頻背景插件。

/* 全屏HTML5視頻背景 */
<script type="text/javascript">
  $(function(){
        $('body').vidbacking();
  });
</script>
  
/* DIV元素內(nèi)的HTML5視頻背景 */
<script type="text/javascript">
  $(function(){
        $('#video-back').vidbacking();
  });
</script

下載地址：鏈接：https://pan.baidu.com/s/16rBM4bZzuICJ0mDNDNnbhA 密碼：yrca