Version 1.0
A jquery plugin that creates a Video Wall for VIDEOJS video player using three different modes.
- Carousel (Default)
- Thumbnail
- Playlist
- VideoJs Library
- MustacheJS for Templating
- jQuery v2.2.4
- Fontawesome
- Select2 v4.0.5
- Bootstrap v3.3.7
https://plugins.omaraslam.com/site/demovideowall
Yii2 Framework Extension yii2-videowall
The plugin features 3 modes to use for your video files with VideoJS
-
Carousel (Default)
-
Thumbnail
-
Playlist
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.
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
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.
//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><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>Then choose your desired mode and paste the relevant script provided
$ ( '#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'
}]
} );
$ ( '#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'
},]
} );
$ ( "#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'
}]
} ]
}); | 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. |
| 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 fileposter: (string) , the poster of the video file playing.src: (string) ,the path to video file sourcetitle: (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 fileposter: (string) , the poster of the video file playing.src: (string) ,the path to video file sourcetitle: (string), the title of the video file |