【jQuery】HTML5ビデオを背景にできるjQueryプラグインVidbg

jQuery

March 9, 2017

TAGS:
jQuery

VidbgはHTML5ビデオを背景にできるjQueryプラグイン。

Demo

Instructions

script src="vidbg.min.js" /scriptプロジェクトに組み込みます。

Initializing the Script

スクリプトを初期化するには2つの方法があります。
Initialized from HTML

<div class="vidbg-box" style="width: 650px; height: 338px;"
  data-vidbg-bg="mp4: http://example.com/video.mp4, webm: path/to/video.webm, poster: path/to/poster.jpg"
  data-vidbg-options="loop: true, muted: true, overlay: true, overlayColor: #000, overlayAlpha: 0.3">
</div>

Initialized from Javascript

$('.vidbg-box').vidbg({
  'mp4': 'http://example.com/video.mp4',
  'webm': 'path/to/video.webm',
  'poster': 'path/to/fallback-image.png',
}, {
  // options
});

Options

{
  volume: 1,
  playbackRate: 1,
  muted: true,
  loop: true,
  position: '50% 50%',
  resizing: true,
  overlay: false,
  overlayColor: '#000',
  overlayAlpha: '0.3',
}