頁面特效 UI組件庫 菜單導航 窗口特效 幻燈片滑動 圖像相冊 表單 選項卡 表格 評分星級 手風琴 文本鏈接 布局 日歷 顏色選擇器 按鈕 圖表 html5 提示 ExtJS 在線客服 其他特效 地圖 樹形控件 移動開發 BootStrap 滑動條 文件上傳 表單驗證 分頁 播放器 Angular

以視頻作為網頁背景的jQuery插件Vide

其他特效 HTML我幫您 1年前  次瀏覽

一個簡單的以視頻作為網頁背景的jQuery插件Vide,支持全部現代瀏覽器

以視頻作為網頁背景的jQuery插件Vide

瀏覽器支持

  • 現代瀏覽器全部支持
  • IE9+

  • 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(); 

相關鏈接

發表評論

腾讯彩票兑奖