Home • SS IPTV • WEB Мастеру • Статьи • Самый простой HLS HTML5 плеер для сайта

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

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

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

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

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

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

<video id="video" width='640px' height='410px' controls poster="http://master-sv.com/files/iptv.jpg" src="https://s.oxax.tv/6/index.m3u8?k=1717909202p021i691i051i961S30b7b32d6f34b6daf20c7bcb919de9f5"></video>

1	<video id="video" width='640px' height='410px' controls poster="http://master-sv.com/files/iptv.jpg" src="https://s.oxax.tv/6/index.m3u8?k=1717909202p021i691i051i961S30b7b32d6f34b6daf20c7bcb919de9f5"></video>

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

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

<script type="text/javascript" src="ПУТЬ до ФАЙЛА/hls.min.js"></script>
        <script>
            if (Hls.isSupported()) {
              var video = document.getElementById('video');
              var hls = new Hls();
              hls.loadSource(video.src);
              hls.attachMedia(video);
            }else{
                alert("Cannot stream HLS, use another video source");
            }
        </script>

if (Hls.isSupported()) {

var video = document.getElementById('video');

var hls = new Hls();

hls.loadSource(video.src);

hls.attachMedia(video);

}else{

alert("Cannot stream HLS, use another video source");

}

</script>

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

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