https://github.com/buttflattery/idows-videojs-videowall
video wall plugin with 3 different view modes to be used with VideoJs player.
https://github.com/buttflattery/idows-videojs-videowall
carousel javascript jquery-plugin playlist sizes-player video-files video-player video-wall video-wall-plugin videojs videojs-player videojs-plugin videojs-videowall
Last synced: 2 months ago
JSON representation
video wall plugin with 3 different view modes to be used with VideoJs player.
- Host: GitHub
- URL: https://github.com/buttflattery/idows-videojs-videowall
- Owner: buttflattery
- License: mit
- Created: 2018-01-27T00:02:02.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-03-07T12:03:43.000Z (about 5 years ago)
- Last Synced: 2025-03-18T14:53:48.355Z (3 months ago)
- Topics: carousel, javascript, jquery-plugin, playlist, sizes-player, video-files, video-player, video-wall, video-wall-plugin, videojs, videojs-player, videojs-plugin, videojs-videowall
- Language: JavaScript
- Homepage: http://plugins.idowstech.com/site/demovideowall
- Size: 45.9 KB
- Stars: 20
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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 ###
* [VideoJs](http://videojs.com/) Library
* [MustacheJS](https://github.com/janl/mustache.js/) for Templating
* [jQuery v2.2.4](https://jquery.com/download/)
* Fontawesome
* [Select2 v4.0.5](https://select2.org/)
* [Bootstrap v3.3.7](https://getbootstrap.com/docs/3.3/)
# Demo #
https://plugins.omaraslam.com/site/demovideowall
# Integration #
[Yii2 Framework Extension yii2-videowall](https://github.com/buttflattery/yii2-videowall)
# 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 ##
```html
//video js css file if not added yet
//videowall css file
//fontawesome for icons
//google font Roboto
//jquery library
//video js library if not inluded
//MustacheJs library required for `Playlist` mode
//idows videowall plugin
```
* ## HTML ##
```HTML
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
```
* ## JAVASCRIPT ##
Then choose your desired mode and paste the relevant script provided
## 1. Carousel Mode (Default) ##
### Quick Start Code ###
```javascript
$ ( '#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 ##
### Quick Start Code ###
```javascript
$ ( '#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 ##
### Quick Start Code ###
```javascript
$ ( "#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](http://tinyii.my/site/videowalldemo) 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](http://tinyii.my/site/videowalldemo) 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? ###
* [email protected]
* [Muhammad Omer Aslam](https://www.facebook.com/omer.aslam)
* [email protected]