Documentation
Yii2-VideoWall(v1.0)
About
A Yii2 extension 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
External Libraries Used
- Idows VideoJS-VideoWall.
- VideoJs Library
- MustacheJS for Templating
- jQuery v2.2.4
- Fontawesome
- kartik-v/yii2-widget-select2
- Bootstrap v3.3.7
DEMOS
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
"buttflattery/yii2-videowall":"@dev"
Demos
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 thedata-setup
attribute, 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)
:true
orfalse
used 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 isfalse
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 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);}',
]
Usage 1 Carousel Mode
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',
],
]
]);
Usage 2 Thumbnail Mode
Thumbnail mode for compact display of the video files along with filter option using the select2 dropdown.
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',
],
]
]);
Usage 3 Playlist Mode
Bonus Feature for disaplying th playlists inside the video wall.
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',
]],
],
]
]);
Who do I talk to?
- buttflattery@hotmail.com
- omeraslam@omaraslam.com