🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL
  1. Home
  2. jQuery Plugins
  3. jQuery Video Wall for VideoJs

jQuery Video Wall for VideoJs

The Video wall plugin takes the video tag used by the VideoJS plugin and automatically adjusts its size according to the dimensions of the video player, so you need to be decide which mode will work best for you.A jquery plugin that creates a Video Wall for VIDEOJS video player using three different modes.Carousel (Default)ThumbnailPlaylist

Carousel Plugins Video_Audio
Demo Download Tutorial

Documentation

VIDEOJS VideoWall by IDOWS

Version 1.0

What is this repository for?

A jquery plugin that creates a Video Wall for VIDEOJS video player using three different modes.

  • Carousel (Default)
  • Thumbnail
  • Playlist

External Libraries Used

Demo

https://plugins.idowstech.com/site/demovideowall

Features

The plugin features 3 modes to use for your video files with VideoJS

  • Carousel (Default)

  • Thumbnail

  • Playlist

Start using with minimum effort

You can provide the list of videos/playlists to the plugin and thats it all will be done by the plugin itself it gives you ease to manange your video files with VideoJS player.

Select the Right Mode for you

The Video wall plugin takes the video tag used by the VideoJS plugin and automatically adjusts its size according to the dimensions of the video player, so you need to be decide which mode will work best for you.

Each mode has its own usage the carousel mode can be used for all sizes player small, medium and large. But if you are limited to use small sized video player on your site then you must use carousel mode.

If you intend to use rather medium sized player or large sized you can use thumb mode as it would provide you with the ability to filter and play the videos using the popular Select2 dropdown just type the name and hit Enter the video will start playing.

And if you are using VideoJs to manage and present your videos in form of playlists playlist mode is the right mode to use for you. This mode is only used for playlists and it is not recommended for small OR Medium size player

Keyboard Support

You can navigate between the slides in all 3 modes using your left <- and right -> keyboard buttons. More over you can use the scroll up and down to navigate between the video slides too if you dont feel like moving to the keyboard and want to stick with the mouse.

How do I get set up?

  • LIBRARIES

    //video js css file if not added yet     <link href="http://vjs.zencdn.net/6.2.8/video-js.css" rel="stylesheet">      //videowall css file     <link href="video-wall.css" rel="stylesheet">      //fontawesome for icons     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">      //google font Roboto     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">      //jquery library     <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>     //video js library if not inluded     <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>     <script src="http://vjs.zencdn.net/6.2.8/video.js"></script>     //MustacheJs library required for `Playlist` mode     <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>     //idows videowall plugin     <script src="video-wall.js"></script>

  • HTML

<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="500" height="500"                     data-setup="{}" poster="video-uploads/posters/1.jpg">     <source src="video-uploads/jaan-jatti.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>

  • JAVASCRIPT

Then choose your desired mode and paste the relevant script provided

1. Carousel Mode (Default)

delete-single-files

Quick Start Code

    $ ( '#video-js-video-tag-id' ).idowsVideowall ( {     videos : [{             src : '/images/video-wall/sample1.mp4',             poster : '/images/video-wall/posters/sample1.png',             mime : 'video/mp4',             title : 'Circus Video Custom '         }, {             src : '/images/video-wall/sample2.mp4',             poster : '/images/video-wall/posters/sample2.png',             mime : 'video/mp4',             title : 'Deep Space Star Acts'         }, {             src : '/images/video-wall/sample3.mp4',             poster : '/images/video-wall/posters/sample3.png',             mime : 'video/mp4',             title : 'Dolby Digital Intro'         }, {             src : '/images/video-wall/sample3.mp4',             poster : '/images/video-wall/posters/sample3.png',             mime : 'video/mp4',             title : 'Dolby Digital Intro'         }]     } );

Thumbnail Mode

delete-single-files

