Yii2-VideoWall(v1.0)

What is this repository for?

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

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

• Carousel
• Thumbnail
• 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

"buttflattery/yii2-videowall":"@dev"

Demos

• Carousel Mode.
• Thumbnail Mode.
• Playlist Mode.

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 for the supported events, you can use them like below

"pluginEvents"=>[
    'onBeforeNext' => 'function(event,dataObj){console.log(event);}',
]

Usage 1 Carousel Mode

<?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',
                ],
            ]
        ]);

Usage 2 Thumbnail Mode

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',
                ],
            ]
        ]);

Usage 3 Playlist Mode

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',
                        ]],
                ],
            ]
        ]);

Who do I talk to?

• buttflattery@hotmail.com
• omeraslam@idowstech.com