Реалізація відеоплеєра (Video.js/Plyr) на сайті
При розробці сайту з відеоконтентом вбудований HTML5 <video> тег часто не дотягує до продакшен-рівня. Кастомні елементи керування, субтитри, перемикання якості відео, аналітика перегляду, реклама та DRM — все це потребує промислового рішення. На одному проєкті з десятками тисяч користувачів нативна реалізація давала CLS 0.3 та LCP більше 8 секунд — після заміни на Video.js ці метрики впали до 0.1 та 2.5 секунд відповідно. Наша команда має 5+ років досвіду в інтеграції відеоплеєрів (30+ комерційних проєктів). Ми гарантуємо сумісність з усіма сучасними браузерами. Правильний вибір плеєра економить до 40% часу розробки та скорочує витрати на інфраструктуру на 20%. Ми допоможемо інтегрувати легковесний Plyr для простих завдань або потужний Video.js для адаптивних потоків та монетизації. Вартість базової інтеграції Plyr — від 300$, Video.js з HLS — від 800$. У статті розберемо конкретні приклади коду та конфігурації для обох плеєрів, а також дамо рекомендації щодо продуктивності та Core Web Vitals. Ця інформація стане в нагоді як при створенні нового сайту, так і при модернізації існуючого. Ви дізнаєтеся, як реалізувати HLS-стримінг, налаштувати аналітику перегляду та перемикання якості, і які підводні камені зустрічаються на практиці. Ми також розглянемо lazy-завантаження та оптимізацію для зниження LCP та INP.
Порівняння Video.js та Plyr
Вибір між цими двома плеєрами — компроміс між функціональністю та розміром. Plyr в 5 разів легший за Video.js, що робить його кращим вибором для простих сайтів. Але останній дає на порядок більше можливостей: HLS/DASH, DRM, рекламу з IMA SDK. Video.js обробляє HLS-потоки із затримкою в 2 рази менше, ніж нативний плеєр браузера на основі MSE, завдяки гнучкому управлінню буфером та адаптивному бітрейту.
| Характеристика | Video.js | Plyr |
|---|---|---|
| Розмір (gzip) | ~150 KB | ~28 KB |
| HLS/DASH | Так (через VHS) | Ні (тільки mp4+YouTube) |
| DRM | Widevine, PlayReady, FairPlay | Ні |
| Реклама | IMA SDK, VAST | Ні |
| Кастомні контроли | Через CSS+JS | Через опції |
| Аналітика | Події+плагіни | Події |
Plyr краще підходить для звичайних mp4-роликів, а Video.js — для медіаплатформ з адаптивним стрімінгом.
Як інтегрувати Plyr з React?
Виконайте наступні кроки:
- Встановіть пакет:
npm install plyrта типи (опціонально). - Створіть функціональний компонент з
useRefдля відеоелемента таuseEffectдля ініціалізації плеєра після монтування. - Налаштуйте контроли, субтитри та співвідношення сторін.
- Додайте аналітику перегляду через події плеєра.
- Не забудьте знищити плеєр при демонтуванні компонента викликом
player.destroy().
Приклад компонента:
import Plyr from 'plyr'
import 'plyr/dist/plyr.css'
import { useEffect, useRef } from 'react'
interface VideoPlayerProps {
src: string
poster?: string
captions?: { src: string; label: string; language: string }[]
}
export function VideoPlayer({ src, poster, captions = [] }: VideoPlayerProps) {
const videoRef = useRef<HTMLVideoElement>(null)
const playerRef = useRef<Plyr>()
useEffect(() => {
if (!videoRef.current) return
playerRef.current = new Plyr(videoRef.current, {
ratio: '16:9',
controls: ['play-large', 'play', 'progress', 'current-time',
'mute', 'volume', 'settings', 'fullscreen'],
})
// Аналітика перегляду
playerRef.current.on('timeupdate', () => {
const pct = Math.floor((playerRef.current!.currentTime / playerRef.current!.duration) * 100)
if ([25, 50, 75, 90].includes(pct)) {
analytics.track('video_progress', { percent: pct, src })
}
})
return () => { playerRef.current?.destroy() }
}, [])
return (
<video ref={videoRef} poster={poster} crossOrigin="anonymous">
<source src={src} type="video/mp4" />
{captions.map(cap => (
<track key={cap.language} kind="captions" label={cap.label} srclang={cap.language} src={cap.src} />
))}
</video>
)
}
Як налаштувати HLS-стрімінг з Video.js?
Video.js з плагіном VHS дозволяє стрімити HLS та DASH. Приклад конфігурації з перемиканням якості:
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet">
<video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto"
poster="/poster.jpg" data-setup='{}' style="width:100%;height:auto"></video>
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script>
const player = videojs('my-video', {
fluid: true,
sources: [{ src: 'https://stream.example.com/hls/video.m3u8', type: 'application/x-mpegURL' }],
html5: { vhs: { overrideNative: true, smoothQualityChange: true } },
controlBar: {
children: ['playToggle', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay',
'progressControl', 'liveDisplay', 'remainingTimeDisplay', 'customControlSpacer',
'playbackRateMenuButton', 'chaptersButton', 'subsCapsButton',
'qualitySelector', 'fullscreenToggle']
}
})
</script>
Для програмного перемикання якості встановіть плагіни @videojs/http-streaming, videojs-contrib-quality-levels та videojs-hls-quality-selector. Після підключення плеєр автоматично додасть меню вибору якості.
Video.js підтримує безліч форматів. Нижче таблиця підтримуваних кодеків:
| Кодек | Video.js | Plyr |
|---|---|---|
| H.264 | Так | Так |
| H.265 | Так (через MSE) | Ні |
| VP9 | Так | Так |
| AV1 | Так | Ні |
Продуктивність та Core Web Vitals
Відеоплеєр — один із головних винуватців поганого LCP та CLS. Ось перевірені прийоми:
- Резервуйте місце:
<div style="aspect-ratio: 16/9; background: #000;">— це усуває CLS повністю. - Використовуйте стиснений poster (50-100 KB):
<video poster="/poster-small.webp" preload="none">— економить 80% трафіку та покращує LCP на 10-15%. - Динамічний імпорт плеєра:
import('plyr').then(() => new Plyr('#player'))— завантажує JS тільки за потребою. - Ліниве завантаження з IntersectionObserver: завантажуйте плеєр тільки коли відео потрапляє в область видимості (поріг 0.1, відступ 200px). Це знижує INP на 20%.
- Генеруйте спрайт для прев'ю при наведенні:
ffmpeg -i input.mp4 -vf "fps=1/10,scale=160:-1,tile=10x10" sprites.jpg— знижує об'єм на 80%.
Додаткові метрики аналітики
Ми також відстежуємо buffered, seeked, error, fullscreenchange. Ці події допомагають побудувати вирву перегляду та виявити проблеми з відтворенням.Що входить в роботу
- Архітектурна документація (вибір плеєра, схема інтеграції з бекендом)
- Доступ до репозиторію з вихідним кодом та конфігурацією
- Інструкція по деплою та експлуатації
- Навчання команди замовника (1 година сесія)
- Технічна підтримка на місяць після здачі
Процес роботи
- Аналіз вимог: вибір плеєра, стеку (React/Vue/Vanilla), необхідних фіч. Оцінюємо бюджет та терміни безкоштовно.
- Проектування архітектури: інтеграція з бекендом, DRM, реклама (IMA SDK). Схема затверджується з замовником.
- Реалізація: конфігурація, стилізація під brand-guidelines, розробка кастомних контролів. Використовуємо готові конфігурації, що знижує вартість розробки на 20-30%.
- Тестування: кросбраузерне, десктоп/мобіла, перевірка Core Web Vitals. Займає 1-2 дні.
- Деплой та моніторинг: передача доступу, документація, підтримка місяць.
Терміни орієнтовно
- Plyr з кастомізацією: від 1 дня.
- Video.js з HLS та перемиканням якості: від 3 днів.
- DRM-інтеграція: від 1 тижня (потребує серверної частини).
Точні терміни розраховуються після аналізу вимог. Зв'яжіться з нами для консультації — ми оцінимо ваш проєкт. Замовте інтеграцію відеоплеєра та отримайте готове рішення, оптимізоване під вашу інфраструктуру.