{"id":16317856,"url":"https://github.com/buttflattery/idows-videojs-videowall","last_synced_at":"2025-03-22T21:31:38.278Z","repository":{"id":68749088,"uuid":"119116457","full_name":"buttflattery/idows-videojs-videowall","owner":"buttflattery","description":"video wall plugin with 3 different view modes to be used with VideoJs player.","archived":false,"fork":false,"pushed_at":"2020-03-07T12:03:43.000Z","size":47,"stargazers_count":20,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T14:53:48.355Z","etag":null,"topics":["carousel","javascript","jquery-plugin","playlist","sizes-player","video-files","video-player","video-wall","video-wall-plugin","videojs","videojs-player","videojs-plugin","videojs-videowall"],"latest_commit_sha":null,"homepage":"http://plugins.idowstech.com/site/demovideowall","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/buttflattery.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-27T00:02:02.000Z","updated_at":"2023-04-07T19:55:17.000Z","dependencies_parsed_at":"2023-05-21T17:00:21.225Z","dependency_job_id":null,"html_url":"https://github.com/buttflattery/idows-videojs-videowall","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buttflattery%2Fidows-videojs-videowall","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buttflattery%2Fidows-videojs-videowall/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buttflattery%2Fidows-videojs-videowall/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buttflattery%2Fidows-videojs-videowall/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/buttflattery","download_url":"https://codeload.github.com/buttflattery/idows-videojs-videowall/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245022561,"owners_count":20548559,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carousel","javascript","jquery-plugin","playlist","sizes-player","video-files","video-player","video-wall","video-wall-plugin","videojs","videojs-player","videojs-plugin","videojs-videowall"],"created_at":"2024-10-10T22:09:25.750Z","updated_at":"2025-03-22T21:31:38.234Z","avatar_url":"https://github.com/buttflattery.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VIDEOJS VideoWall by IDOWS #\n **Version 1.0**\n ________\n### What is this repository for? ###\nA jquery plugin that creates a Video Wall for VIDEOJS video player using three different modes.\n\n* Carousel (Default)\n* Thumbnail\n* Playlist\n\n### External Libraries Used ###\n* [VideoJs](http://videojs.com/) Library\n* [MustacheJS](https://github.com/janl/mustache.js/) for Templating\n* [jQuery v2.2.4](https://jquery.com/download/)\n* Fontawesome\n* [Select2 v4.0.5](https://select2.org/)\n* [Bootstrap v3.3.7](https://getbootstrap.com/docs/3.3/)\n\n# Demo #\nhttps://plugins.omaraslam.com/site/demovideowall\n\n# Integration #\n[Yii2 Framework Extension yii2-videowall](https://github.com/buttflattery/yii2-videowall)\n# Features #\n_________\n\nThe plugin features 3 modes to use for your video files with VideoJS\n\n* **Carousel (Default)**\n\n* **Thumbnail**\n\n* **Playlist**\n\n\n### Start using with minimum effort ###\n\nYou 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. \n\n### Select the Right Mode for you ###\n\nThe 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.\n\nEach 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. \n\nIf 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 \u003ckbd\u003eEnter\u003c/kbd\u003e the video will start playing.\n\nAnd 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\n\n### Keyboard Support ###\n\nYou can navigate between the slides in all 3 modes using your left \u003ckbd\u003e\u003c-\u003c/kbd\u003e and right \u003ckbd\u003e-\u003e\u003c/kbd\u003e keyboard buttons.\nMore 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.\n\n### How do I get set up? ###\n\n* ## LIBRARIES ##\n\n```html\n\n    //video js css file if not added yet\n    \u003clink href=\"http://vjs.zencdn.net/6.2.8/video-js.css\" rel=\"stylesheet\"\u003e\n\n    //videowall css file\n    \u003clink href=\"video-wall.css\" rel=\"stylesheet\"\u003e\n\n    //fontawesome for icons\n    \u003clink href=\"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css\" rel=\"stylesheet\"\u003e\n\n    //google font Roboto\n    \u003clink href=\"https://fonts.googleapis.com/css?family=Roboto\" rel=\"stylesheet\"\u003e\n\n    //jquery library\n    \u003cscript src=\"https://code.jquery.com/jquery-2.2.4.js\" integrity=\"sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n    //video js library if not inluded\n    \u003cscript src=\"http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"http://vjs.zencdn.net/6.2.8/video.js\"\u003e\u003c/script\u003e\n    //MustacheJs library required for `Playlist` mode\n    \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js\"\u003e\u003c/script\u003e\n    //idows videowall plugin\n    \u003cscript src=\"video-wall.js\"\u003e\u003c/script\u003e\n\n```\n* ## HTML ##\n\n```HTML\n\u003cvideo id=\"my-video\" class=\"video-js vjs-default-skin vjs-big-play-centered\" controls preload=\"auto\" width=\"500\" height=\"500\"\n                    data-setup=\"{}\" poster=\"video-uploads/posters/1.jpg\"\u003e\n    \u003csource src=\"video-uploads/jaan-jatti.mp4\" type='video/mp4'\u003e\n    \u003cp class=\"vjs-no-js\"\u003e\n        To view this video please enable JavaScript, and consider upgrading to a web browser that\n        \u003ca href=\"http://videojs.com/html5-video-support/\" target=\"_blank\"\u003esupports HTML5 video\u003c/a\u003e\n    \u003c/p\u003e\n\u003c/video\u003e\n```\n\n* ## JAVASCRIPT ##\nThen choose your desired mode and paste the relevant script provided\n\n## 1. Carousel Mode  (Default) ##\n\n![delete-single-files](https://plugins.omaraslam.com/images/video-wall-carousel.png) \n        \n### Quick Start Code ### \n\n```javascript \n\n    $ ( '#video-js-video-tag-id' ).idowsVideowall ( {\n    videos : [{\n            src : '/images/video-wall/sample1.mp4',\n            poster : '/images/video-wall/posters/sample1.png',\n            mime : 'video/mp4',\n            title : 'Circus Video Custom '\n        }, {\n            src : '/images/video-wall/sample2.mp4',\n            poster : '/images/video-wall/posters/sample2.png',\n            mime : 'video/mp4',\n            title : 'Deep Space Star Acts'\n        }, {\n            src : '/images/video-wall/sample3.mp4',\n            poster : '/images/video-wall/posters/sample3.png',\n            mime : 'video/mp4',\n            title : 'Dolby Digital Intro'\n        }, {\n            src : '/images/video-wall/sample3.mp4',\n            poster : '/images/video-wall/posters/sample3.png',\n            mime : 'video/mp4',\n            title : 'Dolby Digital Intro'\n        }]\n    } );\n```\n\n## Thumbnail Mode ##\n\n![delete-single-files](https://plugins.omaraslam.com/images/video-wall-thumb.png)\n\n### Quick Start Code ### \n\n```javascript \n\n    $ ( '#video-js-video-tag-id' ).idowsVideowall ( {\n    wallType : 'thumb',\n    videos : [{\n            src : '/images/video-wall/sample1.mp4',\n            poster : '/images/video-wall/posters/sample1.png',\n            mime : 'video/mp4',\n            title : 'Circus Video Custom '\n        }, {\n            src : '/images/video-wall/sample2.mp4',\n            poster : '/images/video-wall/posters/sample2.png',\n            mime : 'video/mp4',\n            title : 'Deep Space Star Acts'\n        }, {\n            src : '/images/video-wall/sample3.mp4',\n            poster : '/images/video-wall/posters/sample3.png',\n            mime : 'video/mp4',\n            title : 'Dolby Digital Intro'\n        }, {\n            src : '/images/video-wall/sample4.mp4',\n            poster : '/images/video-wall/posters/sample4.png',\n            mime : 'video/mp4',\n            title : 'Toy Helicopter Demo'\n        },]\n    } );\n```\n## Playlist Mode ##\n\n![delete-single-files](https://plugins.omaraslam.com/images/video-wall-playlist.png)\n\n### Quick Start Code ###   \n\n```javascript\n\n    $ ( \"#video-js-video-tag-id\" ).idowsVideowall ( {\n        wallType : 'playlist',\n        playlists : [{\n            name : 'Sweet Sexy Savage',\n            cover : '/images/video-wall/posters/playlist-1.jpg',\n            videos : [{\n                    src : '/images/video-wall/sample1.mp4',\n                    poster : '/images/video-wall/posters/sample1.png',\n                    mime : 'video/mp4',\n                    title : 'Circus Juggler Video'\n                }, {\n                    src : '/images/video-wall/sample2.mp4',\n                    poster : '/images/video-wall/posters/sample2.png',\n                    mime : 'video/mp4',\n                    title : 'Deep Space Star Acts'\n                }, {\n                    src : '/images/video-wall/sample3.mp4',\n                    poster : '/images/video-wall/posters/sample3.png',\n                    mime : 'video/mp4',\n                    title : 'Dolby Digital Intro'\n                }, {\n                    src : '/images/video-wall/sample4.mp4',\n                    poster : '/images/video-wall/posters/sample4.png',\n                    mime : 'video/mp4',\n                    title : 'Toy Helicopter Demo'\n                }, {\n                    src : '/images/video-wall/sample4.mp4',\n                    poster : '/images/video-wall/posters/sample4.png',\n                    mime : 'video/mp4',\n                    title : 'Toy Helicopter Demo'\n                }]\n        } ]\n    }); \n```\n\n# Options #\n\n\n| Option Name       |   Type       |   Values        |       Description \n| ------------- |:-------------| ----------------| ------------------\n| `wallType`   |`string`  | `carousel` (default), `thumb`, `playlist`  | Selects which type of videowall mode you want \n| `videoWallId` |`string`     | `video-wall` (default)      |   `id` of the video-wall container |\n| `videoWallContainer`|`string` | `video-wall-container` (default)      |    `css class` for the video wall container |\n| `containerId`|`string` | `video-wall-slides` (default)      |    `id` for the slides container|\n| `containerClass` |`string`| `slides-container` (default)      |    `css class` for slides container|\n| `helpImproveVideoJS`|`boolean` | `true, false` (default)      |    VideoJS Option to collect information|\n| `thumbPageSize`|`int` | `15` (default)      |    Default page size for the thumbnails in `thumb` mode|\n| `playlistPageSize`|`int` | `8` (default)      |    Default page size for the playlists in `playlist` mode|\n| `videos`|`JSON Array` | `[{` \u003cbr /\u003e `src:'path/to/your/video/file',` \u003cbr /\u003e`poster:'path/to/poster/image',`\u003cbr /\u003e`mime:'video/mp4' (or any other you are using),` \u003cbr /\u003e `title:'Video Title'`\u003cbr /\u003e`}]`      |    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.|\n| `playlists`|`JSON Array` | `[{`\u003cbr /\u003e`name:'Playlist Name',` \u003cbr /\u003e`cover:'path/to/playlist/cover/image',`\u003cbr /\u003e`videos:[{src:'',poster:'',mime:'',title:''}],` \u003cbr /\u003e`},]`      |    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.|\n| `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.|\n| `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.|\n| `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.|\n| `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.|\n| `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.|\n| `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.|\n| `openOnStart`|`boolean` | `true`(default)`, false`     |    Whether to start the video wall minimized or open when the page loads.|\n\n\n# Events #\n\n|Event Name         |       Params      |     Usage|Description\n|----------         |-------------------|     -----------|-------|\n|`callback`         |`null`         | `$('#id').idowsVideoWall({`\u003cbr /\u003e`callback:function(){`\u003cbr /\u003e`console.log('finished loading);`\u003cbr /\u003e`}`\u003cbr /\u003e`});`|A callback function that is triggered after the initialization of the plugin, called once/instance.\n|`onBeforePlayback` | `@param event,`\u003cbr /\u003e` @param data (Obj)`\u003cbr /\u003e `{`\u003cbr /\u003e`title,`\u003cbr /\u003e`mime,`\u003cbr /\u003e`player,`\u003cbr /\u003e`src`\u003cbr /\u003e`}`| `$(\"#element-id\").idowsVideowall(` \u003cbr /\u003e `{` \u003cbr /\u003e `wallType:'thumb'` \u003cbr /\u003e `}).on('onBeforePlayback',function(event,data)){` \u003cbr /\u003e `console.log(data)` \u003cbr /\u003e `};` \u003cbr /\u003e or \u003cbr /\u003e `var obj=$(\"#element-id\").idowsVideowall();`\u003cbr /\u003e `obj.on('onBeforePlayback',function(event,data){`\u003cbr /\u003e`console.log(data);}`\u003cbr /\u003e`);` |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.\n|`onAfterPlayback`  |`@param event,`\u003cbr /\u003e`@param data (Obj)`\u003cbr /\u003e `{`\u003cbr /\u003e`title,`\u003cbr /\u003e`mime,`\u003cbr /\u003e`player,`\u003cbr /\u003e`src`\u003cbr /\u003e`}`| `$(\"#element-id\").idowsVideowall({` \u003cbr /\u003e `wallType:'thumb'` \u003cbr /\u003e `}).on('onAfterPlayback',function(event,data)){` \u003cbr /\u003e `console.log(data)` \u003cbr /\u003e `};` \u003cbr /\u003e or \u003cbr /\u003e `var obj=$(\"#element-id\").idowsVideowall();`\u003cbr /\u003e `obj.on('onAfterPlayback',function(event,data){`\u003cbr /\u003e`console.log(data);}`\u003cbr /\u003e`);` |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.\n|`onBeforeNext`     |`@param event,`\u003cbr /\u003e`@param data(Obj)`\u003cbr /\u003e`{`\u003cbr /\u003e`nextSlide,`\u003cbr /\u003e`currentSlide`\u003cbr /\u003e`}`| `$(\"#element-id\").idowsVideowall({` \u003cbr /\u003e `wallType:'thumb'` \u003cbr /\u003e `}).on('onBeforeNext',function(event,data)){` \u003cbr /\u003e `console.log(data.nextSlide,data.currentSlide)` \u003cbr /\u003e `};` \u003cbr /\u003e or \u003cbr /\u003e `var obj=$(\"#element-id\").idowsVideowall();`\u003cbr /\u003e `obj.on('onBeforeNext',function(event,data){`\u003cbr /\u003e`console.log(data);}`\u003cbr /\u003e`);`|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.\n|`onAfterNext`     |  `@param event ,`\u003cbr /\u003e` @param data(Obj)`\u003cbr /\u003e` {`\u003cbr /\u003e`previousSlide,`\u003cbr /\u003e`currentSlide`\u003cbr /\u003e`}`|`$(\"#element-id\").idowsVideowall({` \u003cbr /\u003e `wallType:'thumb'` \u003cbr /\u003e `}).on('onAfterNext',function(event,data)){` \u003cbr /\u003e `console.log(data.previousSlide,data.currentSlide)` \u003cbr /\u003e `};` \u003cbr /\u003e or \u003cbr /\u003e `var obj=$(\"#element-id\").idowsVideowall();`\u003cbr /\u003e `obj.on('onAfterNext',function(event,data){`\u003cbr /\u003e`console.log(data);}`\u003cbr /\u003e`);`|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.\n|`onBeforePrev`     |  `@param event ,`\u003cbr /\u003e` @param data(Obj)`\u003cbr /\u003e` {`\u003cbr /\u003e`nextSlide,`\u003cbr /\u003e`currentSlide`\u003cbr /\u003e`}`|`$(\"#element-id\").idowsVideowall({` \u003cbr /\u003e `wallType:'thumb'` \u003cbr /\u003e `}).on('onBeforePrev',function(event,data)){` \u003cbr /\u003e `console.log(data.nextSlide,data.currentSlide)` \u003cbr /\u003e `};` \u003cbr /\u003e or \u003cbr /\u003e `var obj=$(\"#element-id\").idowsVideowall();`\u003cbr /\u003e `obj.on('onBeforePrev',function(event,data){`\u003cbr /\u003e`console.log(data);}`\u003cbr /\u003e`);`|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.\n|`onAfterPrev`     |  `@param event ,`\u003cbr /\u003e` @param data(Obj)`\u003cbr /\u003e` {`\u003cbr /\u003e`currentSlide,`\u003cbr /\u003e`previousSlide`\u003cbr /\u003e`}`|`$(\"#element-id\").idowsVideowall({` \u003cbr /\u003e `wallType:'thumb'` \u003cbr /\u003e `}).on('onAfterPrev',function(event,data)){` \u003cbr /\u003e `console.log(data.previousSlide,data.currentSlide)` \u003cbr /\u003e `};` \u003cbr /\u003e or \u003cbr /\u003e `var obj=$(\"#element-id\").idowsVideowall();`\u003cbr /\u003e `obj.on('onAfterPrev',function(event,data){`\u003cbr /\u003e`console.log(data);}`\u003cbr /\u003e`);`|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.\n|`onPlaylistStart`     |  `@param event ,`\u003cbr /\u003e` @param data(Obj)`\u003cbr /\u003e` {`\u003cbr /\u003e`playlist[{`\u003cbr /\u003e`isActive:true/false,`\u003cbr /\u003e`mime:\"video/mp4\",`\u003cbr /\u003e`poster:\"video-uploads/posters/1.jpg\",`\u003cbr /\u003e`src:\"video-uploads/jaan-jatti.mp4\",`\u003cbr /\u003e`title:\"Track 1\"`\u003cbr /\u003e`}]`\u003cbr /\u003e`}`|`$(\"#element-id\").idowsVideowall({` \u003cbr /\u003e `wallType:'thumb'` \u003cbr /\u003e `}).on('onPlaylistStart',function(event,data)){` \u003cbr /\u003e `for(var i in data.playlist){`\u003cbr /\u003e`let video = data.playlist;`\u003cbr /\u003e`console.log(video[i].mime, video[i].title, video[i].isActive);}` \u003cbr /\u003e `};` \u003cbr /\u003e or \u003cbr /\u003e `var obj=$(\"#element-id\").idowsVideowall();`\u003cbr /\u003e `obj.on('onPlaylistStart',function(event,data){`\u003cbr /\u003e`for (var i in data.playlist) {`\u003cbr /\u003e`let video = data.playlist;`\u003cbr /\u003e`console.log(video[i].mime, video[i].title, video[i].isActive);`\u003cbr /\u003e`}}`\u003cbr /\u003e`);`|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 \u003cbr /\u003e`isActive: (Boolean), identifies which file is currently playing.`\u003cbr /\u003e`mime: (Video MimeTypes), the mime type of the video file`\u003cbr /\u003e`poster: (string) , the poster of the video file playing.`\u003cbr /\u003e`src: (string) ,the path to video file source`\u003cbr /\u003e`title: (string), the title of the video file`\n|`onPlaylistEnd`     |  `@param event ,`\u003cbr /\u003e` @param data(Obj)`\u003cbr /\u003e` {`\u003cbr /\u003e`playlist[{`\u003cbr /\u003e`isActive:true/false,`\u003cbr /\u003e`mime:\"video/mp4\",`\u003cbr /\u003e`poster:\"video-uploads/posters/1.jpg\",`\u003cbr /\u003e`src:\"video-uploads/jaan-jatti.mp4\",`\u003cbr /\u003e`title:\"Track 1\"`\u003cbr /\u003e`}]`\u003cbr /\u003e`}`|`$(\"#element-id\").idowsVideowall({` \u003cbr /\u003e `wallType:'thumb'` \u003cbr /\u003e `}).on('onPlaylistStart',function(event,data)){` \u003cbr /\u003e `for(var i in data.playlist){`\u003cbr /\u003e`let video = data.playlist;`\u003cbr /\u003e`console.log(video[i].mime, video[i].title, video[i].isActive);}` \u003cbr /\u003e `};` \u003cbr /\u003e or \u003cbr /\u003e `var obj=$(\"#element-id\").idowsVideowall();`\u003cbr /\u003e `obj.on('onPlaylistStart',function(event,data){`\u003cbr /\u003e`for (var i in data.playlist) {`\u003cbr /\u003e`let video = data.playlist;`\u003cbr /\u003e`console.log(video[i].mime, video[i].title, video[i].isActive);`\u003cbr /\u003e`}}`\u003cbr /\u003e`);`|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 \u003cbr /\u003e`isActive: (Boolean), identifies which file is currently playing.`\u003cbr /\u003e`mime: (Video MimeTypes), the mime type of the video file`\u003cbr /\u003e`poster: (string) , the poster of the video file playing.`\u003cbr /\u003e`src: (string) ,the path to video file source`\u003cbr /\u003e`title: (string), the title of the video file`\n\n\n### Who do I talk to? ###\n\n* buttflattery@hotmail.com\n* [Muhammad Omer Aslam](https://www.facebook.com/omer.aslam)\n* admin@idowstech.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuttflattery%2Fidows-videojs-videowall","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuttflattery%2Fidows-videojs-videowall","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuttflattery%2Fidows-videojs-videowall/lists"}