Lightweight Background Video Library – vidim

Preview:

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
})