基于jQuery HTML5的全屏背景视频插件

1

2

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<script type="text/javascript" src="vidbg.min.js"></script>

1

2

3

4

5

6

<div class="vidbg-box" style="width: 650px; height: 338px;"

  data-vidbg-bg="mp4: http://example.com/video.mp4, 

                 webm: path/to/video.webm, 

                 poster: path/to/poster.jpg"

  data-vidbg-options="loop: true, muted: true, overlay: true">

</div>

1

2

3

4

5

6

7

$('.vidbg-box').vidbg({

  'mp4': 'http://example.com/video.mp4',

  'webm': 'path/to/video.webm',

  'poster': 'path/to/fallback-image.png',

}, {

  // 参数选项

});

1

2

3

4

5

6

7

8

9

{

  volume: 1,

  playbackRate: 1,

  muted: true,

  loop: true,

  position: '50% 50%',

  resizing: true,

  overlay: false,

}