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' },] } );