Problem with hls m3u8 files not playing in html5 video tag

Web App Development
1

I am trying to play m3u8 file with html5 video tag using hls.js but it is not playing only on TV.
To be precise, sometimes it is played after a long wait.

Plays fine on the web.

How can I play “m3u8” files well on LG WEB OS TV?
“mp4” plays fine.

I’ve read the document below, but I don’t quite understand. Are you saying to create a new m3u8 file itself?
https://webostv.developer.lge.com/faq/2014-10-30-http-live-streaming-troubleshooting

    const video = videoRef.current
    const hls = new Hls()
    if (Hls.isSupported()) {
        hls.loadSource(item.videoUrl)
        hls.attachMedia(video)
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = item.videoUrl
    }



             <video
                className="video focus-control"
                tabIndex={0}
                ref={videoRef}
                width="100%"
                height="100%"
                preload="auto"
                loop
                muted={true}
                onPlaying={onPlay}
                onClick={handleClick}
                onKeyDown={handleClick}
                controls
            >
2

Please check Streaming Protocol and DRM first. Some HLS tags are not supported in the webOS TV, and most issues are caused by the tags. Thank you.