Lightweight Background Video Library – vidim

Category: Javascript | May 15, 2023
Author:OriginalEXE
Views Total:178 views
Official Page:Go to website
Last Update:May 15, 2023
License:MIT

Preview:

Lightweight Background Video Library – vidim

Description:

A simple JavaScript library that allows you to embed self-hosted or YouTube videos as backgrounds into any container.

It gives you full control over your background videos, like aspect ratio, autoplay, looping, poster display, sound, and more.

How to use it:

1. Install and import the vidim library.

# Yarn
$ yarn add vidim
# NPM
$ npm i vidim
<script src="dist/vidim.min.js"></script>

2. Create a new vidim instance and attach a background video to the container you specify.

<div class="example" id="demo"></div>
// Youtube Video
var demo = new vidim( '#demo', {
    src: 'https://www.youtube.com/watch?v=ScxPABG7QJk',
    type: 'YouTube',
});
// HTML5 Video
var demo = new vidim( '#demo', {
    src: [{
      type: 'video/mp4',
      src: '1.mp4'
    },{
      type: 'video/ogv',
      src: '1.ogv'
    }],
    poster: 'poster.jpg'
});

3. Available options to customize the background video.

var demo = new vidim( '#demo', {
    wrapperClass: '',
    overlayClass: '',
    src: false,
    type: 'HTML5',
    ratio: 1.7778,
    autoplay: true,
    loop: true,
    poster: '',
    showPosterBeforePlay: true,
    showPosterOnEnd: false,
    showPosterOnPause: false,
    zIndex: 0,
    autoResize: true,
    muted: true,
    startAt: 0,
    onReady: false
});

4. You can also initialize and config the vidim via HTML data attributes:

<div class="example" data-vidim="{ src: [{ type: 'video/mp4', src: '1.mp4'}]}"></div>

5. API methods.

demo.play()
demo.pause()
demo.setVolume( volume )
demo.getVolume()
demo.mute()
demo.unMute()
demo.setTime( time )
demo.getTime()
demo.getDuration()
demo.showPoster()
demo.changeSource( newSource, newPoster (optional) )
demo.destroy()
demo.resize()

6. Event handlers.

demo
.on("ready", function(){
  // do something
})
.on("play", function(){
  // do something
})
.on("end", function(){
  // do something
})
.on("destroy", function(){
  // do something
})
.on("resize", function(){
  // do something
})
.on("canplay", function(){
  // do something
})
.on("canplaythrough", function(){
  // do something
})
.on("buffering", function(){
  // do something
})

You Might Be Interested In:


Leave a Reply