title: HLS.js, data is loading, but no video
body: <p>I'm trying to use <a href="https://github.com/video-dev/hls.js" rel="nofollow noreferrer">hls.js</a> to embed a video from a live stream in a website. I can play the video for instance in VLC or ffplay. <code>ffmpeg -i http://192.168.11.10</code> gives some information about the stream:</p>
  <pre><code>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
  </code></pre>
  <p>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 <code>Hls.Events.MANIFEST_PARSED</code> event is never triggered.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;video id=&quot;test_video&quot; controls autoplay&gt;&lt;/video&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>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'));
  </code></pre>
  <p>I also tried this using an intermediate <code>.m3u8</code> file. I'm not sure if I have the format correct, though:</p>
  <pre><code>#EXTM3U
  #EXTINF:68400,MyVideo
  #EXT-X-TARGETDURATION:68400
  #EXT-X-STREAM-INF:BANDWIDTH=4000000,CODECS=&quot;avc1.42e02a&quot;,RESOLUTION=1280x720
  http://192.168.11.10
  #EXT-X-ENDLIST
  </code></pre>
  <p>and</p>
  <pre class="lang-js prettyprint-override"><code>hls.loadSource('test.m3u8');
  </code></pre>
  <p>Now <code>Hls.Events.MANIFEST_PARSED</code> 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 <code>Hls.Events.ERROR</code> event is triggered.</p>
  <pre><code>HLS attached to video element test_video
  hls.js:1 [log] &gt; stopLoad
  hls.js:1 [log] &gt; [subtitle-stream-controller]: IDLE-&gt;STOPPED
  hls.js:1 [log] &gt; loadSource:http://localhost/easp/test.m3u8
  hls.js:1 [log] &gt; [stream-controller]: Trigger BUFFER_RESET
  hls.js:1 [log] &gt; [level-controller]: manifest loaded, 1 level(s) found, first bitrate: 0
  hls.js:1 [log] &gt; 1 bufferCodec event(s) expected
  (index):42 Manifest loaded, found 1 quality level
  hls.js:1 [log] &gt; startLoad(-1)
  hls.js:1 [log] &gt; [level-controller]: switching to level 0 from -1
  hls.js:1 [log] &gt; [stream-controller]: STOPPED-&gt;IDLE
  hls.js:1 [log] &gt; [subtitle-stream-controller]: STOPPED-&gt;IDLE
  hls.js:1 [log] &gt; [stream-controller]: Level 0 loaded [0,0], cc [0, 0] duration:68400
  hls.js:1 [log] &gt; [buffer-controller]: Updating Media Source duration to 68400.000
  hls.js:1 [log] &gt; [stream-controller]: Loading fragment 0 cc: 0 of [0-0] level: 0, target: 0
  hls.js:1 [log] &gt; [stream-controller]: IDLE-&gt;FRAG_LOADING
  </code></pre>
  <p>My question is: How can I fix this? Or maybe more in general, how can I get more information about what is going wrong?</p>
  <p>(Note: I tried on Edge, Chrome and Firefox)</p>