[HLS] Stream continues to be loaded when player is closed

[joseabernardes]

Hello.

I have encountered an unexpected behavior with the hls-video element where it continues to load the HLS stream in the background even after the element has been removed from the DOM.

This behavior is causing unnecessary network usage and resource consumption.

I can see that the hls-video element has a #destroy method, but as the syntax indicates, it's private, so we can't call it from the outside.

Versions:

• media-chrome: 4.3.1
• hls-video-element: 1.4.1
• hls-js: 1.5.20

Thanks.

[agunghapsah]

Seems the #destroy method only gets called if the src is an empty string.

const video = document.getElementById('video')
video.src = ''

In React with useRef and useLayoutEffect you can empty the src property before the component unmounts.

import type HlsVideoElement from 'hls-video-element'
import HlsVideo from 'hls-video-element/react'
import { useLayoutEffect, useRef } from 'react'

export const VideoPlayer = () => {
  const ref = useRef<HlsVideoElement>(null)
  const src = 'https://stream.mux.com/r4rOE02cc95tbe3I00302nlrHfT023Q3IedFJW029w018KxZA.m3u8'

  useLayoutEffect(() => {
    if (ref.current) ref.current.src = src
    return () => {
      if (ref.current) ref.current.src = ''
    }
  }, [])

  return (
    <HlsVideo
      ref={ref}
      src={src}
      controls
    />
  )
}

Not ideal but seems to fix the issue.