buttflattery/yii2-videowall

There is no license information available for the latest version (1.0.0) of this package.

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

Maintainers

Details

github.com/buttflattery/yii2-videowall

Source

Issues

Installs: 713

Dependents: 0

Suggesters: 0

Security: 0

Stars: 4

Watchers: 1

Forks: 1

Open Issues: 0

Type:yii2-extension

1.0.0 2018-10-22 16:14 UTC

Requires

Unknown License eafbcedbdec45034e1b1d31b781b1b3986b1348b

  • Muhammad Omer Aslam <buttflattery.woop@gmail.com>

This package is auto-updated.

Last update: 2024-04-14 19:58:17 UTC

README

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?