HTML5 视频背景插件vidbacking
2023-06-13 09:16:42 时间
简要教程
vidbacking是一款响应式的,跨平台的 html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景。如果浏览器不支持HTML5视频,插件会自动将背景回退为指定的背景图片。
使用方法
在页面中引入jquery和jquery.vidbacking.js,以及jquery.vidbacking.css文件。
// 由青梅博客整理qmblog.cn
<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>
<!-- Div的HTML内容 -->
<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地址
vidbacking HTML5视频背景插件的github地址为:https://github.com/souravm84/vidbacking
相关文章
- java和html_如何区别html和html5
- html5里的空心圆柱体,容积及空心圆柱体积.doc[通俗易懂]
- HTML5和CSS3提高
- TideSDK:使用 HTML5, CSS3 和 JavaScript 创建多平台的桌面应用
- HTML5 Canvas 图像动画的实现(实例小球弹跳)详解编程语言
- 基于html5 localStorage的购物车JS脚本详解编程语言
- HTML5之SVG详解编程语言
- html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。详解编程语言
- html5传感器详解编程语言
- html5 canvas手写字代码(兼容手机端)详解编程语言
- html5获取自己定位的方法详解编程语言
- HTML5 audio脚本控制播放的方法详解编程语言
- 集结 HTML5 与 MySQL,搭建无可抵挡的猛力!(html5与mysql)
- 兼容性探究HTML5与Linux的兼容性(html5与linux)
- HTML5 新元素
- HTML5 SVG
- 如何使用HTML5连接MySQL数据库:同步数据更加高效和安全。(html5连接mysql数据库)
- HTML5 Audio
- HTML5 应用程序缓存
- 编写高效HTML5应用程序并优化性能的技巧:Redis的角色(html5redis)