hls.js icon indicating copy to clipboard operation
hls.js copied to clipboard

Published 20 hours ago • verified publisher icon video-dev

Event LevelLoaded was trigged, but event LevelLoading was not trigged

Open random-vincent opened this issue 3 years ago • 3 comments

What version of Hls.js are you using?

v1.2.0

What browser (including version) are you using?

Chrome 104.0.5112.81 x64

What OS (including version) are you using?

Windows 10

Test stream

https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8

Configuration

{
  debug:true
}

Additional player setup steps

There is my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <style>
      .video-js {
        width: 1200px;
        height: 600px;
      }
      #input-url{
        width: 50em;
      }
      input{
        margin: 5px 2px;
      }
      video{
        margin-top: 10px;
      }
      
    </style>
  </head>
  <body>
    Input id3/m3u8 URL:
    <input type="text" name="" id="input-url"/><br/>
    <input type="button" value="submit" id="sub-btn" disabled/>
    <input type="button" value="clear" id="clear-btn" disabled/><br/>

    <video id="my-player" class="video-js" controls></video>
  </body>
</html>

<script>
  window.onload = ()=>{
    const textArea = document.querySelector("#input-url")
    const subBtn = document.querySelector("#sub-btn")
    const clearBtn = document.querySelector("#clear-btn")
    const videoElement = document.querySelector('#my-player');
    let hls = null;
    const valueChangeHandler = ()=>{
      if(textArea.value.length){
        subBtn.disabled = clearBtn.disabled = false
      }else{
        subBtn.disabled = clearBtn.disabled = true
      }
    }
    textArea.onchange = valueChangeHandler;
    subBtn.onclick = ()=>{
      const videoSrc = textArea.value
      if (Hls.isSupported()) {
        subBtn.disabled = true
        hls = new Hls({ debug:true });
        hls.on(Hls.Events.LEVEL_LOADING, (type, data) => {
          console.log("level_loading", type, data);
        });
        hls.on(Hls.Events.LEVEL_LOADED, (type, data) => {
          console.log("level_loaded", type, data);
        });
        hls.loadSource(videoSrc);
        hls.attachMedia(videoElement);
      }
    }
    clearBtn.onclick = ()=>{
      textArea.value = ""
      subBtn.disabled = clearBtn.disabled = true
      if(hls){
        hls.detachMedia()
        hls.stopLoad()
        hls = null
      }
    }

  
  }

</script>

Checklist

  • [X] The issue observed is not already reported by searching on Github under https://github.com/video-dev/hls.js/issues
  • [X] The issue occurs in the stable client (latest release) on https://hls-js.netlify.com/demo and not just on my page
  • [X] The issue occurs in the latest client (main branch) on https://hls-js-dev.netlify.com/demo and not just on my page
  • [X] The stream has correct Access-Control-Allow-Origin headers (CORS)
  • [X] There are no network errors such as 404s in the browser console when trying to play the stream

Steps to reproduce

  1. input stream url
  2. click anywhere empty area on the page
  3. click submit
  4. click play on video element

It would be reproduced on https://hls-js.netlify.com/demo with the test stream that I provide

Expected behaviour

Events LEVEL_LOADING and LEVEL_LOADED are triggered

What actually happened?

Event LEVEL_LOADING will not be triggered, event LEVEL_LOADED will be triggered

Console output

