Web编程 订阅所有【Web编程】的日志

jQuery html5背景视频插件vidbacking[转]

编辑:dnawo 日期:2019-10-17

字体大小: 小 中 大
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结构

你可以在某个<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>


[1].vidbacking插件：http://www.mzwu.com/pic/201910/jquery.vidbacking.zip

上一篇: HTML5实现全屏视频动态背景示例(亲测能用)
下一篇: jQuery所有版本及其CDN引用地址[实时更新]
文章来自: jQuery插件库
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 1744
发表评论
请登录后再发表评论！