Dynamic Video Carousel Plugin For Video.js - Video Wall

Video Wall is a fancy jQuery plugin for the familiar Video.js library that lets you create a dynamic HTML5 video carousel with thumbnail and playlist support.

How to use it:

1. Include the needed video.js, jQuery, Font Awesome and MustacheJS files on the html page.

<link href="/path/to/video-js.css" rel="stylesheet">
<link href="/path/to/font-awesome.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/video.js"></script>
<script src="/path/to/mustache.min.js"></script>

2. Include the jQuery Video Wall plugin's file.

<link href="video-wall.css" rel="stylesheet">
<script src="video-wall.js"></script>

3. Embed the first video into the webpage.

<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="500" height="500"
     data-setup="{}" poster="cover.png">
  <source src="1.mp4" type='video/mp4'>
  <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  </p>
</video>

4. Initialize the plugin and insert your videos to the carousel as these.

$ ( '#my-video' ).idowsvideowall ( {
  videos : [{
    src : '1.mp4',
    poster : 'cover1.png',
    mime : 'video/mp4',
    title : 'Video 1'
  },{
    src : '2.mp4',
    poster : 'cover2.png',
    mime : 'video/mp4',
    title : 'Video 2'
  },{
    src : '3.mp4',
    poster : 'cover3.png',
    mime : 'video/mp4',
    title : 'Video 3'
  }]
} );

5. All possible options to customize the plugin.

• wallOptions: carousel, thumb, playlist
• slideshow: true,false depending on the video wall mode you selected to load
• slideshowDelay: slideshow delay
• videoWallId: id of the video-wall container
• videoWallContainer: class for the video wall container
• containerId: slides container id
• containerClass: slides container class
• helpImproveVideoJS: default : false,
• thumbPageSize: default pagesize for thumbnail view
• playlistPageSize: total playlist on a single page for playlist mode 
• videos: videos list in the playlist to be loaded in the playlist mode 
• playlist: playlists for loading in the playlist mode 
• loadSelectAssets: to load the select2 assets internally by plugin or manual use false to load your own version
• loadBootstrapAssets: to load bootstrap assets internally by plugin itself, use false to provide your own files
• bootstrapCssSource: source to be loaded by the plugin internally for the bootstrap css, you can provide you own custom version.
• bootstrapJsSource: source to be loaded by the plugin internally for the bootstrap js, you can provide you own custom version.
• select2CssSource: source to be loaded by the plugin internally for the select2 plugin css, you can provide you own custom version.
• select2JsSource: source to be loaded by the plugin internally for the select2 plugin javascript, you can provide you own custom version.
• openOnStart: if the plugin should start with the wall opened
• callback: the callback function to be called after the plugin has loaded completely 

$ ( '#my-video' ).idowsvideowall ( {
  wallOptions: 'carousel', //slide,thumb,playlist
  slideshowDelay: 2000, // slideshow delay
  videoWallId: "video-wall", //id of the video-wall container
  videoWallContainer: 'video-wall-container', // class for the video wall container
  containerId: 'video-wall-slides', //slides container id
  containerClass: "slides-container", // slides container class
  helpImproveVideoJS: false,
  thumbPageSize: 15,
  playlistPageSize: 8,
  videos: [],
  playlists: [],
  loadSelectAssets: true,
  loadBootstrapAssets: true,
  bootstrapCssSource: '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
  bootstrapJsSource: '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js',
  select2CssSource: '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css',
  select2JsSource: '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js',
  openOnStart: true,
  callback: () => {},
} );

---

This awesome jQuery plugin is developed by buttflattery. For more Advanced Usages, please check the demo page or visit the official website.