[log] >
hls.js@latest:1 [log] > stopLoad
hls.js@latest:1 [log] > loadSource:https://api.dogecloud.com/player/get.m3u8?vcode=5ac682e6f8231991&userId=17&ext=.m3u8
hls.js@latest:1 [log] > [stream-controller]: Trigger BUFFER_RESET
hls.js@latest:1 [log] > attachMedia
hls.js@latest:1 [log] > [buffer-controller]: Media source opened
hls.js@latest:1 [log] > [subtitle-stream-controller]: STOPPED->IDLE
14XHR finished loading: GET "<URL>".
hls.js@latest:1 [log] > [level-controller]: manifest loaded, 1 level(s) found, first bitrate: 0
hls.js@latest:1 [log] > 1 bufferCodec event(s) expected
hls.js@latest:1 [log] > startLoad(-1)
hls.js@latest:1 [log] > [level-controller]: switching to level 0 from -1
hls.js@latest:1 [log] > [stream-controller]: STOPPED->IDLE
hls.js@latest:1 [log] > [subtitle-stream-controller]: IDLE->STOPPED
hls.js@latest:1 [log] > [subtitle-stream-controller]: STOPPED->IDLE
hls.js@latest:1 [log] > [stream-controller]: Level 0 loaded [0,49], cc [0, 0] duration:260.1599000000001
hls.js@latest:1 [log] > [buffer-controller]: Updating Media Source duration to 260.160
hls.js@latest:1 [log] > [stream-controller]: Loading fragment 0 cc: 0 of [0-49] level: 0, target: 0
hls.js@latest:1 [log] > [stream-controller]: IDLE->FRAG_LOADING
id3.html:61 level_loaded hlsLevelLoaded {details: t, level: 0, id: 0, stats: i, networkDetails: XMLHttpRequest, …}
hls.js@latest:1 [log] > demuxing in webworker
hls.js@latest:1 [log] > [transmuxer-interface, main]: Starting new transmux session for sn: 0 p: -1 level: 0 id: 1
        discontinuity: true
        trackSwitch: true
        contiguous: false
        accurateTimeOffset: true
        timeOffset: 0
        initSegmentChange: true
