A simple video as a jQuery plugin page background

A simple video as a jQuery plugin page background

Browser support

All modern browsers support
IE9 +

The demo Address

As the body background

Demo 1: http://weber.pub/demo/160905/body-bg.html

As a regional context

Demo 2: http://weber.pub/demo/160905/block-bg.html

download

Download

github address: https: //github.com/VodkaBears/Vide

Bower installation

bower install vide

use

1, import documents

Dependence jQuery

<script src="js/jquery.vide.min.js"></script>

2, ready video

Ready video format can be .webm / .mp4 and other browsers support the video format, it's best to prepare a static picture.

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

3, using

Add a data-vide-bg video attribute used to introduce

data-vide-options are attribute profile (configuration items will be introduced later)

<div style="width: 1000px; height: 500px;"
  data-vide-bg="path/src/video" data-vide-options="loop: false, muted: false, position: 0% 0%">
</div>

You can also set the growth path

<div style="width: 1000px; height: 500px;"
  data-vide-bg="mp4: path/to/video1, webm: path/to/video2, ogv: path/to/video3, poster: path/to/poster"
  data-vide-options="posterType: jpg, loop: false, muted: false, position: 0% 0%">
</div>

Here is a code that can help us debug

$('#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, Configuration

Here are all the configuration items and initialization value

{
  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, the list of methods

// 获取插件实例
var instance = $('#yourElement').data('vide');

// 获取视频元素的背景颜色
instance.getVideoObject();

// 调整视频背景大小
// 随着窗口改变自动调整大小
instance.resize();

// 销毁插件
instance.destroy();

end

github address: https: //github.com/VodkaBears/Vide

by Weber.pub

This article addresses: http://weber.pub/ to video as a jQuery plugin page background /176.html

This article is reproduced in: Ape 2048 A simple video as the page background jQuery plugin