音频/视频
vidbacking - HTML5视频背景插件
PetitQ
vidbacking 是一款响应式的，跨平台的 html5 视频背景插件。该视频背景插件允许你在页面中的某个 div 后整个页面中使用 HTML5 视频作为背景。如果浏览器不支持 HTML5 视频，插件会自动将背景回退为指定的背景图片。
使用方法:
在页面中引入 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 结构:
你可以在某个
或
元素上制作 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>
对于在
元素内制作视频背景效果，你只需要将 video 标签放在
注册 ｜
忘记密码
元素内即可。
<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>
github 地址：https://github.com/souravm84/vidbacking
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
相关文章
热销模板
本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！
登录