Quick Start Code

    $ ( '#video-js-video-tag-id' ).idowsVideowall ( {     wallType : 'thumb',     videos : [{             src : '/images/video-wall/sample1.mp4',             poster : '/images/video-wall/posters/sample1.png',             mime : 'video/mp4',             title : 'Circus Video Custom '         }, {             src : '/images/video-wall/sample2.mp4',             poster : '/images/video-wall/posters/sample2.png',             mime : 'video/mp4',             title : 'Deep Space Star Acts'         }, {             src : '/images/video-wall/sample3.mp4',             poster : '/images/video-wall/posters/sample3.png',             mime : 'video/mp4',             title : 'Dolby Digital Intro'         }, {             src : '/images/video-wall/sample4.mp4',             poster : '/images/video-wall/posters/sample4.png',             mime : 'video/mp4',             title : 'Toy Helicopter Demo'         },]     } );

Playlist Mode

delete-single-files

Quick Start Code

    $ ( "#video-js-video-tag-id" ).idowsVideowall ( {         wallType : 'playlist',         playlists : [{             name : 'Sweet Sexy Savage',             cover : '/images/video-wall/posters/playlist-1.jpg',             videos : [{                     src : '/images/video-wall/sample1.mp4',                     poster : '/images/video-wall/posters/sample1.png',                     mime : 'video/mp4',                     title : 'Circus Juggler Video'                 }, {                     src : '/images/video-wall/sample2.mp4',                     poster : '/images/video-wall/posters/sample2.png',                     mime : 'video/mp4',                     title : 'Deep Space Star Acts'                 }, {                     src : '/images/video-wall/sample3.mp4',                     poster : '/images/video-wall/posters/sample3.png',                     mime : 'video/mp4',                     title : 'Dolby Digital Intro'                 }, {                     src : '/images/video-wall/sample4.mp4',                     poster : '/images/video-wall/posters/sample4.png',                     mime : 'video/mp4',                     title : 'Toy Helicopter Demo'                 }, {                     src : '/images/video-wall/sample4.mp4',                     poster : '/images/video-wall/posters/sample4.png',                     mime : 'video/mp4',                     title : 'Toy Helicopter Demo'                 }]         } ]     });

Options

Option Name Type Values Description
wallType string carousel (default), thumb, playlist Selects which type of videowall mode you want
videoWallId string video-wall (default) id of the video-wall container
videoWallContainer string video-wall-container (default) css class for the video wall container
containerId string video-wall-slides (default) id for the slides container
containerClass string slides-container (default) css class for slides container
helpImproveVideoJS boolean true, false (default) VideoJS Option to collect information
thumbPageSize int 15 (default) Default page size for the thumbnails in thumb mode
playlistPageSize int 8 (default) Default page size for the playlists in playlist mode
videos JSON Array [{
src:'path/to/your/video/file',
poster:'path/to/poster/image',
mime:'video/mp4' (or any other you are using),
title:'Video Title'
}]		 Used in thumb or carousel mode. You have to pass an array of objects or a JSON Array having all the video files information. See Demo for example code.
playlists JSON Array [{
name:'Playlist Name',
cover:'path/to/playlist/cover/image',
videos:[{src:'',poster:'',mime:'',title:''}],
},]		 Used in playlist mode for initializing the playlists. The attributes passed for each playlist file in form of JSONArray. Each playlist contains video Array which contains the list of videos associated to that playlist. The properties of this array are identical to the video array passed in carousel and thumb mode.See Demo for example code.
loadSelectAssets boolean true (default), false Whether the Select2 v4.0.5 assets should be loaded internally by the plugin or manually by the user. The select2 is used in the thumb mode to search and play the video files available in the video wall. if you use false then none of the assets(JS or CSS) would be loaded, you would have to include them yourself.
loadBootstrapAssets boolean true (default), false Whether the bootstrap v3.3.7 assets should be loaded internally by the plugin or manually by the user. If you use false then none of the assets(JS or CSS) would be loaded, you would have to include them yourself.
select2CssSource string url //cdnjs url to select2.min.css Source for the Select2 CSS assets. You can specify your own CDN version if you like or if you want to use local resources.
select2JsSource string url //cdnjs url to select2.full.min.js Source for the Select2 JS assets. You can specify your own CDN version if you like or if you want to use local resources.
bootstrapCssSource string url //maxcdn url to bootstrap.min.css Source for the Bootstrap CSS assets. You can specify your own CDN version if you like or if you want to use local resources.
bootstrapJsSource string url //maxcdn url to bootstrap.min.js Source for the Bootstrap JS assets. You can specify your own CDN version if you like or if you want to use local resources.
openOnStart boolean true(default), false Whether to start the video wall minimized or open when the page loads.

