Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/buttflattery/yii2-videowall
A Yii2 plugin to display a video wall for videoJS player, and create different layouts for video wall like carousel, thumbnails and playlists.
https://github.com/buttflattery/yii2-videowall
carousel javascript playlist video-wall-plugin videojs-plugin videojs-videowall videowall yii2-extension yii2-widget
Last synced: about 2 months ago
JSON representation
A Yii2 plugin to display a video wall for videoJS player, and create different layouts for video wall like carousel, thumbnails and playlists.
- Host: GitHub
- URL: https://github.com/buttflattery/yii2-videowall
- Owner: buttflattery
- License: other
- Created: 2018-09-30T14:35:43.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-04-14T08:35:25.000Z (over 5 years ago)
- Last Synced: 2024-10-31T06:51:37.186Z (about 2 months ago)
- Topics: carousel, javascript, playlist, video-wall-plugin, videojs-plugin, videojs-videowall, videowall, yii2-extension, yii2-widget
- Language: PHP
- Size: 695 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Yii2-VideoWall(v1.0)
### What is this repository for? ###
A Yii2 plugin based on [idows-videojs-videowall](https://github.com/buttflattery/idows-videojs-videowall) that creates a Video Wall for VIDEOJS video player using three different modes.
* Carousel (Default)
* Thumbnail
* Playlist
For details on the javascript plugin you can visit the link https://github.com/buttflattery/idows-videojs-videowall
### External Libraries Used ###
* [Idows VideoJS-VideoWall](https://github.com/buttflattery/idows-videojs-videowall).
* [VideoJs](http://videojs.com/) Library
* [MustacheJS](https://github.com/janl/mustache.js/) for Templating
* [jQuery v2.2.4](https://jquery.com/download/)
* Fontawesome
* [kartik-v/yii2-widget-select2](https://github.com/kartik-v/yii2-widget-select2)
* [Bootstrap v3.3.7](https://getbootstrap.com/docs/3.3/)
### DEMOS ###
- [Carousel](http://yii2plugins.idowstech.com/videowall/carousel)
- [Thumbnail](http://yii2plugins.idowstech.com/videowall/thumbnail)
- [Playlist](http://yii2plugins.idowstech.com/videowall/playlist)
### How do I get set up? ###
use composer to install the extension
```
php composer.phar require buttflattery/yii2-videowall "@dev"
```
or add into the `composer.json` file under `require` section
```composer
"buttflattery/yii2-videowall":"@dev"
```
### Demos ###
- [Carousel Mode](http://yii2plugins.idowstech.com/videowall/carousel).
- [Thumbnail Mode](http://yii2plugins.idowstech.com/videowall/thumbnail).
- [Playlist Mode](http://yii2plugins.idowstech.com/videowall/thumbnail).
### Available Options ###
- `videoTagOptions (array)`: Attributes for the the default video tag used by videoJs to initialize the player. You can pass the following options for the video tag.
- `class` : Html class for the the video tag.
- `width` : Width for the video tag.
- `height` : Height for the video tag.
- `setupOptions` : The setup options for the video tag used inside the `data-setup` attribute, below are few of the options commonly used by the videoJS player.
- `controls` : Default value `true`.
- `autoplay` : Default value `true`.
- `preload` : Default value `auto`.
- `poster (path)` : Path for the default poster for the video tag, use path relative to the web directory.
- `wallType (string)` :
- `Videowall::TYPE_CAROUSEL` (carousel)
- `Videowall::TYPE_THUMBNAIL` (thumbnail)
- `Videowall::TYPE_PLAYLIST` (playlist)
- `slideShowDelay (milliseconds)` : integer, default value 2000 ms.
- `videoWallContainer (string)`: container class name for the video wall, default class `video-wall-container`.
- `containerId (string)` : container id for the video wall slides, default id prefix `video-wall-slides`.
- `containerClass (string)` : container class name for the video wall slides, default class `slides-container`.
- `helpImproveVideoJs (boolean)` : `true` or `false` used by the videoJS player.
- `thumbPageSize (int)` : page size for the thumbnails mode, default value `15`.
- `playlistPageSize (int)` : page size for the playlist model, default value `8`.
- `loadBootstrapAssets (boolean)` : select if plugin should load the bootstrap assets or use the globally registered yii bootstrap assets, by default this option is `false` and Yii2 default assets bundle is used.
- `bootstrapCssSource (url)` : url to the bootstrap css file for the plugin to load, this option is effective when you have `"loadBootstrapAssets"=>true`.
- `bootstrapJsSource (url)` : url to the boootstrap js file for the plugin to load, this option is effective when you have `"loadBootstrapAssets"=>true`.
- `select2Defaults (array)` : default options used for rendring the kartik-v\yii2-select2 plugin, you override them and add you own too look into documentation for the options
- `allowClear`: default value `true`.
- `theme` : default value `default`.
- `width` : default value `100%`.
- `placeholder` : default value `Search Videos`.
- `minimumInputlength` : default value `2`.
- `dropdownCssClass` : default value `bigdrop`.
- `openOnStart (boolean)` : Select if the video wall is open when player is initialized, default value is `true`.
- `callback (function)`: a callback function called by the plugin after initialized.
- `clientEvents (array)` : an array of client events supported by the plugin, you can see the plugin [documentation](https://github.com/buttflattery/idows-videojs-videowall) for the supported events, you can use them like below
```
"pluginEvents"=>[
'onBeforeNext' => 'function(event,dataObj){console.log(event);}',
]
```
### Usage 1 Carousel Mode ###
```php
[
'height' => "500",
],
'wallType' => Videowall::TYPE_CAROUSEL,
'videos' => [
[
"src" => "/PATH/TO/VIDEO.MP4",
"mime" => 'video/mime',
"poster" => "/PATH/TO/POSTER.JPG",
"title" => "Sweet Sexy Savage",
], [
"src" => '/PATH/TO/VIDEO.MP4',
'poster' => '/PATH/TO/POSTER.JPG',
'mime' => 'video/mime',
'title' => 'Video 2',
],
]
]);
```
### Usage 2 Thumbnail Mode ###
Thumbnail mode for compact display of the video files along with filter option using the select2 dropdown.
```php
[
'height' => "500",
],
'wallType' => Videowall::TYPE_THUMB,
'videos' => [
[
"src" => "/PATH/TO/VIDEO.MP4",
"mime" => 'video/mime',
"poster" => "/PATH/TO/POSTER.JPG",
"title" => "Sweet Sexy Savage",
], [
"src" => '/PATH/TO/VIDEO.MP4',
'poster' => '/PATH/TO/POSTER.JPG',
'mime' => 'video/mime',
'title' => 'Video 2',
],
]
]);
```
### Usage 3 Playlist Mode ##
Bonus Feature for disaplying th playlists inside the video wall.
```php
Videowall::TYPE_PLAYLIST,
'videoTagOptions' => [
'width' => "800",
'height' => "600",
],
'playlists' => [
[
'name' => 'Sweet Sexy Savage',
'cover' => '/PATH/TO/POSTER.JPG',
'videos' => [
[
'src' => '/PATH/TO/VIDEO.MP4',
'poster' => '/PATH/TO/POSTER.JPG',
'mime' => 'video/mime',
'title' => 'Video title',
],
[
'src' => '/PATH/TO/VIDEO.MP4',
'poster' => '/PATH/TO/POSTER.JPG',
'mime' => 'video/mime',
'title' => 'Video title',
],
[
'src' => '/PATH/TO/VIDEO.MP4',
'poster' => '/PATH/TO/POSTER.JPG',
'mime' => 'video/mime',
'title' => 'Video title',
],
[
'src' => '/PATH/TO/VIDEO.MP4',
'poster' => '/PATH/TO/POSTER.JPG',
'mime' => 'video/mime',
'title' => 'Video title',
],
[
'src' => '/PATH/TO/VIDEO.MP4',
'poster' => '/PATH/TO/POSTER.JPG',
'mime' => 'video/mime',
'title' => 'Video title',
],
],
],
[
'name' => 'Hope',
'cover' => '/PATH/TO/POSTER.JPG',
'videos' => [
[
'src' => '/PATH/TO/VIDEO.MP4',
'poster' => '/PATH/TO/POSTER.JPG',
'mime' => 'video/mime',
'title' => 'Video title',
],
[
'src' => '/PATH/TO/VIDEO.MP4',
'poster' => '/PATH/TO/POSTER.JPG',
'mime' => 'video/mime',
'title' => 'Video title',
],
[
'src' => '/PATH/TO/VIDEO.MP4',
'poster' => '/PATH/TO/POSTER.JPG',
'mime' => 'video/mime',
'title' => 'Video title',
], [
'src' => '/PATH/TO/VIDEO.MP4',
'poster' => '/PATH/TO/POSTER.JPG',
'mime' => 'video/mime',
'title' => 'Video title',
], [
'src' => '/PATH/TO/VIDEO.MP4',
'poster' => '/PATH/TO/POSTER.JPG',
'mime' => 'video/mime',
'title' => 'Video title',
], [
'src' => '/PATH/TO/VIDEO.MP4',
'poster' => '/PATH/TO/POSTER.JPG',
'mime' => 'video/mime',
'title' => 'Video title',
]],
],
]
]);
```
### Who do I talk to? ###