замени стандартный видио плеир для зрителя на болие подходящий для просмотров стрима <!-- public/index.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Платформа трансляций</title>
    <link rel="stylesheet" href="css/styles.css">
    <!-- Подключение Google Fonts для лучшей типографики -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <!-- Подключение иконок Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="container" id="mainContainer">
        <!-- Навигационная панель -->
        <nav class="navbar">
            <div class="navbar-brand">
                <i class="fas fa-stream"></i> Платформа Трансляций
            </div>
            <div class="navbar-buttons">
                <button id="startStreamerBtnNav" class="btn">Начать трансляцию</button>
                <button id="startViewerBtnNav" class="btn">Смотреть трансляции</button>
            </div>
        </nav>

        <!-- Главный экран -->
        <div id="welcomeScreen" class="screen active">
            <div class="welcome-content">
                <h1>Добро пожаловать на платформу трансляций</h1>
                <p>Начните свою трансляцию или присоединяйтесь к зрителям</p>
                <div class="buttons">
                    <button id="startStreamerBtnMain" class="btn primary">Начать трансляцию</button>
                    <button id="startViewerBtnMain" class="btn secondary">Смотреть трансляции</button>
                </div>
            </div>
        </div>











        <!-- Экран стримера -->
        <div id="streamerScreen" class="screen">
            <div class="streamer-header">
                <h2>Начать трансляцию</h2>
                <button id="backToMainFromStreamer" class="btn-icon"><i class="fas fa-arrow-left"></i></button>
            </div>
            <div class="streamer-content">
                <!-- Видео для локального отображения -->
                <video id="localVideo" autoplay muted playsinline></video>
                <!-- Видео для отображения загруженного файла -->
                <video id="uploadedVideo" autoplay muted playsinline style="display: none;"></video>

                <!-- Выбор источника трансляции -->
                <div class="source-selection">
                    <label class="radio-label">
                        <input type="radio" name="source" value="camera" checked>
                        <i class="fas fa-video"></i> Веб-камера
                    </label>
                    <label class="radio-label">
                        <input type="radio" name="source" value="file">
                        <i class="fas fa-file-video"></i> Видео-файл
                    </label>
                </div>

                <!-- Загрузка видео-файла -->
                <div id="fileInputContainer" class="file-input-container" style="display: none;">
                    <input type="file" id="videoFileInput" accept="video/*">
                </div>

                <!-- Выбор категории трансляции -->
                <div class="category-selection">
                    <label for="category">Категория:</label>
                    <select id="category">
                        <option value="gaming">Игры</option>
                        <option value="music">Музыка</option>
                        <option value="education">Образование</option>
                        <option value="other">Другое</option>
                    </select>
                </div>

                <!-- Кнопки управления трансляцией -->
                <div class="buttons">
                    <button id="startStreamBtn" class="btn primary">Начать стрим</button>
                    <button id="endStreamBtn" class="btn danger" style="display:none;">Закончить стрим</button>
                </div>

                <!-- Информация о трансляции -->
                <div id="streamInfo" class="stream-info">
                    <p>Трансляция активна! Ссылка для зрителей:</p>
                    <input type="text" id="streamLink" readonly>
                    <!-- Прогресс-бар -->
                    <div id="progressContainer">
                        <progress id="videoProgress" value="0" max="100"></progress>
                        <span id="progressLabel">0%</span>
                    </div>
                    <!-- Чат -->
                    <div class="chatContainer">
                        <div class="chatMessages"></div>
                        <form class="chatForm">
                            <input type="text" class="chatInput" placeholder="Введите сообщение...">
                            <button type="submit" class="btn send-btn"><i class="fas fa-paper-plane"></i></button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Экран зрителя -->
        <div id="viewerScreen" class="screen">
            <div class="viewer-header">
                <h2>Активные трансляции</h2>
                <button id="backToMainFromViewer" class="btn-icon"><i class="fas fa-arrow-left"></i></button>
            </div>
            <!-- Фильтр по категориям -->
            <div class="filter-section">
                <label for="filterCategory">Фильтр по категории:</label>
                <select id="filterCategory">
                    <option value="all">Все</option>
                    <option value="gaming">Игры</option>
                    <option value="music">Музыка</option>
                    <option value="education">Образование</option>
                    <option value="other">Другое</option>
                </select>
            </div>
            <ul id="streamsList" class="streams-list">
                <!-- Список активных стримов будет динамически заполнен -->
            </ul>
        </div>

        <!-- Экран просмотра трансляции -->
        <div id="streamScreen" class="screen">
            <div class="stream-header">
                <h2>Просмотр трансляции</h2>
                <button id="backToViewer" class="btn-icon"><i class="fas fa-arrow-left"></i></button>
            </div>
            <div id="streamContainer" class="stream-container">
                <video id="remoteVideo" autoplay playsinline controls></video>
                <!-- Чат -->
                <div class="chatContainer">
                    <div class="chatMessages"></div>
                    <form class="chatForm">
                        <input type="text" class="chatInput" placeholder="Введите сообщение...">
                        <button type="submit" class="btn send-btn"><i class="fas fa-paper-plane"></i></button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Подключение Socket.IO -->
    <script src="/socket.io/socket.io.js"></script>
    <!-- Подключение основного скрипта -->
    <script src="js/main.js"></script>
</body>
</html>