Скрипт меню рекомендованных видео YouTube в полноэкранном режиме

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

Содержание

• Обзор архитектуры YouTube
• Основные скрипты и event listeners
• Методы исследования кода
• Способы блокировки меню
• Инструменты для разработки
• Примеры пользовательских скриптов
• Важные предупреждения

Обзор архитектуры YouTube

YouTube представляет собой сложное веб-приложение, построенное на современной JavaScript-архитектуре. При полноэкранном режиме видео сайт использует несколько компонентов для управления интерфейсом:

• YouTube Player API - основной API для управления видеоплеером
• React-компоненты - для построения динамического интерфейса
• Event Listeners - для отслеживания действий пользователя
• AJAX-запросы - для динамической загрузки контента

Меню рекомендованных видео в полноэкранном режиме является частью этой архитектуры и активируется при определенных условиях, включая прокрутку колеса мыши.

Основные скрипты и event listeners

Event listeners, отслеживающие прокрутку мыши

Основные события, которые могут управлять появлением меню:

// Пример возможных event listeners
document.addEventListener('wheel', handleWheelEvent, { passive: false });
document.addEventListener('scroll', handleScrollEvent);
videoElement.addEventListener('wheel', handleVideoWheel);

Ключевые компоненты интерфейса

1. Full-screen container - контейнер полноэкранного режима
2. Recommended videos overlay - наложение с рекомендациями
3. Scroll detection logic - логика обнаружения прокрутки

Основные файлы скриптов

YouTube разделяет код на модули, основные из которых могут включать:

• www-base.js - базовые функции и утилиты
• www-player.js - функционал плеера
• www-watch.js - страница просмотра видео
• www-fullscreen.js - полноэкранный режим

Методы исследования кода

Использование инструментов разработчика

1. Открытие DevTools

   • Нажмите F12 или Ctrl+Shift+I (Windows/Linux) или Cmd+Option+I (Mac)
   • Перейдите на вкладку “Elements” или “Elements”

2. Анализ событий

   • Используйте вкладку “Event Listeners” в DevTools
   • Найдите элементы, связанные с прокруткой
   • Проверьте event listeners на элементах плеера

3. Инспекция DOM

   • Найдите элемент с рекомендациями при появлении меню
   • Просмотрите его структуру и классы
   • Отследите родительские элементы

Поиск по коду

1. Поиск по ключевым словам

   • recommended
   • fullscreen
   • scroll
   • wheel

2. Анализ XHR запросов

   • Откройте вкладку “Network” в DevTools
   • Найдите запросы, загружающие рекомендации
   • проанализируйте параметры запроса

Browser Extension для отладки

Можно использовать расширения вроде:

• Tampermonkey для инъекции пользовательских скриптов
• ScriptSafe для контроля скриптов
• uBlock Origin для блокировки элементов

Способы блокировки меню

CSS-стили для скрытия

/* Скрытие рекомендаций через CSS */
.ytp-ce-element {
    display: none !important;
}

JavaScript-интерцепция

// Перехват wheel события
const originalAddEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(type, listener, options) {
    if (type === 'wheel' && this.closest('.html5-video-player')) {
        console.log('Wheel event intercepted on player');
        return;
    }
    originalAddEventListener.call(this, type, listener, options);
};

Пользовательские скрипты (Tampermonkey/Greasemonkey)

// ==UserScript==
// @name         YouTube Fullscreen Blocker
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Блокирует меню рекомендаций при прокрутке в полноэкранном режиме
// @author       You
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    
    function blockRecommendedMenu() {
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                mutation.addedNodes.forEach((node) => {
                    if (node.classList && node.classList.contains('ytp-ce-element')) {
                        node.style.display = 'none';
                    }
                });
            });
        });
        
        const player = document.querySelector('.html5-video-player');
        if (player) {
            observer.observe(player, { childList: true, subtree: true });
        }
    }
    
    // Запуск при изменении DOM
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', blockRecommendedMenu);
    } else {
        blockRecommendedMenu();
    }
})();

Инструменты для разработки

Расширения браузера

1. Tampermonkey - для управления пользовательскими скриптами
2. uBlock Origin - для блокировки элементов и запросов
3. ScriptSafe - для контроля выполнения скриптов
4. BrowserSpy - для анализа работы веб-страниц

Онлайн инструменты

• GitHub - для поиска существующих решений
• Stack Overflow - для обсуждения проблем
• Reddit - сообщества, посвященные кастомизации YouTube

Примеры пользовательских скриптов

Полная блокировка рекомендаций

// Блокирует загрузку рекомендаций в полноэкранном режиме
(function() {
    const blockFunction = () => {
        const recommendedContainer = document.querySelector('.ytp-ce-element');
        if (recommendedContainer) {
            recommendedContainer.remove();
        }
    };
    
    // Наблюдатель за изменениями DOM
    const observer = new MutationObserver(blockFunction);
    observer.observe(document.body, { childList: true, subtree: true });
    
    // Проверка при изменении полноэкранного режима
    document.addEventListener('fullscreenchange', blockFunction);
})();

Модификация поведения прокрутки

// Изменение поведения колеса мыши в полноэкранном режиме
document.addEventListener('wheel', (e) => {
    if (document.fullscreenElement && e.target.closest('.html5-video-player')) {
        e.preventDefault();
        // Здесь можно добавить свою логику прокрутки
    }
}, { passive: false });

Важные предупреждения

Юридические аспекты

• Нарушение условий использования - модификация YouTube может нарушать их условия обслуживания
• Авторские права - изменение интерфейса может иметь юридические последствия
• Безопасность - установка сторонних скриптов может представлять угрозу безопасности

Технические риски

• Обновления YouTube - изменения в коде могут сломать ваши скрипты
• Производительность - лишние скрипты могут замедлить работу браузера
• Совместимость - скрипты могут конфликтовать с другими расширениями

Альтернативные решения

• Использование YouTube Premium для безрекламного опыта
• Поиск альтернативных платформ с более простым интерфейсом
• Официальные настройки YouTube для управления интерфейсом

Источники

1. YouTube Developers - Player API Documentation
2. MDN Web Docs - Event Listeners
3. GitHub - YouTube Scripts Collection
4. Stack Overflow - YouTube Customization
5. Reddit - r/youtube

Заключение

• Основная логика меню рекомендаций управляется через JavaScript event listeners, отслеживающие события прокрутки мыши в полноэкранном режиме
• Для исследования кода используйте инструменты разработчика браузера, анализируйте DOM и сетевые запросы
• Блокировка меню возможна через CSS, JavaScript-интерцепцию или пользовательские скрипты
• Важно учитывать юридические риски и возможные проблемы совместимости при модификации YouTube
• Рекомендуется сначала изучить существующие решения в репозиториях GitHub и форумах перед созданием собственных скриптов

Для более точного определения конкретных скриптов YouTube, рекомендуется провести углубленный анализ их минифицированного JavaScript-кода с использованием современных инструментов декомпиляции и анализа.