vidbg.js- 簡單好用的網頁背景影片播放套件

2023-01-28 10:29:11

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

課程推薦