一个简单的以视频作为网页背景的jQuery 插件

￡神魔★判官ぃ 2022-02-20 11:11 226阅读 0赞

> 一个简单的以视频作为网页背景的jQuery 插件

### 浏览器支持 ###

*  现代浏览器全部支持
 *  IE9+

### 效果演示地址 ###

*  作为body背景

演示地址1：[http://weber.pub/demo/160905/body-bg.html][http_weber.pub_demo_160905_body-bg.html]

*  作为一块区域背景

演示地址2：[http://weber.pub/demo/160905/block-bg.html][http_weber.pub_demo_160905_block-bg.html]

### 下载 ###

*  直接下载

[github 地址：https://github.com/VodkaBears/Vide][github _https_github.com_VodkaBears_Vide]

*  Bower 安装

bower install vide

### 使用 ###

#### 1、引入文件 ####

*依赖 jQuery*

#### 2、准备视频 ####

准备视频格式可以是 .webm / .mp4 等浏览器支持的视频格式，最好多准备一张静态的图片。

path/
    ├── src/
    │   ├── video.mp4
    │   ├── video.ogv
    │   ├── video.webm
    │   └── video.jpg

#### 3、使用 ####

添加一个 data-vide-bg 的属性用来引入视频

data-vide-options 属性是配置文件（配置项后面会介绍）

你也可以设置扩展路径

下面是一段可以帮助我们调试的代码

$('#myBlock').vide('path/to/video');
    $('#myBlock').vide('path/to/video', {
    ...options...
    });
    $('#myBlock').vide({
      mp4: path/to/video1,
      webm: path/to/video2,
      ogv: path/to/video3,
      poster: path/to/poster
    }, {
    ...options...
    });
    $('#myBlock').vide('extended path as a string', 'options as a string');

#### 4、配置 ####

下面是所有的配置项和初始化值

{
      volume: 1,
      playbackRate: 1,
      muted: true,
      loop: true,
      autoplay: true,
      position: '50% 50%', // 类似于CSS的背景位置属性
      posterType: 'detect', // 静态图片类型 "detect" — 自动检测; "none" — 没有静态图; "jpg", "png", "gif",... - 扩展类型
      resizing: true, // 自动改变大小, read: https://github.com/VodkaBears/Vide#resizing
      bgColor: 'transparent', // 背景颜色,
      className: '' // 给Vide的div添加class
    }

#### 5、方法列表 ####

// 获取插件实例
    var instance = $('#yourElement').data('vide');
    
    // 获取视频元素的背景颜色
    instance.getVideoObject();
    
    // 调整视频背景大小
    // 随着窗口改变自动调整大小
    instance.resize();
    
    // 销毁插件
    instance.destroy();

### 结尾 ###

[github 地址：https://github.com/VodkaBears/Vide][github _https_github.com_VodkaBears_Vide]

by [Weber.pub][]

> 本文地址：[http://weber.pub/以视频作为网页背景的jQuery插件/176.html][Weber.pub]

[http_weber.pub_demo_160905_body-bg.html]: http://weber.pub/demo/160905/body-bg.html
[http_weber.pub_demo_160905_block-bg.html]: http://weber.pub/demo/160905/block-bg.html
[github _https_github.com_VodkaBears_Vide]: https://github.com/VodkaBears/Vide
[Weber.pub]: http://weber.pub/