Hls.js: Correctly detach and reattach after calling hls.destroy()

[mateuscb]

I came across quite a few question on how to correctly destroy and bring in a new index.m3u8 (https://github.com/dailymotion/hls.js/issues/347, https://github.com/dailymotion/hls.js/issues/479), but I haven't been able to get it to work, or find a correct example.

The DESTROYING documentation states the exact behavior I want:

as one could want to detach and reattach a video to the instance of hls.js to handle mid-rolls

I have some global variables:

//globals
videoElement = document.getElementById("video-player-video")
hls = new Hls({
  fragLoadingTimeOut: 2000,
  fragLoadingMaxRetry: 2,
  fragLoadingRetryDelay: 0
})

//video methods
function openPlayer() {
  hls.attachMedia(videoElement)

  hls.on(Hls.Events.MEDIA_ATTACHED, () =>
    hls.loadSource(source)
  )
}

function playVideo() {
  videoElement.play()
}

function loadNewVidew(newIndexM3u8Url) {
  ...
  videoElement.source = newIndexM3u8Url
  hls.destroy()
}

My event handler for DESTROYING then does the following:

hls.on(Hls.Events.DESTROYING , () => {
   if (hls != null && videoElement != null) {
    hls.attachMedia(videoElement)
}

But that doesn't seem to be working. I tried a few other combinations of calling attach and detach, but thought it wiser to as to get the correct way, instead of it accidentally working.

What am I missing?

[mangui]

regarding your midroll use case,
are you also using hls.js to play it ? or is it just sharing the same video element ?

[mateuscb]

I'm not entirely sure I understand the difference between using hls.js to play vs sharing the same video element. I Believe I'm sharing the video element, since I use videoElement.play(). I've added some more code to hopefully help answer that question.

[jasonbodily]

@mangui, @mateuscb - Same question here. How do I use the same video element and load different sources on a command? Essentially how do you complete your loadNewVidew function? Any updates? Is the following good practice:

function changeSource(source) {
    let vid = this.getVideoEl();
    if (this.hls) { this.hls.destroy(); }
    this.hls = new Hls();
    this.hls.loadSource(source);
    this.hls.attachMedia(vid);
    this.hls.on(Hls.Events.MANIFEST_PARSED, () => { });
}

[mangui]

safest way is to use a new hls instance for each video source.

hls1.destroy();
var hls2 = new Hls();
hls2.attachMedia();
hls2.loadSource(...)

[cldons]

Hi @mangui

Thanks for clarifying about the correct usage of Hls instances.

Until reading this post, we figured that it makes sense to reuse the same Hls instance over and over again. We are implementing some kind of social feed consisting of images and video's. We came to the conclusion of reusing our Hls instance, because we want Hls to do the automatic quality control. That however turns out to be a bit wrong.

The question we have, and can't really figure it out from code: Does Hls share the quality level between instances? Or given the best practice in destroying and newing up Hls instances, is it better to manually read the quality level before a destroy and setting the startlevel for the new instance?

Thx

[OrenMe]

You can get the current instance BW estimation and set it as initial one on the new instance you create:
https://github.com/video-dev/hls.js/blob/master/docs/API.md#abrewmadefaultestimate

[qhchen2]

@mangui

You said "safest way is to use a new hls instance for each video source." What do you mean by that? Does trying to reuse the same Hls instance introduce risk of failure?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.