PHPackages                             besnovatyj/yii2-cms-videojs-10-widget - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. besnovatyj/yii2-cms-videojs-10-widget

ActiveYii2-extension[Image & Media](/categories/media)

besnovatyj/yii2-cms-videojs-10-widget
=====================================

Video.js v10 (Web Components) widget for Yii2 CMS. Supports local MP4 via VideoJS v10 and iframe embed for YouTube, Rutube, VK, Vimeo.

v1.1.0(1mo ago)010MITPHP >=8.4

Since Jul 6Compare

[ Source](https://github.com/besnovatyj/yii2-cms-videojs-10-widget)[ Packagist](https://packagist.org/packages/besnovatyj/yii2-cms-videojs-10-widget)[ RSS](/packages/besnovatyj-yii2-cms-videojs-10-widget/feed)WikiDiscussions Synced 1w ago

READMEChangelogDependencies (4)Versions (4)Used By (0)

yii2-cms-videojs-10-widget
==========================

[](#yii2-cms-videojs-10-widget)

VideoJS v10 (Web Components) виджет для Yii2 CMS. Замена старого `yii2-cms-videojs-widget` на базе VideoJS v8.

Возможности
-----------

[](#возможности)

- **Локальное видео MP4** — через VideoJS v10 Web Components (``)
- **Внешние платформы** — YouTube, Rutube, VK, Vimeo через iframe
- **Click-to-play overlay** — постер с кнопкой воспроизведения (iframe загружается только после клика)
- **Шорткоды** — полная совместимость с `besnovatyj/yii2-cms-shortcode`
- **Accessibility** — aria-label, role=button, keyboard navigation (Tab + Enter/Space)
- **Bootstrap 5** — responsive через `ratio ratio-16x9`
- **TypeScript strict** — весь клиентский код на TypeScript

Установка
---------

[](#установка)

### 1. Сборка TypeScript (требуется для VideoJS v10 Web Components)

[](#1-сборка-typescript-требуется-для-videojs-v10-web-components)

```
cd app/packages/besnovatyj/yii2-cms-videojs-10-widget
npm install
npm run build
```

Без сборки работает **только iframe режим** (YouTube, Rutube, VK, Vimeo). VideoJS v10 Web Components (``) требуют собранного `player.js`.

### 2. Регистрация в шорткодах (через admin или migration)

[](#2-регистрация-в-шорткодах-через-admin-или-migration)

ПолеЗначениеshortcode`videojs`type`widget`replacement`\Besnovatyj\VideoJs\Player`---

Использование
-------------

[](#использование)

### PHP API — локальное видео (VideoJS v10)

[](#php-api--локальное-видео-videojs-v10)

```
echo \Besnovatyj\VideoJs\Player::widget([
    'sources' => [
        ['src' => '/videos/movie.mp4', 'type' => 'video/mp4'],
        ['src' => '/videos/movie.webm', 'type' => 'video/webm'], // fallback
    ],
    'poster' => '/images/poster.jpg',
    'title' => 'Название фильма',
]);
```

**Генерирует HTML:**

```

```

---

### PHP API — iframe (YouTube, Rutube, VK, Vimeo)

[](#php-api--iframe-youtube-rutube-vk-vimeo)

```
// Click-to-play (по умолчанию, lazyIframe = true)
echo \Besnovatyj\VideoJs\Player::widget([
    'iframeSrc' => 'https://www.youtube.com/embed/VIDEO_ID',
    'iframeAllow' => 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
    'iframeReferrerPolicy' => 'strict-origin-when-cross-origin',
    'poster' => 'https://img.youtube.com/vi/VIDEO_ID/mqdefault.jpg',
    'title' => 'Название видео',
]);

// Прямой iframe (без click-to-play)
echo \Besnovatyj\VideoJs\Player::widget([
    'iframeSrc' => 'https://rutube.ru/play/embed/VIDEO_ID',
    'iframeAllow' => 'autoplay; fullscreen',
    'lazyIframe' => false,
]);
```

---

### PHP API — данные из модуля актёров (PersonVideo)

[](#php-api--данные-из-модуля-актёров-personvideo)

```
// PersonVideo содержит все необходимые данные для iframe
foreach ($person->videos as $video) {
    echo \Besnovatyj\VideoJs\Player::widget([
        'iframeSrc'             => $video->iframe_url,
        'iframeAllow'           => $video->iframe_allow,
        'iframeReferrerPolicy'  => $video->iframe_referrerpolicy,
        'poster'                => $video->thumbnail_url,
        'title'                 => $person->name . ' — видео',
    ]);
}
```

---

### Шорткоды (besnovatyj/yii2-cms-shortcode)

[](#шорткоды-besnovatyjyii2-cms-shortcode)

#### ВАЖНОЕ!

[](#важное)

Ссылки для вставки видео со сторонних видеохостингов должны быть embed, например:

```
https://rutube.ru/embed/610084de88e90f53f038ebee2eef8dbb/

```

Обычные видео видеохостинги не разрешают встраивать в чужие страницы

❌ Неверно (страница)✅ Верно (embed)`https://rutube.ru/video/ID/``https://rutube.ru/play/embed/ID``https://youtube.com/watch?v=ID``https://www.youtube.com/embed/ID``https://vk.com/video...``https://vk.com/video_ext.php?...`#### Локальное видео

[](#локальное-видео)

```
[videojs, poster="/files/poster.jpg"][source src="/files/movie.mp4" type="video/mp4"][/videojs]

```

Несколько форматов (fallback):

```
[videojs, poster="/files/poster.jpg"]
  [source src="/files/movie.mp4" type="video/mp4"]
  [source src="/files/movie.webm" type="video/webm"]
[/videojs]

```

#### Iframe (YouTube)

[](#iframe-youtube)

```
[videojs, iframeSrc="https://www.youtube.com/embed/VIDEO_ID" iframeAllow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" poster="https://img.youtube.com/vi/VIDEO_ID/mqdefault.jpg" title="Название видео"][/videojs]

```

#### Iframe (Rutube)

[](#iframe-rutube)

```
[videojs, iframeSrc="https://rutube.ru/play/embed/VIDEO_ID" iframeAllow="autoplay; fullscreen" poster="THUMBNAIL_URL"][/videojs]

```

#### Без click-to-play

[](#без-click-to-play)

```
[videojs, iframeSrc="https://www.youtube.com/embed/VIDEO_ID" lazyIframe=0][/videojs]

```

> **Примечание:** `lazyIframe=0` через шорткод — атрибуты без кавычек парсятся как целые числа. `0` (int) будет falsy в PHP. Если нужно false, используйте `lazyIframe=false` (будет строка — truthy!). Надёжнее задавать через PHP API.

---

### Параметры виджета

[](#параметры-виджета)

СвойствоТипПо умолчаниюОписание`poster``?string``null`URL постера (превью)`title``?string``null`Заголовок для aria-label`width``?int``null`Ширина`height``?int``null`Высота`sources``array``[]`Список источников `[['src', 'type'], ...]``controls``bool``true`Элементы управления`autoplay``bool``false`Автовоспроизведение`preload``string``'auto'`Предзагрузка: `'auto'`, `'metadata'`, `'none'``muted``bool``false`Без звука`playsinline``bool``true`Inline на мобильных`content``?string``null`Внутренний контент шорткода (авто-парсинг `[source ...]`)`iframeSrc``?string``null`URL iframe (YouTube, Rutube, VK, Vimeo)`iframeAllow``string``''`Атрибут `allow` для iframe`iframeReferrerPolicy``string``''`Атрибут `referrerpolicy``lazyIframe``bool``true`Click-to-play (постер + кнопка)`options``array``[]`Доп. HTML-атрибуты---

Структура модуля
----------------

[](#структура-модуля)

```
yii2-cms-videojs-10-widget/
├── composer.json              # Pакет Yii2 расширение, namespace Besnovatyj\VideoJs\
├── package.json               # npm: @videojs/html, esbuild, typescript
├── tsconfig.json              # TypeScript strict config
├── esbuild.config.mjs         # Сборка TS → src/media/player.js + player.css
├── README.md                  # Этот файл (инструкция по использованию)
├── DEVELOPMENT.md             # Руководство по разработке и расширению
└── src/
    ├── Player.php             # Основной Yii2 Widget
    ├── PlayerAssets.php       # Yii2 AssetBundle → src/media/
    ├── ts/
    │   ├── index.ts           # TypeScript entry: VideoJS v10 + iframe click-to-play
    │   └── styles.css         # Custom CSS (overlay), импортируется в index.ts
    └── media/                 # Собранные assets (output npm run build)
        ├── player.js          # Бандл: @videojs/html + iframe JS
        └── player.css         # Бандл: VideoJS v10 skin + overlay CSS

```

---

Команды разработки
------------------

[](#команды-разработки)

```
# Установка зависимостей
npm install

# Однократная сборка (production, minified)
npm run build

# Сборка с watch (development)
npm run dev
```

---

Совместимость браузеров
-----------------------

[](#совместимость-браузеров)

VideoJS v10 использует Web Components (Custom Elements v1) — требуются современные браузеры:

БраузерМинимальная версияChrome100+Firefox100+Safari15+Edge100+> **IE11 не поддерживается** — VideoJS v10 нативно использует ESM и Web Components.

###  Health Score

42

—

FairBetter than 88% of packages

Maintenance93

Actively maintained with recent releases

Popularity7

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity53

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~7 days

Total

3

Last Release

33d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/4dab004c4cab25d241bbf453f63cb48e6226d00bd84f50315e735c257c4a1b40?d=identicon)[besnovatyj](/maintainers/besnovatyj)

---

Tags

videoyii2extensionweb componentsplayervideojs

### Embed Badge

![Health badge](/badges/besnovatyj-yii2-cms-videojs-10-widget/health.svg)

```
[![Health](https://phpackages.com/badges/besnovatyj-yii2-cms-videojs-10-widget/health.svg)](https://phpackages.com/packages/besnovatyj-yii2-cms-videojs-10-widget)
```

###  Alternatives

[craftcms/cms

Craft CMS

3.6k3.7M3.4k](/packages/craftcms-cms)[videojs/video.js

An HTML5 video player.

39.8k24.4k](/packages/videojs-videojs)[skeeks/cms

SkeekS CMS — control panel and tools based on php framework Yii2

13926.0k66](/packages/skeeks-cms)[trntv/yii2-glide

Yii2 Glide Extension

41280.5k9](/packages/trntv-yii2-glide)[laravel-admin-ext/media-player

Intergrates mediaelement into laravel-admin

3155.3k](/packages/laravel-admin-ext-media-player)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)