Dynamic Video Carousel Plugin For Video.js - Video Wall
File Size: | 22 KB |
---|---|
Views Total: | 7533 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.