jQueryプラグインのページの背景として、簡単なビデオ
ブラウザのサポート
すべての最新ブラウザのサポート
IE9 +
デモ住所
ボディの背景として、
デモ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 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、
導入するのに使用されるデータを見よ-BGビデオ属性を追加します。
データ見よ-オプションは、属性プロファイルです(設定項目は、後で紹介します)
<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
この記事のアドレス:http://weber.pub/ jQueryプラグインページの背景/176.htmlとしてビデオへ
:この記事はで再現された猿2048 ページの背景jQueryのプラグインとして簡単なビデオ