How to access LevelDetails?

[Nolanrulesroblox]

What do you want to do with Hls.js?

check if stream is live or not.

What have you tried so far?

base code:

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css" />
    <script src="https://cdn.plyr.io/3.6.12/plyr.polyfilled.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.1.5/hls.min.js" crossorigin="anonymous" referrerpolicy="no-referrer" integrity="sha512-O83G0C/Ypje2c3LTYElrDXQaqtKKxtu8WKlMLEMoIFs9HDeI4rMlpnn9AX5xvR3PgJpwSEBrZpxSzfE1usZqiQ=="></script>
                                    <video id="video_plyr" style="display: block;width: 100%;max-height: 520px;" controls='controls'></video>

                                                                var video = document.getElementById('video_plyr');
                                                                const player = new Plyr(video, {captions: {active: false, update: true, language: 'en'}}); 
                                                                if (Hls.isSupported()) {
                                                                  const settings = {
                                                                    "enableWorker": true,
                                                                    "lowLatencyMode": true,
                                                                    "backBufferLength": 30
                                                                  }
                                                                  var hls = new Hls(settings);
                                                                  hls.loadSource(window.localStorage.getItem('vid_m3u8'));
                                                                  hls.attachMedia(video);
                                                                  hls.on(Hls.Events.LEVEL_LOADED, function (e) {
                                                                    console.log(Hls)
                                                                  });
                                                                  player.on('languagechange', () => { setTimeout(() => hls.subtitleTrack = player.currentTrack, 50); });

tried:

hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
console.log(data);});
//attempt to find LevelDetails
hls.on(Hls.Events.LEVEL_LOADED, function (e) {
console.log(hls.levelController)
console.log(levelDetails)
console.log(hls)
console.log(hls.levelDetails)
console.log(hls._media.levelDetails)
console.log(hls.live)
});

//tried with Hls and hls

[robwalch]

The LevelDetails object in LEVEL_LOADED has a live property whose value is a boolean indicating whether the stream is live or not.

https://github.com/video-dev/hls.js/blob/v1.1.5/docs/API.md#leveldetails

hls.on(Hls.Events.LEVEL_LOADED, function (name, event) {
  console.log(event.details.live);
});

The details property can also be found on the Level object of loaded levels in hls.levels.

[Nolanrulesroblox]

The LevelDetails object in LEVEL_LOADED has a live property whose value is a boolean indicating whether the stream is live or not.

https://github.com/video-dev/hls.js/blob/v1.1.5/docs/API.md#leveldetails

hls.on(Hls.Events.LEVEL_LOADED, function (name, event) {
  console.log(event.levelDetails.live);
});

when i tried running this, nothing was logged my code:

var video = document.getElementById('video_plyr');
const player = new Plyr(video, { captions: { active: false, update: true, language: 'en' } });
if (Hls.isSupported()) {
    const settings = {
        "enableWorker": true,
        "lowLatencyMode": true,
        "backBufferLength": 30
    }
    var hls = new Hls(settings);
    hls.on(Hls.Events.LEVEL_LOADED, function (name, event) {
        console.log(event.levelDetails.live);
    });
    hls.loadSource(window.localStorage.getItem('vid_m3u8'));
    //m3u8 is live.
    hls.attachMedia(video);
    player.on('languagechange', () => { setTimeout(() => hls.subtitleTrack = player.currentTrack, 50); });
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = window.localStorage.getItem('vid_m3u8');
    video.addEventListener('canplay', function () {
    });
}
video.play();

m3u8

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:BANDWIDTH=8781824,RESOLUTION=1920x1080,NAME="1080"
__1080p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=4587520,RESOLUTION=1280x720,NAME="720"
__720p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2490368,RESOLUTION=720x480,NAME="480"
__480p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1441792,RESOLUTION=480x360,NAME="360"
__360p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=917504,RESOLUTION=320x240,NAME="240"
__240p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=655360,RESOLUTION=256x144,NAME="144"
__144p.m3u8

after a few other tries:

hls.on(Hls.Events.LEVEL_LOADED, function (name, event) {
    console.log(name)
    console.log(event);
    console.log(event.levelDetails);
    console.log(event.levelDetails.live);
});

i get these results: the event object has nothing of use, no levelDetails in the object

[Nolanrulesroblox]

after alot more digging, i found the "live" key.

console.log(event.details.live);

as far as i can see, there is no LevelDetails to be found, bug? using hls.js/1.1.5 via cloudflare CDN (minified)

[robwalch]

Not a bug, just a typo and confusion on my part. I've updated my previous comment, and updated the docs (change https://github.com/video-dev/hls.js/commit/55774c243e043c5503f466f8fe416accd4ce002d) under Runtime Events to help make it clearer https://github.com/video-dev/hls.js/blob/master/docs/API.md#runtime-events