Author: | blakewilson |
---|---|
Views Total: | 1,306 views |
Official Page: | Go to website |
Last Update: | April 13, 2021 |
License: | MIT |
Preview:

Description:
vidbg.js is a Vanilla JavaScript library which allows an HTML5 video to be used as the background of an element. With fallback image & background overlay support.
This library is the vanilla JavaScript version of the jQuery vidbg.js plugin.
How to use it:
1. Import the required JavaScript and CSS files into the document.
# NPM $ npm i vidbg.js
import vidbg from "vidbg.js";
<link href="dist/vidbg.css" rel="stylesheet"> <script src="dist/vidbg.js"></script>
2. Create a new vidbg instance, specify the target container element and define the path to the HTML5 video as follows:
<section class="example"> </section>
var instance = new vidbg('.example', { mp4: 'media/mp4_video.mp4', webm: 'media/webm_video.webm', poster: 'media/fallback.jpg' })
3. Apply an overlay to the video background.
var instance = new vidbg('.example', { overlay: true, overlayColor: '#03A9F4', overlayAlpha: 0.8 })
4. The default attributes for the HTML5 <video> element.
const defaultAttributes = { autoplay: true, controls: false, loop: true, muted: true, playsInline: true }
5. API methods.
// resize the video background instance.resize(); // play the video instance.playVideo(); // pause the video instance.pauseVideo(); // get the playing state instance.isVideoPlaying(); // remove the video instance.removeVideo(); // remove the video background instance.destroy();
Changelog:
v2.1.0 (04/13/2020)
- rewritten the project in TypeScript
- Added tests
- Added new methods to the script: playVideo(), pauseVideo(), isVideoPlaying(), and getEl()
v2.0.1 (04/07/2020)
- Fix autoplay issue in Safari.
- Autoplay attribute was removed. Auto play not relies fully on the playPromise.
- Better error handling.