Video Controller

Обзор / Overview

Video Controller — это мощный JavaScript-модуль для управления HTML5 видео элементами на вашей веб-странице. Он предоставляет централизованный контроль над всеми аспектами воспроизведения видео, включая настройки воспроизведения, блокировку нежелательных функций и обработку динамически добавляемого контента.

Централизованное управление

Контролируйте все видео на странице через единый интерфейс с гибкими настройками для каждого элемента.

Защита контента

Блокируйте нежелательные функции: полноэкранный режим, PiP, контекстное меню и горячие клавиши.

Динамическое обнаружение

Автоматическая обработка видео, добавленных на страницу после загрузки (AJAX, SPA и т.д.).

Ключевые функции / Key Features

Гибкая конфигурация — все параметры видео могут быть настроены через центральный объект конфигурации
Блокировка нежелательных функций — полноэкранный режим, PiP, загрузка видео
Обработка статических и динамических видео — работает с контентом, добавленным после загрузки страницы
Защита от горячих клавиш — блокировка F12, Ctrl+S, Ctrl+P и других
Поддержка мультиязычности — встроенные локализации для русского и английского языков
Расширенное API — простые методы для управления видео из других скриптов
Подробное логгирование — настраиваемый уровень детализации для отладки
Совместимость — работает во всех современных браузерах (Chrome, Firefox, Safari, Edge)

Установка / Installation

Ручная установка

Скачайте файл video-controller.js и добавьте его на свою страницу:

<script src="./path/to/video-controller.js" type="text/javascript"></script>

Контроллер автоматически инициализируется при загрузке страницы с настройками по умолчанию. Для кастомизации используйте API (см. раздел Configuration).

Конфигурация / Configuration

Все настройки контроллера хранятся в объекте CONFIG. Вы можете изменить их до инициализации или через API методы.

Основные параметры

Параметр	Тип	По умолчанию	Описание
`language`	string	'ru'	Язык интерфейса ('ru' или 'en')
`targetElement`	string\|null	'body'	Целевой элемент для обработки видео (CSS селектор)

Настройки видео

Параметр	Тип	По умолчанию	Описание
`controls`	boolean	true	Показывать стандартные элементы управления
`loop`	boolean	false	Зацикливать воспроизведение
`muted`	boolean	true	Воспроизводить без звука по умолчанию
`autoplay`	boolean	false	Автоматически начинать воспроизведение
`playsInline`	boolean	true	Воспроизводить внутри страницы (важно для iOS)
`disablePictureInPicture`	boolean	true	Запретить режим "картинка в картинке"
`preload`	string	'auto'	Стратегия предзагрузки ('auto', 'metadata', 'none')
`controlsList`	string	'noplaybackrate nodownload nofullscreen'	Какие элементы управления скрыть
`fixPlaybackRate`	boolean	true	Фиксировать скорость воспроизведения
`playbackRate`	number	1	Фиксированная скорость воспроизведения (0.5-4)

Пример конфигурации

JavaScript

HTML

// Настройка перед инициализацией
window.CONFIG = {
    language: 'en',
    targetElement: '.video-container',
    videoSettings: {
        controls: true,
        muted: false,
        autoplay: true,
        playsInline: true,
        fixPlaybackRate: false,
        controlsList: 'nodownload nofullscreen'
    },
    debug: {
        logErrors: true,
        logWarnings: true
    }
};

// Инициализация контроллера
VideoControllerAPI.init();

<!DOCTYPE html>
<html>
<head>
    <title>Video Controller Example</title>
    <script src="./path/to/video-controller.js" type="text/javascript"></script>
    <script>
        // Кастомизация конфигурации
        window.CONFIG = {
            videoSettings: {
                autoplay: true,
                controlsList: 'nofullscreen'
            }
        };
    </script>
</head>
<body>
    <div class="video-container">
        <video src="video.mp4" poster="poster.jpg"></video>
    </div>
</body>
</html>

API Ссылка / API Reference | (1.5)

