2 years ago
#65110
Berend
HLS.js, data is loading, but no video
I'm trying to use hls.js to embed a video from a live stream in a website. I can play the video for instance in VLC or ffplay. ffmpeg -i http://192.168.11.10
gives some information about the stream:
Input #0, mpegts, from 'http://192.168.11.10':
Duration: N/A, start: 40921.528689, bitrate: N/A
Program 1
Stream #0:0[0x44]: Video: h264 (Baseline) ([27][0][0][0] / 0x001B), yuv420p(progressive), 1280x720, 90k tbr, 90k tbn, 180k tbc
When I try to load the video directly using hls, I can see that data is being downloaded continuously, but no video is shown. The video control shows a spinning circle, pressing the play button does nothing. The Hls.Events.MANIFEST_PARSED
event is never triggered.
<video id="test_video" controls autoplay></video>
var hls = new Hls({debug: true});
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
console.log(`HLS attached to video element ${hls.media.id}`);
hls.loadSource('http://192.168.11.10');
hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
console.log('Manifest loaded, found ' + data.levels.length + ' quality level');
});
});
hls.attachMedia(document.getElementById('test_video'));
I also tried this using an intermediate .m3u8
file. I'm not sure if I have the format correct, though:
#EXTM3U
#EXTINF:68400,MyVideo
#EXT-X-TARGETDURATION:68400
#EXT-X-STREAM-INF:BANDWIDTH=4000000,CODECS="avc1.42e02a",RESOLUTION=1280x720
http://192.168.11.10
#EXT-X-ENDLIST
and
hls.loadSource('test.m3u8');
Now Hls.Events.MANIFEST_PARSED
is triggered, and I get some more information from hls in the browser's console. However, although there is still a continuous data stream coming in from the video server, there is no video either. No Hls.Events.ERROR
event is triggered.
HLS attached to video element test_video
hls.js:1 [log] > stopLoad
hls.js:1 [log] > [subtitle-stream-controller]: IDLE->STOPPED
hls.js:1 [log] > loadSource:http://localhost/easp/test.m3u8
hls.js:1 [log] > [stream-controller]: Trigger BUFFER_RESET
hls.js:1 [log] > [level-controller]: manifest loaded, 1 level(s) found, first bitrate: 0
hls.js:1 [log] > 1 bufferCodec event(s) expected
(index):42 Manifest loaded, found 1 quality level
hls.js:1 [log] > startLoad(-1)
hls.js:1 [log] > [level-controller]: switching to level 0 from -1
hls.js:1 [log] > [stream-controller]: STOPPED->IDLE
hls.js:1 [log] > [subtitle-stream-controller]: STOPPED->IDLE
hls.js:1 [log] > [stream-controller]: Level 0 loaded [0,0], cc [0, 0] duration:68400
hls.js:1 [log] > [buffer-controller]: Updating Media Source duration to 68400.000
hls.js:1 [log] > [stream-controller]: Loading fragment 0 cc: 0 of [0-0] level: 0, target: 0
hls.js:1 [log] > [stream-controller]: IDLE->FRAG_LOADING
My question is: How can I fix this? Or maybe more in general, how can I get more information about what is going wrong?
(Note: I tried on Edge, Chrome and Firefox)
http-live-streaming
hls.js
0 Answers
Your Answer