HomeSS IPTVWEB МастеруСтатьи • Самый простой HLS HTML5 плеер для сайта


Самый простой HLS HTML5 плеер для сайта Краткость - сестра таланта...

📝 Пост №   177  от 15 июня 2024   |   В категории SS IPTV, WEB Мастеру, Статьи   |   Комментариев нет Print

hls HTTP Live Streaming или HLS Player — это протокол потоковой передачи мультимедиа, который доставляет контент пользователям в зависимости от доступности полосы пропускания. Основными элементами HLS-потоков являются плейлисты M3U8.

Вы можете создать несколько файлов для распространения на плеер, который может адаптивно менять потоки для оптимизации воспроизведения. Поскольку технология основана на HTTP, потоковый сервер не требуется и по этому, вся логика переключения находится в плеере. HTML5 Video Tag не поддерживает ее из коробки, но с помощью простой библиотеки javascript вы можете превратить ваш скромный HTML5 Video Tag в HLS-плеер.


Для этого вам понадобится библиотека HLS.js и простой код вызова. Скрипт использует Media Source Extensions, поэтому он доступен в браузере, благо почти все современные браузеры его поддерживают.

Ниже приведен рабочий код.

В коде можно встроить-изменить пару функций:
1-я. Если вам нужно, чтобы видео запускалось с загрузкой страницы, то в код, после controls пропишите autoplay и наоборот — убрать, тогда плеер запускается кликом по кнопке play.
2-я. Если вы хотите загрузить свою картинку в качестве логотипа канала или видео, то пропишите путь к файлу jpg или png, как в примере выше. Тогда при загрузке плеера на пару-тройку секунд эта картинка появится, а, затем подключится кадр m3u вашего файла.

И, последний шаг. Для того чтобы все работало, вам необходимо разместить у себя на сайте js файл, который и будет выполнять работу плеера, а в в head или footer странички прописать следующий код:

Это самый простой метод вывода потокового видео на сайте, который только может быть. Без лишних громоздких приблуд, которые обычно используют многие блогеры.

Смотрите рабочий пример плеера:


Скачать hls.min.js можно по этой ссылке. Пользуйтесь!


Удачи и до новых встреч!
С уважением, MasterPRO

Подпишись и получай новости блога в числе первых!

Вашему вниманию уже 185 публикаций для ознакомления.




Рекомендую!

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 Оценок: (1 среднее: 5,00 из 5)
Загрузка...



Просмотров страницы: 142
Метки: hls playerSS IPTVWeb мастеруwordpressНовости блога
Обновление статьи: 17.06.2024
Короткая ссылка:
Лучшие товары по низким ценам
Народная мудрость


Наберитесь терпения - новые публикации в процессе осмысления...




За всё время работы сайта Akismet заблокировал 6,637 попыток cпама.

Поиск по сайту

Вход на сайт

  |  

Подпишись на новости блога!

Архив


Геолокация посетителя

Куча лайфхаков в моём TikTokе!

master-tiktok

Крутые товары