一個簡單的以視訊作為網頁背景的jQuery 外掛

canglingyue發表於2019-02-16
網頁jQuery

一個簡單的以視訊作為網頁背景的jQuery 外掛

瀏覽器支援

  • 現代瀏覽器全部支援

  • IE9+

效果演示地址

  • 作為body背景

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

  • 作為一塊區域背景

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

下載

  • 直接下載

github 地址：https://github.com/VodkaBears/Vide

  • Bower 安裝

bower install vide

使用

1、引入檔案

依賴 jQuery

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

2、準備視訊

準備視訊格式可以是 .webm / .mp4 等瀏覽器支援的視訊格式，最好多準備一張靜態的圖片。

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

3、使用

新增一個 data-vide-bg 的屬性用來引入視訊

data-vide-options 屬性是配置檔案（配置項後面會介紹）

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

你也可以設定擴充套件路徑

<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>

下面是一段可以幫助我們除錯的程式碼

$(`#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

by Weber.pub

本文地址：http://weber.pub/以視訊作為網頁背景的jQuery外掛/176.html

相關文章