Vide- 簡單好用的 jQuery 影片背景播放套件

2023-01-26 09:48:05

Vide 是一個簡單好用的 jQuery 影片背景播放套件，可以參考此 Demo

只要讀入後透過 data 屬性設定即可：

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

或是使用 jQuery 設定

$('#myBlock').vide('path/to/video', {
...options...
});

option 可以設定的值為以下：

{
  volume: 1,
  playbackRate: 1,
  muted: true,
  loop: true,
  autoplay: true,
  position: '50% 50%', // Similar to the CSS `background-position` property.
  posterType: 'detect', // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
  resizing: true, // Auto-resizing, read: https://github.com/VodkaBears/Vide#resizing
  bgColor: 'transparent', // Allow custom background-color for Vide div,
  className: '' // Add custom CSS class to Vide div
}

更多的使用方法及設定可以參考官方的文件說明。