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

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

📝 Пост № 173 от 15 июня 2024 | В категории Статьи | Комментариев нет

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 странички прописать следующий код:

<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>

А на странице прописываем такой код:

<video id="video" width='640px' height='410px' controls poster="https://master-sv.com/files/iptv.jpg" src="ВАШ ФАЙЛ.m3u8"></video>

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

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