Video Controller предоставляет глобальный объект VideoControllerAPI с методами для управления функциональностью.

init

VideoControllerAPI.init([config])

Инициализирует контроллер видео. Может быть вызвана повторно для переинициализации.

config Object (optional) - Пользовательская конфигурация

updateConfig

VideoControllerAPI.updateConfig(newConfig)

Обновляет конфигурацию контроллера без полной переинициализации.

newConfig Object - Новая конфигурация (частичная или полная)

reinit

VideoControllerAPI.reinit()

Переинициализирует контроллер с текущей конфигурацией.

getVideoElements

VideoControllerAPI.getVideoElements()

Возвращает массив всех видео элементов, которые обрабатываются контроллером.

Array<HTMLVideoElement> - Массив видео элементов

destroy

VideoControllerAPI.destroy()

Уничтожает контроллер, освобождая ресурсы и удаляя обработчики событий.

Пример использования API (1.5)

// Получить все обрабатываемые видео элементы
const videos = VideoControllerAPI.getVideoElements();

// Обновить конфигурацию для отключения звука
VideoControllerAPI.updateConfig({
    videoSettings: {
        muted: true
    }
});

// Переинициализировать контроллер
VideoControllerAPI.reinit();

// При уничтожении страницы (SPA)
window.addEventListener('beforeunload', () => {
    VideoControllerAPI.destroy();
});

Примеры / Examples

Базовое использование

<!DOCTYPE html>
<html>
<head>
    <title>Basic Example</title>
    <script src="video-controller.js" type="text/javascript"></script>
</head>
<body>
    <video src="video.mp4" controls></video>
    <video src="another-video.mp4" autoplay muted></video>
</body>
</html>

Динамическое добавление видео

// Добавляем видео через JavaScript
const newVideo = document.createElement('video');
newVideo.src = 'dynamic-video.mp4';
document.body.appendChild(newVideo);

// Контроллер автоматически обнаружит и обработает новое видео
// благодаря MutationObserver

Кастомизация для конкретного контейнера

<div id="custom-video-container">
    <video src="video1.mp4"></video>
    <video src="video2.mp4"></video>
</div>

<script>
    // Настраиваем контроллер только для #custom-video-container
    VideoControllerAPI.init({
        targetElement: '#custom-video-container',
        videoSettings: {
            controls: false,
            autoplay: true,
            muted: true
        }
    });
</script>

Поддержка браузера / Browser Support

Video Controller поддерживает все современные браузеры:

Google Chrome (последние версии)
Mozilla Firefox (последние версии)
Safari (последние версии)
Microsoft Edge (Chromium-based)
Mobile Safari (iOS 12+)
Chrome for Android

Для работы требуется поддержка:

HTML5 Video
MutationObserver API
ES6 (для неподдерживающих браузеров используйте полифиллы)

Лицензия / License

Video Controller распространяется по лицензии MIT.

Copyright (c) Video Controller

Настоящим предоставляется бесплатное разрешение любому лицу, получившему копию данного программного обеспечения и
сопутствующей документации (далее — «Программное Обеспечение»), использовать Программное Обеспечение без ограничений,
включая, но не ограничиваясь правами на использование, копирование, изменение, объединение, публикацию, распространение,
сублицензирование и/или продажу копий Программного Обеспечения, а также лицам, которым предоставляется данное
Программное Обеспечение, при соблюдении следующих условий:

Указанное выше уведомление об авторских правах и настоящее разрешение должны быть включены во все копииили значительные
части Программного Обеспечения.

Программное Обеспечение предоставляется «КАК ЕСТЬ», без каких-либо гарантий, явных или подразумеваемых, включая,
но не ограничиваясь гарантиями товарной пригодности, пригодности для определенной цели и отсутствия нарушений прав.
Ни при каких обстоятельствах авторы или правообладатели не несут ответственности за любые претензии, убытки или иные
обязательства, будь то в результате действия договора, деликта или иным образом, возникающие из, в связи с или в результате
использования Программного Обеспечения.