VideoJs Video Wall Demo

See the demos below for different Mods of the Videowall.

Include files 

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

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

    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
    <script src="video-wall.js"></script>

Playlist Mode

Quick Start.


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

Carousel Mode

Quick Start.



   $ ( '#my-video' ).idowsvideowall ( {
    wallType : 'carousel',
    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.



$ ( '#my-video-2' ).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'
        },]
} );