html5视频背景插件vidbacking

2021-06-13 947
下载不了?请联系网站客服提交链接错误!
增值服务:
html5视频背景插件vidbacking
最近更新 2022年03月18日
资源编号 2763

html5视频背景插件vidbacking

2021-06-13 HTML素材 0 947 百度已收录
敬告!本站所有资源仅供学习、交流、欣赏使用,禁止商用!!
增值服务:
网站架设
报错维修
前端美化
仿站
找资源
立即下载 发布资源
详情介绍

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

html5视频背景插件vidbacking

使用方法

在页面中引入jquery和jquery.vidbacking.js,以及jquery.vidbacking.css文件

<link rel="stylesheet" href="path/to/jquery.vidbacking.css" rel="external nofollow"  />
<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>

 

 

vidbacking HTML5视频背景插件的github地址为:https://github.com/souravm84/vidbacking

资源下载此资源仅限注册用户下载,请先
有问题请咨询客服
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

所有资源版权为原作者所有,本站提供仅学习、交流、观赏 使用禁止转载、销售、商用等。如有违反著作人权益者本站不承担任何责任。

源码国度 HTML素材 html5视频背景插件vidbacking https://daet.cn/sucaiym/htsc/2763.html

给我一台电脑,还你一个世界

常见问题

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务