hls.js@latest:1 [log] > [stream-controller]: Loaded fragment 0 of level 0
fdbb4eaf-0782-4f30-8568-45deb9cf975a:1 [log] >
fdbb4eaf-0782-4f30-8568-45deb9cf975a:1 [log] > [mp4-remuxer]: ISGenerated flag reset
fdbb4eaf-0782-4f30-8568-45deb9cf975a:1 [log] > [mp4-remuxer]: initPTS & initDTS reset
fdbb4eaf-0782-4f30-8568-45deb9cf975a:1 [log] > manifest codec:undefined, ADTS type:2, samplingIndex:7
fdbb4eaf-0782-4f30-8568-45deb9cf975a:1 [log] > parsed codec:mp4a.40.5, rate:22050, channels:2
fdbb4eaf-0782-4f30-8568-45deb9cf975a:1 [log] > [transmuxer.ts]: Flushed fragment 0 of level 0
hls.js@latest:1 [log] > [stream-controller]: FRAG_LOADING->PARSING
hls.js@latest:1 [log] > [stream-controller]: Init audio buffer, container:audio/mp4, codecs[selected/level/parsed]=[//mp4a.40.5]
hls.js@latest:1 [log] > [stream-controller]: Init video buffer, container:video/mp4, codecs[level/parsed]=[/avc1.64081f]
hls.js@latest:1 [log] > [buffer-controller]: creating sourceBuffer(audio/mp4;codecs=mp4a.40.5)
hls.js@latest:1 [log] > [buffer-controller]: creating sourceBuffer(video/mp4;codecs=avc1.64081f)
hls.js@latest:1 [log] > [audio-stream-controller]: InitPTS for cc: 0 found from main: 126000
hls.js@latest:1 [log] > [stream-controller]: PARSING->PARSED
hls.js@latest:1 [log] > [stream-controller]: Buffered main sn: 0 of level 0 [0.091,6.316]
hls.js@latest:1 [log] > [stream-controller]: PARSED->IDLE
hls.js@latest:1 [log] > [stream-controller]: Loading fragment 1 cc: 0 of [0-49] level: 0, target: 6.316
hls.js@latest:1 [log] > [stream-controller]: IDLE->FRAG_LOADING
hls.js@latest:1 [warn] > skipping hole, adjusting currentTime from 0 to 0.14147700000000002
e._trySkipBufferHole @ hls.js@latest:1
e.poll @ hls.js@latest:1
d.checkBuffer @ hls.js@latest:1
d.onTickEnd @ hls.js@latest:1
d.doTick @ hls.js@latest:1
e.tick @ hls.js@latest:1
d.onMediaPlaying @ hls.js@latest:1
hls.js@latest:1 [log] > [stream-controller]: media seeking to 0.141, state: FRAG_LOADING
hls.js@latest:1 [log] > [audio-stream-controller]: media seeking to 0.141, state: STOPPED
hls.js@latest:1 [log] > [subtitle-stream-controller]: media seeking to 0.141, state: IDLE
favicon.ico:1          GET https://172.18.102.90:60000/favicon.ico 404 (Not Found)
hls.js@latest:1 [log] > [stream-controller]: Media seeked to 0.141
hls.js@latest:1 [warn] > Playback stalling at @6.248491 due to low buffer ({"len":0.06733500000000081,"start":0.091477,"end":6.315826})
e._reportStall @ hls.js@latest:1
e.poll @ hls.js@latest:1
d.checkBuffer @ hls.js@latest:1
d.onTickEnd @ hls.js@latest:1
d.doTick @ hls.js@latest:1
e.tick @ hls.js@latest:1
setInterval (async)
e.setInterval @ hls.js@latest:1
d.startLoad @ hls.js@latest:1
(anonymous) @ hls.js@latest:1
a.startLoad @ hls.js@latest:1
u.onManifestLoaded @ hls.js@latest:1
u.emit @ hls.js@latest:1
a.emit @ hls.js@latest:1
a.trigger @ hls.js@latest:1
e.handleTrackOrLevelPlaylist @ hls.js@latest:1
e.loadsuccess @ hls.js@latest:1
e.readystatechange @ hls.js@latest:1
XMLHttpRequest.send (async)
e.loadInternal @ hls.js@latest:1
e.load @ hls.js@latest:1
e.load @ hls.js@latest:1
e.onManifestLoading @ hls.js@latest:1
u.emit @ hls.js@latest:1
a.emit @ hls.js@latest:1
a.trigger @ hls.js@latest:1
a.loadSource @ hls.js@latest:1
subBtn.onclick @ id3.html:63
hls.js@latest:1 [warn] > [playback-rate-controller]: Stall detected, adjusting target latency
n.onError @ hls.js@latest:1
u.emit @ hls.js@latest:1
a.emit @ hls.js@latest:1
a.trigger @ hls.js@latest:1
e._reportStall @ hls.js@latest:1
e.poll @ hls.js@latest:1
d.checkBuffer @ hls.js@latest:1
d.onTickEnd @ hls.js@latest:1
d.doTick @ hls.js@latest:1
e.tick @ hls.js@latest:1
setInterval (async)
e.setInterval @ hls.js@latest:1
d.startLoad @ hls.js@latest:1
(anonymous) @ hls.js@latest:1
a.startLoad @ hls.js@latest:1
u.onManifestLoaded @ hls.js@latest:1
u.emit @ hls.js@latest:1
a.emit @ hls.js@latest:1
a.trigger @ hls.js@latest:1
e.handleTrackOrLevelPlaylist @ hls.js@latest:1
e.loadsuccess @ hls.js@latest:1
e.readystatechange @ hls.js@latest:1
XMLHttpRequest.send (async)
e.loadInternal @ hls.js@latest:1
e.load @ hls.js@latest:1
e.load @ hls.js@latest:1
e.onManifestLoading @ hls.js@latest:1
u.emit @ hls.js@latest:1
a.emit @ hls.js@latest:1
a.trigger @ hls.js@latest:1
a.loadSource @ hls.js@latest:1
subBtn.onclick @ id3.html:63
hls.js@latest:1 [log] > [stream-controller]: Loaded fragment 1 of level 0
fdbb4eaf-0782-4f30-8568-45deb9cf975a:1 [log] > [transmuxer.ts]: Flushed fragment 1 of level 0
hls.js@latest:1 [log] > [stream-controller]: FRAG_LOADING->PARSING
hls.js@latest:1 [log] > [stream-controller]: PARSING->PARSED
hls.js@latest:1 [warn] > playback not stuck anymore @6.311227, after 536ms
e.poll @ hls.js@latest:1
d.checkBuffer @ hls.js@latest:1
d.onTickEnd @ hls.js@latest:1
d.doTick @ hls.js@latest:1
e.tick @ hls.js@latest:1
d.onMediaPlaying @ hls.js@latest:1
hls.js@latest:1 [log] > [stream-controller]: Buffered main sn: 1 of level 0 [0.091,15.929]
hls.js@latest:1 [log] > [stream-controller]: PARSED->IDLE
hls.js@latest:1 [log] > [stream-controller]: Loading fragment 2 cc: 0 of [0-49] level: 0, target: 15.929
hls.js@latest:1 [log] > [stream-controller]: IDLE->FRAG_LOADING
hls.js@latest:1 [log] > [stream-controller]: Loaded fragment 2 of level 0
fdbb4eaf-0782-4f30-8568-45deb9cf975a:1 [log] > [transmuxer.ts]: Flushed fragment 2 of level 0
hls.js@latest:1 [log] > [stream-controller]: FRAG_LOADING->PARSING
hls.js@latest:1 [log] > [stream-controller]: PARSING->PARSED
hls.js@latest:1 [log] > [stream-controller]: Buffered main sn: 2 of level 0 [0.091,18.344]
hls.js@latest:1 [log] > [stream-controller]: PARSED->IDLE
hls.js@latest:1 [log] > [stream-controller]: Loading fragment 3 cc: 0 of [0-49] level: 0, target: 18.344
hls.js@latest:1 [log] > [stream-controller]: IDLE->FRAG_LOADING
hls.js@latest:1 [log] > [stream-controller]: Loaded fragment 3 of level 0
fdbb4eaf-0782-4f30-8568-45deb9cf975a:1 [log] > [transmuxer.ts]: Flushed fragment 3 of level 0
hls.js@latest:1 [log] > [stream-controller]: FRAG_LOADING->PARSING
hls.js@latest:1 [log] > [stream-controller]: PARSING->PARSED
hls.js@latest:1 [log] > [stream-controller]: Buffered main sn: 3 of level 0 [0.091,20.619]
hls.js@latest:1 [log] > [stream-controller]: PARSED->IDLE
hls.js@latest:1 [log] > [stream-controller]: Loading fragment 4 cc: 0 of [0-49] level: 0, target: 20.619
hls.js@latest:1 [log] > [stream-controller]: IDLE->FRAG_LOADING
hls.js@latest:1 [log] > [stream-controller]: Loaded fragment 4 of level 0
fdbb4eaf-0782-4f30-8568-45deb9cf975a:1 [log] > [transmuxer.ts]: Flushed fragment 4 of level 0
hls.js@latest:1 [log] > [stream-controller]: FRAG_LOADING->PARSING
hls.js@latest:1 [log] > [stream-controller]: PARSING->PARSED
hls.js@latest:1 [log] > [stream-controller]: Buffered main sn: 4 of level 0 [0.091,26.656]
hls.js@latest:1 [log] > [stream-controller]: PARSED->IDLE
hls.js@latest:1 [log] > [stream-controller]: Loading fragment 5 cc: 0 of [0-49] level: 0, target: 26.657
hls.js@latest:1 [log] > [stream-controller]: IDLE->FRAG_LOADING
hls.js@latest:1 [log] > [stream-controller]: Loaded fragment 5 of level 0
fdbb4eaf-0782-4f30-8568-45deb9cf975a:1 [log] > [transmuxer.ts]: Flushed fragment 5 of level 0
hls.js@latest:1 [log] > [stream-controller]: FRAG_LOADING->PARSING
hls.js@latest:1 [log] > [stream-controller]: PARSING->PARSED
hls.js@latest:1 [log] > [stream-controller]: Buffered main sn: 5 of level 0 [0.091,30.650]
hls.js@latest:1 [log] > [stream-controller]: PARSED->IDLE
hls.js@latest:1 [log] > [stream-controller]: Loading fragment 6 cc: 0 of [0-49] level: 0, target: 30.65
hls.js@latest:1 [log] > [stream-controller]: IDLE->FRAG_LOADING
hls.js@latest:1 [log] > [stream-controller]: Loaded fragment 6 of level 0
fdbb4eaf-0782-4f30-8568-45deb9cf975a:1 [log] > [transmuxer.ts]: Flushed fragment 6 of level 0
hls.js@latest:1 [log] > [stream-controller]: FRAG_LOADING->PARSING
hls.js@latest:1 [log] > [stream-controller]: PARSING->PARSED
hls.js@latest:1 [log] > [stream-controller]: Buffered main sn: 6 of level 0 [0.091,35.666]
hls.js@latest:1 [log] > [stream-controller]: PARSED->IDLE
hls.js@latest:1 [log] > [stream-controller]: Loading fragment 7 cc: 0 of [0-49] level: 0, target: 35.666
hls.js@latest:1 [log] > [stream-controller]: IDLE->FRAG_LOADING
hls.js@latest:1 [log] > [stream-controller]: Loaded fragment 7 of level 0
hls.js@latest:1 [log] > [stream-controller]: FRAG_LOADING->PARSING
fdbb4eaf-0782-4f30-8568-45deb9cf975a:1 [log] > [transmuxer.ts]: Flushed fragment 7 of level 0
hls.js@latest:1 [log] > [stream-controller]: PARSING->PARSED
hls.js@latest:1 [log] > [stream-controller]: Buffered main sn: 7 of level 0 [0.091,41.424]
hls.js@latest:1 [log] > [stream-controller]: PARSED->IDLE
hls.js@latest:1 [log] > [stream-controller]: Loading fragment 8 cc: 0 of [0-49] level: 0, target: 41.424
hls.js@latest:1 [log] > [stream-controller]: IDLE->FRAG_LOADING
hls.js@latest:1 [log] > [stream-controller]: Loaded fragment 8 of level 0
fdbb4eaf-0782-4f30-8568-45deb9cf975a:1 [log] > [transmuxer.ts]: Flushed fragment 8 of level 0
hls.js@latest:1 [log] > [stream-controller]: FRAG_LOADING->PARSING
hls.js@latest:1 [log] > [stream-controller]: PARSING->PARSED
hls.js@latest:1 [log] > [stream-controller]: Buffered main sn: 8 of level 0 [0.091,46.115]
hls.js@latest:1 [log] > [stream-controller]: PARSED->IDLE
hls.js@latest:1 [log] > [stream-controller]: Loading fragment 9 cc: 0 of [0-49] level: 0, target: 46.115
hls.js@latest:1 [log] > [stream-controller]: IDLE->FRAG_LOADING

Chrome media internals output

No response

random-vincent avatar Aug 16 '22 09:08 random-vincent

Not a Contribution

LEVEL_LOADING is triggered when an EXT-X-STREAM-INF playlist, listed in a multi-variant playlist, is requested.

In this case you are loading a media playlist directly with hls.loadSource so LEVEL_LOADING is not fired. HLS.js can not know it is a media playlist (a level) until it is loaded and parsed. At the point it is recognized as a level, HLS.js fires LEVEL_LOADED as it does when the playlist loaded was a level.

If you want the LEVEL_LOADING event to fire, use a multi-variant playlist with HLS.js.

robwalch avatar Aug 16 '22 23:08 robwalch

@robwalch

The API documentation does not explain this event in detail. What you said the event triggering mechanism and the understanding of the name of the event confuses me. The name of the event and the simple explanation (Hls.Events.LEVEL_LOADING - fired when a level playlist *loading starts* ) make me think that it is bound to trigger and correspond to another event one-to-one.

Another question, how to make LEVEL_LOADING necessarily trigger whenever it is? Can it be done?

random-vincent avatar Aug 17 '22 03:08 random-vincent

Hi @random-vincent,

Thank you for the feedback. If you'd like to modify the documentation, please submit a PR. LEVEL_LOADING could be updated to indicate that it does not fire when the only playlist loaded is done with loadSource. Something like:

"fired when a level playlist is requested (unless it is the only playlist loaded using hls.loadSource)"

robwalch avatar Aug 17 '22 17:08 robwalch