vidbg.js 是一個簡單好用的網頁背景影片播放套件，根據以下的說明就可以來使用。
透過 npm 安裝
npm install vidbg.js
或是使用 cdn
<!-- <head> -->
<link href="dist/vidbg.css" rel="stylesheet" type="text/css" />
<!-- End of <body> -->
<script src="dist/vidbg.js"></script>
如果是使用 module 可以用以下方法 import
import vidbg from "vidbg.js";
初始化：
var instance = new vidbg(selector, options, attributes);
範例：
var instance = new vidbg(
".vidbg-box",
{
mp4: "http://example.com/video.mp4", // URL or relative path to MP4 video
webm: "path/to/video.webm", // URL or relative path to webm video
poster: "path/to/fallback.jpg", // URL or relative path to fallback image
overlay: false, // Boolean to display the overlay or not
overlayColor: "#000", // The overlay color as a HEX
overlayAlpha: 0.3, // The overlay alpha. Think of this as the last integer in RGBA()
},
{
// Attributes
}
);
Options
const defaultOptions = {
mp4: null,
webm: null,
poster: null,
overlay: false,
overlayColor: "#000",
overlayAlpha: 0.3,
};
Attributes
const defaultAttributes = {
autoplay: true,
controls: false,
loop: true,
muted: true,
playsInline: true,
};
Method
// First, create the vidbg.js instance.
var instance = new vidbg(".vidbg-box", {
mp4: "http://example.com/video.mp4",
webm: "path/to/video.webm",
poster: "path/to/fallback.jpg",
});
// Manually resize the video background
instance.resize();
// Manually play the video
instance.playVideo();
// Manually pause the video
instance.pauseVideo();
// Get the video playing state
instance.isVideoPlaying();
// Remove the video element
instance.removeVideo();
// Completely remove the video background
instance.destroy();
![[jQuerry Plugin] 好用的響應式 3D cover flow 套件- flipster](/assets/upload/1647747465128_0.jpg)
![[CodeIgniter 4] 使用 CSRF 保護資料的傳遞，並說明搭配 axios/AJAX 的呼叫方法](/assets/upload/1598766168885_0.jpg)
