README

JWPlayer 是我最喜欢的视频播放器，所以我很失望地发现还没有任何真正的扩展/小部件被创建。我确实找到了一个，但是它已经过时并且工作得不太好。播放器已经过时，没有任何错误处理，也没有任何全局配置选项。每次使用小部件时都必须指定您的许可证密钥。

JWPlayer 版本 7.4.4

安装

安装此扩展的首选方式是通过 composer

添加

"wadeshuler/yii2-jwplayer" : "*"

到您的应用程序的 composer.json 文件的 require 部分，并运行 composer update

在 https://www.jwplayer.com 创建一个免费账户

然后转到“播放器”菜单下的左侧栏中的“工具”。您的许可证密钥是 JW Player 7 (Self-Hosted) 选项。

将 jwplayer 添加到您的应用程序配置中。以下是最小要求以启动运行

'components' => [
    'jwplayer' => [
        'class' => 'wadeshuler\jwplayer\JWConfig',
        'key' => '',  // <-- Your Key Here!!
    ]
]

将小部件添加到您想要嵌入视频的视图中。

use wadeshuler\jwplayer\JWPlayer;

<?= JWPlayer::widget([
    'playerOptions' => [
        'file' => '/path/to/video.mp4'
    ]
]) ?>

请参阅 JWPlayer 配置指南以获取指导。将您的 JWPlayer 设置配置作为数组传递给 playerOptions。

htmlOptions - 播放器占位符标签的 HTML 选项 <div id="w0"></div>

playerOptions - JW Player 设置选项 jwplayer("w0").setup($playerOptions)

您可以在 JWPlayer 占位符 <div id="w0"></div> 中添加 HTML 标签，例如通过 htmlOptions 为其添加一个类。您可以通过 playerOptions 将任何有效的 JW Player 设置配置传递给播放器。

全局 - 要定义全局选项，在您的应用程序配置中定义 htmlOptions 和/或 playerOptions。

本地 - 要仅影响单个播放器并保持网站上其他播放器完好无损，在 Widget 自身中定义 htmlOptions 和/或 playerOptions。

示例 1

让我们给 JW Player 占位符标签添加一个类。通过添加一个类，我们可以给视频添加一个边框。

<?= JWPlayer::widget([
    'htmlOptions' => [
        'class' => 'myVideoPlayer',
    ],
    'playerOptions' => [
        'file' => '/path/to/video.mp4',
    ],
]) ?>

上面的代码将仅给这个视频添加 myVideoPlayer 类。如果您想全局添加这个类（即所有视频），请将 htmlOptions 添加到您的配置中。

'components' => [
    'jwplayer' => [
        'class' => 'wadeshuler\jwplayer\JWConfig',
        'key' => 'ABC123==',  // <-- Your Key Here!!
        'htmlOptions' => [
            'class' => 'myVideoPlayer',
        ],
    ]
]

任何本地（Widget）定义的设置 将覆盖 全局设置。如果您在配置中全局定义了一个类，并且也本地（Widget）定义了一个类，则将使用本地定义的选项。

示例 2

让我们让每个视频自动播放

'components' => [
    'jwplayer' => [
        'class' => 'wadeshuler\jwplayer\JWConfig',
        'key' => 'ABC123==',  // <-- Your Key Here!!
        'playerOptions' => [
            'autostart' => true,
        ],
    ]
]

示例 3

播放列表，包括图片

<?= JWPlayer::widget([
    'playerOptions' => [
        'playlist' => [
            [
                'file' => '/path/to/video1.mp4',
                'image' => '/path/to/image1.png',
                'title' => 'Video 1',
                'mediaid' => 'ddra573'
            ],
            [
                'file' => '/path/to/video2.mp4',
                'image' => '/path/to/image2.png',
                'title' => 'Video 2',
                'mediaid' => 'ddrx3v2'
            ],
        ],
    ],
]) ?>

示例 4

在 Facebook 和 Twitter 上分享

<?= JWPlayer::widget([
    'playerOptions' => [
        'file' => '/path/to/video.mp4',
        'sharing' => [
            'sites' => ['facebook', 'twitter'],
        ],
    ],
]) ?>

示例 5

具有特定宽度和高度的视频，自动播放，并使用我们自己的类

<?= JWPlayer::widget([
    'htmlOptions' => [
        'class' => 'myVideoPlayer',
    ],
    'playerOptions' => [
        'file' => '/path/to/video.mp4',
        'autostart' => true,
        'width' => '600px',
        'height' => '300px',
    ],
]) ?>

示例 6

全局更改皮肤

'components' => [
    'jwplayer' => [
        'class' => 'wadeshuler\jwplayer\JWConfig',
        'key' => 'ABC123==',  // <-- Your Key Here!!
        'playerOptions' => [
            'skin' => 'vapor',
        ],
    ]
]

wadeshuler / yii2-jwplayer

维护者

详细信息