README

这个仓库是做什么用的？

这是一个基于idows-videojs-videowall的Yii2插件，它使用三种不同模式为VIDEOJS视频播放器创建视频墙。

• 轮播（默认）
• 缩略图
• 播放列表

有关javascript插件的详细信息，您可以访问链接https://github.com/buttflattery/idows-videojs-videowall

使用的外部库

• Idows VideoJS-VideoWall.
• VideoJs库
• MustacheJS用于模板
• jQuery v2.2.4
• Fontawesome
• kartik-v/yii2-widget-select2
• Bootstrap v3.3.7

演示

• 轮播
• 缩略图
• 播放列表

如何设置？

使用composer安装扩展

php composer.phar require  buttflattery/yii2-videowall "@dev" 

或添加到composer.json文件中的require部分

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

演示

• 轮播模式.
• 缩略图模式.
• 播放列表模式.

可用选项

• videoTagOptions (array)：videoJs用于初始化播放器的默认视频标签的属性。您可以传递以下选项给视频标签。

  • class：视频标签的Html类。
  • width：视频标签的宽度。
  • height：视频标签的高度。
  • setupOptions：在data-setup属性中使用的视频标签的设置选项，以下是videoJS播放器常用的一些选项。
    • controls：默认值true。
    • autoplay：默认值true。
    • preload：默认值auto。
  • poster (path)：视频标签的默认海报路径，使用相对于web目录的路径。

• wallType (字符串) :

  • Videowall::TYPE_CAROUSEL（轮播）
  • Videowall::TYPE_THUMBNAIL（缩略图）
  • Videowall::TYPE_PLAYLIST（播放列表）

• slideShowDelay (毫秒)：整数，默认值2000毫秒。

• videoWallContainer (字符串)：视频墙的容器类名，默认类video-wall-container。

• containerId (字符串)：视频墙幻灯片的容器id，默认id前缀video-wall-slides。

• containerClass (字符串)：视频墙幻灯片的容器类名，默认类slides-container。

• helpImproveVideoJs (布尔值)：true或false由videoJS播放器使用。

• thumbPageSize (整数)：缩略图模式的页面大小，默认值15。

• playlistPageSize (整数)：播放列表模型的页面大小，默认值8。

• loadBootstrapAssets (布尔值)：选择是否加载插件的自定义bootstrap资产或使用全局注册的yii bootstrap资产，默认此选项为false，使用Yii2默认资产包。

• bootstrapCssSource (url) : 插件加载的bootstrap css文件url，当你有 "loadBootstrapAssets"=>true 时此选项有效。

• bootstrapJsSource (url) : 插件加载的bootstrap js文件url，当你有 "loadBootstrapAssets"=>true 时此选项有效。

• select2Defaults (array) : 用于渲染kartik-v\yii2-select2插件的默认选项，你可以覆盖它们并添加自己的，查看文档以获取选项

  • allowClear：默认值 true。
  • theme：默认值 default。
  • width：默认值 100%。
  • placeholder：默认值 搜索视频。
  • minimumInputlength：默认值 2。
  • dropdownCssClass：默认值 bigdrop。

• openOnStart (boolean)：选择当播放器初始化时视频墙是否打开，默认值是 true。

• callback (function)：插件初始化后调用的回调函数。

• clientEvents (array)：插件支持的客户端事件数组，你可以查看插件的 文档 了解支持的事件，你可以像下面这样使用它们

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

用法1：轮播模式

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

用法2：缩略图模式

缩略图模式，用于紧凑显示视频文件，并使用select2下拉菜单进行筛选。

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

用法3：播放列表模式

附加功能：在视频墙内显示播放列表。

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

我应该和谁联系？

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