Fullscreen Background Slideshow Video With – BigVideo.js

BigVideo.js
File Size:22675.23 KB
Views Total:305
Last Update:January 1, 2018
Publish Date:December 27, 2017
Official Website:Go to website
License:MIT

A jQuery plugin that helps to make the fill with fill background video slideshow on the web page or any series or any of the video presentation that is used as a player to create a video show playlist is known as BigVideo.js.

Features:

  • Play silent ambient background video (or series of videos)
  • Show video playlist
  • Show big background images

How to use :

1. Include necessary java script files :

<!-- BigVideo Dependencies -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="js/jquery.imagesloaded.min.js"></script>
<script src="http://vjs.zencdn.net/c/video.js"></script>

<!-- BigVideo -->
<script src="js/bigvideo.js"></script>

<!-- Tutorial Demo -->
<script src="js/jquery.transit.min.js"></script>

2. Include Html file :

<header>
    <h1>Fullscreen Video Slideshow <span>with BigVideo.js</span></h1>
    <p>The videos in this demo are from <a href="http://beachfrontprod.blogspot.com" target="_blank">Beachfront B-Roll</a>, a great place to download unique HD stock video footage and animated backgrounds for any production purpose (for free!).</p>
    <p><small>A demo for</small> <a href="http://dfcb.github.com/BigVideo.js/" target="_blank">BigVideo.js</a> <small>by <a href="http://twitter.com/johnpolacek" target="_blank" rel="author">@johnpolacek</a></small></p>
</header>

<div class="wrapper">
    <div class="screen" id="screen-1" data-video="vid/bird.mp4">
        <img src="img/bird.jpg" class="big-image" />
        <h1 class="video-title">#1 Bird</h1>
    </div>
    <div class="screen" id="screen-2" data-video="vid/satellite.mp4">
        <img src="img/satellite.jpg" class="big-image" />
        <h1 class="video-title">#2 Satellite</h1>
    </div>
    <div class="screen" id="screen-3" data-video="vid/camera.mp4">
        <img src="img/camera.jpg" class="big-image" />
        <h1 class="video-title">#3 Camera</h1>
    </div>
    <div class="screen" id="screen-4" data-video="vid/spider.mp4">
        <img src="img/spider.jpg" class="big-image" />
        <h1 class="video-title">#4 Spider</h1>
    </div>
    <div class="screen" id="screen-5" data-video="vid/dandelion.mp4">
        <img src="img/dandelion.jpg" class="big-image" />
        <h1 class="video-title">#5 Dandelion</h1>
    </div>
</div>

<nav id="next-btn">
    <a href="#" class="next-icon"></a>
</nav>

3. Before we get to the video, let’s set up navigation :

$(function() {
    var screenIndex = 1,
    numScreens = $('.screen').length,
    isTransitioning = false,
    transitionDur = 1000;
}

4. Options and defaults :

// If you want to use a single mp4 source, set as true
useFlashForFirefox:true,
// If you are doing a playlist, the video won't play the first time
// on a touchscreen unless the play event is attached to a user click
forceAutoplay:false,
controls:false,
doLoop:false,
container:$('body'),
shrinkable:false

Done 🙂

 

Change Log

2015-03-05

  • Fixed: .vjs-big-play-button selector is bad solution

2015-01-09

  • assign bigvideo object to empty object instead of jquery global

2014-08-25

  • fix #142 use outerwidth/height for containers with padding

2014-08-04

  • fix video frame larger than viewport when container is larger than the window

2014-07-31

  • set autoplay click target to container

2014-03-28

  • bug fixes.

2014-03-27

  • update to v1.0.8

2014-03-05

  • fix height resizing bug.

2014-02-17

  • fix chrome height bug.