Events

Event Name Params Usage Description
callback null $('#id').idowsVideoWall({
callback:function(){
console.log('finished loading);
}
});		 A callback function that is triggered after the initialization of the plugin, called once/instance.
onBeforePlayback @param event,
@param data (Obj)
{
title,
mime,
player,
src
}		 $("#element-id").idowsVideowall(
{
wallType:'thumb'
}).on('onBeforePlayback',function(event,data)){
console.log(data)
};
or
var obj=$("#element-id").idowsVideowall();
obj.on('onBeforePlayback',function(event,data){
console.log(data);}
);		 This event is triggered right after you click play button and before the play back starts. This event is also triggered before starting a new video playback while the playlist is playing using Play All button.
onAfterPlayback @param event,
@param data (Obj)
{
title,
mime,
player,
src
}		 $("#element-id").idowsVideowall({
wallType:'thumb'
}).on('onAfterPlayback',function(event,data)){
console.log(data)
};
or
var obj=$("#element-id").idowsVideowall();
obj.on('onAfterPlayback',function(event,data){
console.log(data);}
);		 This event is triggered right after you click play button and after the play back has started. This event is also triggered after starting a new video playback while the playlist is playing using Play All button.
onBeforeNext @param event,
@param data(Obj)
{
nextSlide,
currentSlide
}		 $("#element-id").idowsVideowall({
wallType:'thumb'
}).on('onBeforeNext',function(event,data)){
console.log(data.nextSlide,data.currentSlide)
};
or
var obj=$("#element-id").idowsVideowall();
obj.on('onBeforeNext',function(event,data){
console.log(data);}
);		 This event is triggered right after you click next button and before the next slide is presented. This event is also triggered after you scroll-down while hovering over the video wall.
onAfterNext @param event ,
@param data(Obj)
{
previousSlide,
currentSlide
}		 $("#element-id").idowsVideowall({
wallType:'thumb'
}).on('onAfterNext',function(event,data)){
console.log(data.previousSlide,data.currentSlide)
};
or
var obj=$("#element-id").idowsVideowall();
obj.on('onAfterNext',function(event,data){
console.log(data);}
);		 This event is triggered right after you click next button and after the next slide is presented. This event is also triggered after you scroll-down while hovering over the video wall and after the next slide is presented.
onBeforePrev @param event ,
@param data(Obj)
{
nextSlide,
currentSlide
}		 $("#element-id").idowsVideowall({
wallType:'thumb'
}).on('onBeforePrev',function(event,data)){
console.log(data.nextSlide,data.currentSlide)
};
or
var obj=$("#element-id").idowsVideowall();
obj.on('onBeforePrev',function(event,data){
console.log(data);}
);		 This event is triggered right after you click previous or back arrow button and before the previous slide is presented. This event is also triggered after you scroll-up while hovering over the video wall and before the previous slide is presented.
onAfterPrev @param event ,
@param data(Obj)
{
currentSlide,
previousSlide
}		 $("#element-id").idowsVideowall({
wallType:'thumb'
}).on('onAfterPrev',function(event,data)){
console.log(data.previousSlide,data.currentSlide)
};
or
var obj=$("#element-id").idowsVideowall();
obj.on('onAfterPrev',function(event,data){
console.log(data);}
);		 This event is triggered right after you click previous or back arrow button and after the previous slide is presented. This event is also triggered after you scroll-up while hovering over the video wall and after the previous slide is presented.
onPlaylistStart @param event ,
@param data(Obj)
{
playlist[{
isActive:true/false,
mime:"video/mp4",
poster:"video-uploads/posters/1.jpg",
src:"video-uploads/jaan-jatti.mp4",
title:"Track 1"
}]
}		 $("#element-id").idowsVideowall({
wallType:'thumb'
}).on('onPlaylistStart',function(event,data)){
for(var i in data.playlist){
let video = data.playlist;
console.log(video[i].mime, video[i].title, video[i].isActive);}
};
or
var obj=$("#element-id").idowsVideowall();
obj.on('onPlaylistStart',function(event,data){
for (var i in data.playlist) {
let video = data.playlist;
console.log(video[i].mime, video[i].title, video[i].isActive);
}}
);		 This event is triggered right after you click Play All button and before the playback starts. It returns a javascript object of playlist which contains the list of the currently playing playlist videos. The object contains
isActive: (Boolean), identifies which file is currently playing.
mime: (Video MimeTypes), the mime type of the video file
poster: (string) , the poster of the video file playing.
src: (string) ,the path to video file source
title: (string), the title of the video file
onPlaylistEnd @param event ,
@param data(Obj)
{
playlist[{
isActive:true/false,
mime:"video/mp4",
poster:"video-uploads/posters/1.jpg",
src:"video-uploads/jaan-jatti.mp4",
title:"Track 1"
}]
}		 $("#element-id").idowsVideowall({
wallType:'thumb'
}).on('onPlaylistStart',function(event,data)){
for(var i in data.playlist){
let video = data.playlist;
console.log(video[i].mime, video[i].title, video[i].isActive);}
};
or
var obj=$("#element-id").idowsVideowall();
obj.on('onPlaylistStart',function(event,data){
for (var i in data.playlist) {
let video = data.playlist;
console.log(video[i].mime, video[i].title, video[i].isActive);
}}
);		 This event is triggered right after the playback ends. It returns a javascript object of playlist which contains the list of the recently played playlist videos. The object contains
isActive: (Boolean), identifies which file is currently playing.
mime: (Video MimeTypes), the mime type of the video file
poster: (string) , the poster of the video file playing.
src: (string) ,the path to video file source
title: (string), the title of the video file

Who do I talk to?

You May Also Like

Responsive Infinite Carousel jQuery Plugin - jQuery slippity

Customizable jQuery Slideshow/Carousel Plugin - sliders.js

Flexible and Customizable jQuery Image Slider Plugin - BeaverSlider

Responsive Infinite Loop Slider with jQuery - SimpleSlide

Minimal jQuery Responsive Infinite Carousel Plugin - t3u Carousel

Clean and Multi-Functional jQuery Gallery Plugin - kGallery

Clean & Multipurpose jQuery Image Carousel Plugin - Ublue

Simple Clean jQuery & CSS3 Carousel Slider Plugin - CSS Slider

Responsive & Touch-enabled jQuery Carousel Plugin - humbleSlider

Simple Fashion jQuery Image Slider Plugin

Easy Carousel Slider Plugin with jQuery - Open Carousel

Highly Customizable Carousel Plugin with jQuery and jQuery UI - rcarousel

Tiny jQuery Image Carousel with Fade Animation - Fader

Fancy Responsive jQuery & Html5 Image Carousel Plugin

Fully Customizable & Responsive jQuery Carousel Plugin - AdaptaSlider

Simple jQuery & jQuery Mobile Based Carousel Plugin - JQM-Carousel

Responsive & Modular Carousel / Slider Plugin For jQuery and Bootstrap 3 - Moodular

Basic jQuery Any Content Carousel Plugin - maxcarousel

Easy Clean jQuery Content Carousel Plugin - Chechu Carousel

Responsive & Scalable jQuery Slider Carousel Plugin - Skate

jQuery Image Slider with Adaptive Colored Image Captions - Adaptive Slider

jQuery & CSS3 Carousel Plugin with Content Flipping Effects - Flip Carousel

Lightweight jQuery Content Slider/Carousel Plugin - sliders

Basic jQuery Image Carousel/Slider Plugin

360 Degree Rotating Carousel with jQuery and CSS3 - rotataDiz

Basic jQuery Image Carousel Plugin

Basic jQuery Content Slider/Carousel Plugin - Simple Slider

Create A Fullscreen & Responsive Image Gallery with jQuery

Lightweight jQuery Responsive Carousel Plugin

Horizontally Scrollable Image Carousel Plugin with jQuery

Super Tiny Cross-fading Image Slideshow with jQuery and CSS3 - cslider

Lite Responsive jQuery Image Carousel Plugin - List Carousel

Full Width jQuery Image Carousel Plugin - foucs.js

Touch Enabled Slider Plugin For jQuery - iosSlider

3D Rotating Carousel Plugin with jQuery and CSS3 - Circular Carousel

Full Width Responsive Carousel with jQuery and Bootstrap 3

Simple Any Content Carousel Plugin For jQuery - a11ycarousel

Responsive Infinite Carousel with jQuery and CSS3

jQuery and Bootstrap Based Carousel with Image Annotations

Fullpage Responsive Carousel Plugin with jQuery - vertslider

Lightweight jQuery Web Gallery with Thumbnail Slider - Logos Gallery

Flexible and Robust jQuery Content Slider Plugin - ezContentSlider

Simple Flexible jQuery Slideshow Plugin - Neutrino

Super Easy jQuery Image Carousel Slider Plugin - Easy Slider

Basic Horizontal & Vertical Image Slider For jQuery - My Slider

Basic jQuery Image Scroller/Carousel Plugin - jScroll

Responsive & Auto-sliding jQuery Slideshow Plugin - ImgWheel

Basic Responsive jQuery Sliding Carousel Plugin - LMS Slideshow

Modern Resonsive Fullscreen Image Slider with jQuery and CSS3

Basic jQuery Any Content Slideshow Plugin - Carousel 2.0

Minimal Content Carousel Slider Plugin with jQuery and CSS3

jQuery Based Auto-fading Image Carousel Slider - jbslider

Stylish 3D Rotating Slideshow Plugin with jQuery and CSS3

Responsive Showcase Slider Plugin with jQuery and CSS3

Minimal 3D Perspective Carousel with jQuery and CSS3 - 3D Carousel

Beautiful & Powerful jQuery Image Carousel Plugin - Tonjoo

Fully Functional jQuery Image Carousel/Scroller Plugin - SimpleCarousel

Basic jQuery Content Carousel Slider with Tabbed Nav - jwgSlider

Basic Responsive jQuery Slideshow/Carousel Plugin - Slideshow

Basic jQuery Image Carousel Slider Plugin - kkSlider

Mobile-first jQuery Slideshow For HammerJS - hammerousel

Basic Full Width Slideshow Plugin with jQuery and jQuery UI

Minimal Responsive Image Carousel/Slider Plugin With jQuery - Simply Carousel

Responsive Full Width jQuery Carousel Plugin - Sleek Slider

Basic Auto- Fading/Sliding Slideshow Plugin For jQuery - jslide

Simple Flexible Content Carousel Plugin with jQuery

Simple Background Image Rotator/Carousel Plugin - SSlide

Responsive & Touch-Enabled jQuery Carousel/Slideshow Plugin - Slides

Simple jQuery Image Carousel with Cool CSS3 Animations - jlider

Flexible jQuery Image Slider/Scroller Plugin - xuSliders

jQuery Plugins

AngularJs Plugins