Skip to content

A Yii2 plugin to display a video wall for videoJS player, and create different layouts for video wall like carousel, thumbnails and playlists.

License

Notifications You must be signed in to change notification settings

buttflattery/yii2-videowall

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

delete-single-files

For details on the javascript plugin you can visit the link https://github.com/buttflattery/idows-videojs-videowall

External Libraries Used

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 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?

About

A Yii2 plugin to display a video wall for videoJS player, and create different layouts for video wall like carousel, thumbnails and playlists.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages