jQuery背景视频插件vidbacking

vidbacking是一款响应式的、跨平台的html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景。如果浏览器不支持HTML5视频,插件会自动将背景回退为指定的背景图片。

使用方法

引入相关文件

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

实例化

//全屏
<script type="text/javascript">
  $(function(){
        $('body').vidbacking();
  });
</script>

//DIV元素内的HTML5视频背景 
<script type="text/javascript">
  $(function(){
        $('#video-back').vidbacking();
  });
</script
更新时间 2020-04-20 16:09:15,本资源已通过Awesomes审核检验,请放心使用!
如下载遇到问题,请联系客服解决
下载地址
此插件下载需要0A币,请登录后进行下载。
请文明评论,与人为善,比聪明更重要!
评论