Самый простой HLS HTML5 плеер для сайта Краткость - сестра таланта...
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
Подпишитесь на нашу рассылку, чтобы быть в курсе новостей!
Вашему вниманию уже 214 публикаций для ознакомления.
Оценок: (1 среднее: 5,00 из 5)
Загрузка...|
Просмотров страницы: 595 Метки: hls player ○ SS IPTV ○ Web мастеру ○ wordpress ○ Новости блога ○ Последнее обновление статьи: 17.06.2024 Короткая ссылка:
|
 |  |
Наберитесь терпения - новые публикации в процессе осмысления...
