NanoPlayer 🎬

NanoPlayer — лёгкий, dependency-free HTML5 видеоплеер на чистом JavaScript
с интерфейсом в стиле YouTube.

Проект создаётся как open-source и подходит как для личных, так и для коммерческих проектов.

Возможности

• Play / Pause (кнопка и пробел)
• Превью видео (poster или первый кадр автоматически)
• Прогресс и перемотка
• Громкость (выпадающее меню)
• Скорость воспроизведения
• Информация о плеере
• Полноэкранный режим
• Управление с клавиатуры
• Кастомный UI (без native controls)
• Без зависимостей

Установка

Через npm:

npm install nanoplayer

В html

<link rel="stylesheet" href="https://unpkg.com/nanoplayer@latest/dist/nanoplayer.css">
<script src="https://unpkg.com/nanoplayer@latest/dist/nanoplayer.umd.js"></script>

Допольнительный cdn

https://cdn.jsdelivr.net/npm/nanoplayer@latest/dist/nanoplayer.umd.js
https://cdn.jsdelivr.net/npm/nanoplayer@latest/dist/nanoplayer.css

ES модули

https://cdn.jsdelivr.net/npm/nanoplayer@latest/dist/nanoplayer.es.js
https://cdn.jsdelivr.net/npm/nanoplayer@latest/dist/nanoplayer.css

https:/unpkg.com/nanoplayer@latest/dist/nanoplayer.es.js
https:/unpkg.com/nanoplayer@latest/dist/nanoplayer.css

Быстрый старт

HTML (UMD):

<link rel="stylesheet" href="dist/style.css">

<div id="player"></div>

<script src="dist/nanoplayer.umd.js"></script>
<script>
  new NanoPlayer('#player', {
    src: 'video.mp4',
    poster: 'poster.jpg' // необязательно
  })
</script>

ES Modules:

import NanoPlayer from 'nanoplayer'
import 'nanoplayer/dist/style.css'

new NanoPlayer('#player', {
  src: 'video.mp4'
})

Важно: ES-модули должны запускаться через HTTP-сервер, не file://

Параметры

new NanoPlayer(selector, options)

options:

• src (string) — путь к видео
• poster (string | null) — превью (если не указано, берётся первый кадр)
• autoplay (boolean) — автозапуск
• volume (number) — громкость (0–1)
• playbackRates (number[]) — доступные скорости

Управление с клавиатуры

• Space — Play / Pause
• Esc — выход из fullscreen

Пробел не перехватывается, если фокус находится в input, textarea или select.

Стилизация

NanoPlayer не влияет на глобальные стили страницы.
Все CSS-классы имеют префикс nano-.

Можно:

• переопределять стили
• писать собственные темы
• полностью заменить style.css

Архитектура

.nano-player
├── video
├── overlay (big play + info)
├── controls
│ ├── left (play)
│ ├── center (progress)
│ └── right (menus)
│ ├── volume
│ ├── settings
│ └── info

Каждое меню — отдельный popover, как в YouTube.

Структура проекта

nanoplayer/
├── src/
│ ├── NanoPlayer.js
│ └── index.js
│ └── style.css
├── dist/
│ ├── nanoplayer.umd.js
│ └── nanoplayer.es.js │ └── nanoplayer.umd.js