Create Your Own Video Playlist / Carousel / Slider using jQuery VIDEOJS VideoWall by IDOWS

Video Wall is a cool jQuery plugin based Video.js library that lets you create a dynamic HTML5 video carousel/playlist for your videos with thumbnail support. 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.

Create Your Own Video Playlist / Carousel / Slider using jQuery VIDEOJS VideoWall by IDOWS

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


Libraries

Include the following libraries on page where you want to display video gallery/playlist.

//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>



JS

There are three mod in this library and you can choose any as per project need. Simply choose your desired mode and paste the relevant script provided

Carousel Mode (Default)

$ ( '#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

$ ( '#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

$ ( "#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'
                }]
        } ]
    });

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.