A Yii2 plugin to display a video wall for videoJS player, and create different layouts for video wall like carousel, thumbnails and playlists.
OTHER License
A Yii2 plugin based on idows-videojs-videowall that creates a Video Wall for VIDEOJS video player using three different modes.
For details on the javascript plugin you can visit the link https://github.com/buttflattery/idows-videojs-videowall
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 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 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',
]],
],
]
]);