LINUX.ORG.RU

HLS видео в HTML5 не работает

 , , ,


0

1

<html><body>

<video width=«640» height=«480» controls>
<source src="http://192.168.200.102/hls/live.m3u8" type=«application/x-mpegURL»>
</video>

<video width=«640» height=«480» controls>
<source src="http://192.168.200.13/video.mp4" type=«video/mp4»>
</video>

</body></html>

так выглядит html код, во втором плейре всё ок (он для проверки),
а вот в первом только появляется окно плейра, а видео нет, причём если поток воспроизводить вручную (ffplay http://.....) воспроизводится нормально
это ffplay говорит про поток:
Program 0
Metadata:
variant_bitrate : 0
Stream #0:0: Video: h264 (High) ([27][0][0][0] / 0x001B), yuv420p, 1280x720, 90k tbr, 90k tbn, 180k tbc
Metadata:
variant_bitrate : 0
Stream #0:1: Audio: aac ([15][0][0][0] / 0x000F), 0 channels, fltp

так он берётся в nginx:
exec_static /usr/bin/ffmpeg -i rtsp://10.255.18.201/user=admin&password=*******&channel=12&stream=0.sdp -rtsp_transport tcp -vcodec copy -an -f flv rtmp://127.0.0.1:1935/hls/live;

что тут не так?


live.m3u8

А проблема не в формате?

Из какого-то сайта:

M3U8 формат представляет собой плейлист, применяемый различными программными утилитами для воспроизведения аудио и видео контента

Video в HTML5 не умеет в плейлисты в такой способ, насколько мне известно.

CryNet ★★★★ ()
Последнее исправление: CryNet (всего исправлений: 1)
Ответ на: комментарий от MaR

Я погуглил :)

https://stackoverflow.com/questions/19782389/playing-m3u8-files-with-html-video-tag

Советуют библиотеку Video.js, она может в HLS

Может будет интересно, человек в ответе советует пару способов:

https://qna.habr.com/q/583595

Касаемо Video.js. Вот тут есть реализация, только там видео по ссылке не доступно. Подставьте вместо него своё, чтобы проверить будет ли работать:

https://codepen.io/furkankinyas/pen/PpXKwO

CryNet ★★★★ ()
Последнее исправление: CryNet (всего исправлений: 2)
Ответ на: комментарий от anonymous

ну кстати не так их много с поддержкой hls.m3u8, нашёл пока только 2 - один платный (ultimate), второй плагин для wordpress (elite video player), может кто сталкивался, подскажет какие ещё плейры это поддерживают?

MaR ()
Ответ на: комментарий от anonymous

нифига не понятно, что не так с моим hls, онлайн плейры другие hls m3u8 воспроизводят, мой нет, хотя кодеки все те же, так же несколько .ts файлов, плагин для хрома и различные плейры типа ffmpeg воспроизводят его нормально, web плейры отказываются

MaR ()
Ответ на: комментарий от anonymous

nginx и ffmpeg

/usr/bin/ffmpeg -i rtsp://10.255.18.201/user=admin&password=*******&channel=12&stream=0.sdp -rtsp_transport tcp -vcodec copy -an -f flv rtmp://127.0.0.1:1935/hls/live;

вот вывод ffplay при воспроизведении потока, внешний адрес потока тоже есть и тоже воспроизводится плейрами

[hls,applehttp @ 0x7fc738000bc0] Opening 'http://192.168.200.102/hls/live-73547190.ts' for reading
[hls,applehttp @ 0x7fc738000bc0] Opening 'http://192.168.200.102/hls/live-75007980.ts' for reading
[http @ 0x7fc738025840] Opening 'http://192.168.200.102/hls/live-76448340.ts' for reading
[hls,applehttp @ 0x7fc738000bc0] Could not find codec parameters for stream 1 (Audio: aac ([15][0][0][0] / 0x000F), 0 channels, fltp): unspecified sample rate
Consider increasing the value for the 'analyzeduration' and 'probesize' options
Input #0, hls,applehttp, from 'http://192.168.200.102/hls/live.m3u8':
Duration: N/A, start: 817.891000, bitrate: N/A
Program 0
Metadata:
variant_bitrate : 0
Stream #0:0: Video: h264 (Baseline) ([27][0][0][0] / 0x001B), yuv420p, 1280x720, 12.50 tbr, 90k tbn, 180k tbc
Metadata:
variant_bitrate : 0
Stream #0:1: Audio: aac ([15][0][0][0] / 0x000F), 0 channels, fltp
Metadata:
variant_bitrate : 0
820.06 M-V: 0.091 fd= 0 aq= 0KB vq= 312KB sq= 0B f=10/10

MaR ()
Последнее исправление: MaR (всего исправлений: 1)
Ответ на: комментарий от anonymous

не смотря на то, что у ffmpeg есть -f hls, во всех примерах в интернете указывается именно -f flv, но и с ключём -f hls в каталоге hls в принципе не создаются никакие файлы, в отличие от -f flv

MaR ()