A Yii2 plugin based on 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
- Idows VideoJS-VideoWall.
- VideoJs Library
- MustacheJS for Templating
- jQuery v2.2.4
- Fontawesome
- kartik-v/yii2-widget-select2
- Bootstrap v3.3.7
use composer to install the extension
php composer.phar require buttflattery/yii2-videowall "@dev"
or add into the composer.json file under require section
"buttflattery/yii2-videowall":"@dev"
-
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 thedata-setupattribute, below are few of the options commonly used by the videoJS player.controls: Default valuetrue.autoplay: Default valuetrue.preload: Default valueauto.
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 classvideo-wall-container. -
containerId (string): container id for the video wall slides, default id prefixvideo-wall-slides. -
containerClass (string): container class name for the video wall slides, default classslides-container. -
helpImproveVideoJs (boolean):trueorfalseused by the videoJS player. -
thumbPageSize (int): page size for the thumbnails mode, default value15. -
playlistPageSize (int): page size for the playlist model, default value8. -
loadBootstrapAssets (boolean): select if plugin should load the bootstrap assets or use the globally registered yii bootstrap assets, by default this option isfalseand 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 optionsallowClear: default valuetrue.theme: default valuedefault.width: default value100%.placeholder: default valueSearch Videos.minimumInputlength: default value2.dropdownCssClass: default valuebigdrop.
-
openOnStart (boolean): Select if the video wall is open when player is initialized, default value istrue. -
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 for the supported events, you can use them like below
"pluginEvents"=>[
'onBeforeNext' => 'function(event,dataObj){console.log(event);}',
]
<?php
use buttflattery\videowall\Videowall;
echo Videowall::widget([
'videoTagOptions' => [
'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',
],
]
]);Thumbnail mode for compact display of the video files along with filter option using the select2 dropdown.
<?php
use buttflattery\videowall\Videowall;
echo Videowall::widget([
'videoTagOptions' => [
'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',
],
]
]);Bonus Feature for disaplying th playlists inside the video wall.
<?php
use buttflattery\videowall\Videowall;
echo Videowall::widget([
'wallType' => 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',
]],
],
]
]);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent