byuik 30 January 2025
HTML player onlain
IPTV Player





Запуск процесса

Теги

Комментарии

byuik вт, 02/04/2025 - 10:30

Код плеера плеера http://byuik.pp.ua/ru/node/20

Если у вас есть вопросы по подключению к сайту задавайте .

Ця частина коду представляє собою HTML-сторінку з вбудованим JavaScript, яка реалізує **IPTV-плеєр**. Давайте розглянемо основні елементи та функціонал:

---

### **1. Структура HTML**
- **`<head>`**: Містить метадані, підключення стилів (`video-js.min.css`) та скриптів (`video.min.js`, `videojs-http-streaming.min.js`), які використовуються для роботи з відео (Video.js — бібліотека для відтворення відео).
- **`<body>`**: Містить основну структуру сторінки:
 - **`<video>`**: Елемент для відтворення відео. Використовується клас `video-js` для інтеграції з Video.js.
 - **`<select>`**: Два випадаючих списки:
   - **`#playlist-selector`**: Для вибору плейлиста (наприклад, "Українські канали", "Кіно" тощо).
   - **`#stream-selector`**: Для вибору конкретного каналу з обраного плейлиста.
 - **`<input>`**: Поле для введення URL потоку або M3U-плейлиста вручну.
 - **`<button>`**: Кнопки управління:
   - Увімкнути/вимкнути звук.
   - Відтворити потік.
   - Переключитися на попередній/наступний канал.
 - **`<div>`**: Контейнери для кнопок та елементів управління.

---

### **2. Стилі (CSS)**
- **`#iptv-player`**: Основний контейнер для плеєра з фіксованою шириною (300px) та вирівнюванням по центру.
- **`video, select, input, button`**: Загальні стилі для елементів управління (ширина, відступи, розмір шрифту).
- **`#controls`**: Контейнер для випадаючих списків та кнопок управління.
- **`#auto-switch`**: Контейнер для перемикача автопереключення каналів.
- **`#volume-control`**: Контейнер для кнопки управління гучністю.
- **`.icon-button`**: Стилі для кнопок з іконками (наприклад, 🔇, ▶️, ⏮️, ⏭️).

---

### **3. JavaScript**
JavaScript реалізує основну логіку роботи плеєра. Основні функції:

#### **Налаштування плейлистів**
- **`PLAYLISTS`**: Масив з плейлистами, де кожен плейлист містить назву (`name`) та URL (`url`). Наприклад:
 ```javascript
 const PLAYLISTS = [
   { name: "Всі канали", url: "http://byuik.pp.ua/player/m3u_files/avto-full.m3u" },
   { name: "Українські", url: "http://byuik.pp.ua/player/m3u_files/ua.m3u" },
 ];
 ```

#### **Ініціалізація Video.js**
- **`videoPlayer`**: Ініціалізується Video.js з налаштуваннями:
 - **`techOrder: ["html5"]`**: Використовується HTML5-відео.
 - **`bufferWater: 60`**: Збільшений буфер до 60 секунд для стабільного відтворення.
 - **`autoplay: true`**: Автоматичне відтворення відео.
 - **`muted: true`**: Відео без звуку за замовчуванням (через обмеження браузерів).

#### **Функції**
- **`loadSettings()`**: Завантажує збережені налаштування з `localStorage` (останній плейлист, канал, стан звуку тощо).
- **`saveSettings()`**: Зберігає поточні налаштування в `localStorage`.
- **`toggleVolume()`**: Перемикає звук (увімкнути/вимкнути).
- **`populatePlaylistSelector()`**: Заповнює випадаючий список плейлистів.
- **`loadM3U(url)`**: Завантажує M3U-плейлист з вказаного URL.
- **`parseM3U(m3uContent)`**: Парсить M3U-файл, видобуваючи назви каналів та URL потоків.
- **`playStream(url, index)`**: Відтворює потік за вказаним URL.
- **`playManualStream()`**: Відтворює потік, введений вручну в поле `#manual-url`.
- **`prevStream()`**, **`nextStream()`**: Переключає на попередній/наступний канал.
- **`init()`**: Ініціалізує плеєр при завантаженні сторінки.

#### **Обробники подій**
- **`playlistSelector.addEventListener("change")`**: Обробляє зміну плейлиста.
- **`streamSelector.addEventListener("change")`**: Обробляє вибір каналу зі списку.
- **`manualUrlInput.addEventListener("keydown")`**: Обробляє натискання Enter у полі введення URL.
- **`videoPlayer.on("ended")`**: Обробляє завершення відтворення потоку (автопереключення на наступний канал).

---

### **4. Основні можливості**
- Вибір плейлиста та каналу зі списку.
- Введення URL потоку вручну.
- Автопереключення на наступний канал у разі помилки відтворення.
- Збереження налаштувань (плейлист, канал, звук) у `localStorage`.
- Управління звуком та переключення каналів.

---

### **5. Приклад роботи**
1. Користувач обирає плейлист (наприклад, "Українські канали").
2. Плеєр завантажує список каналів з M3U-файлу.
3. Користувач обирає канал зі списку, і відео починає відтворюватися.
4. Якщо відтворення завершується або виникає помилка, плеєр автоматично переключається на наступний канал (якщо увімкнено автопереключення).
5. Користувач може вручну ввести URL потоку або M3U-плейлиста.

---

Цей код є готовим рішенням для створення IPTV-плеєра з підтримкою M3U-плейлистів, автопереключенням та збереженням налаштувань.