Transport Stream link fails with Timeout when loading manifest

[6mo]

What version of Hls.js are you using?

1.4.14 and 1.5.0

What browser (including version) are you using?

Chrome 120, Safari, Firefox

What OS (including version) are you using?

MacOS

Test stream

No response

Configuration

{}

Additional player setup steps

No response

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://hlsjs.video-dev.org/demo and not just on my page
• [X] The issue occurs in the latest client (main branch) on https://hlsjs-dev.video-dev.org/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

import { useEffect, useRef } from "react";
import Hls from "hls.js";

const PlayerComponent = ({ selectedChannel, onBack }) => {
  const hlsRef = useRef(null);
  const videoRef = useRef(null);
  const videoLink = selectedChannel.videoLink;

  const getHls = () => {
    if (hlsRef.current === null) {
      hlsRef.current = new Hls({
        debug: true,
      });
    }
    return hlsRef.current;
  };

  useEffect(() => {
    if (Hls.isSupported()) {
      const hls = getHls({ debug: true });
      hls.on(Hls.Events.MANIFEST_LOADING, function (event, url) {
        console.log("manifest url: ", url);
      });

      hls.on(Hls.Events.MEDIA_ATTACHED, function () {
        console.log("video and hls.js are now bound together !");
      });
      hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
        console.log(
          "manifest loaded, found " + data.levels.length + " quality level"
        );
      });
      hls.on(Hls.Events.ERROR, function (event, data) {
        console.log("** Error event: ", event);
        console.log("** Error data: ", data);
      });

      hls.loadSource(videoLink);
      hls.attachMedia(videoRef.current);
    } 
  }, [videoLink]);

  return (
      <video ref={videoRef>
        <source src={videoLink} />
      </video>
  );
};

export default PlayerComponent;

Expected behaviour

To the valid the Transport Stream link (The same link is working properly through VLC)

What actually happened?

hls.js tries to download manifest which does not exist. I tries also to specify a workerPath in the conf but behavior doesn't change

Console output

rce:http://link.to/id
PlayerComponent.js:41 [log] > detachMedia
PlayerComponent.js:41 [log] > [buffer-controller] media source detaching
PlayerComponent.js:41 [log] > attachMedia
PlayerComponent.js:41 [log] > [buffer-controller] created media source: MediaSource
PlayerComponent.js:41 [log] > [stream-controller]: Trigger BUFFER_RESET
PlayerComponent.js:25 manifest url:  {url: 'http://link.to/id'}
PlayerComponent.js:25 manifest url:  {url: 'http://link.to/id'}
PlayerComponent.js:42 [log] > attachMedia
PlayerComponent.js:42 [log] > [buffer-controller] created media source: MediaSource
buffer-controller.ts:979 [log] > [buffer-controller] Media source opened
2PlayerComponent.js:29 video and hls.js are now bound together !
PlayerComponent.js:41 [warn] > Timeout while loading http://link.to/id, retrying 1/2 in 0ms
retry @ xhr-loader.ts:288
loadtimeout @ xhr-loader.ts:269
setTimeout (async)
openAndSendXhr @ xhr-loader.ts:162
loadInternal @ xhr-loader.ts:125
load @ xhr-loader.ts:84
load @ playlist-loader.ts:352
onManifestLoading @ playlist-loader.ts:154
emit @ index.js:203
emit @ hls.ts:310
trigger @ hls.ts:318
loadSource @ hls.ts:420
(anonymous) @ PlayerComponent.js:41
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
commitRootImpl @ react-dom.development.js:26935
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
Show 23 more frames
Show less
PlayerComponent.js:41 [warn] > Timeout while loading http://link.to/id , retrying 2/2 in 0ms
retry @ xhr-loader.ts:288
loadtimeout @ xhr-loader.ts:269
setTimeout (async)
openAndSendXhr @ xhr-loader.ts:162
loadInternal @ xhr-loader.ts:125
setTimeout (async)
retry @ xhr-loader.ts:300
loadtimeout @ xhr-loader.ts:269
setTimeout (async)
openAndSendXhr @ xhr-loader.ts:162
loadInternal @ xhr-loader.ts:125
load @ xhr-loader.ts:84
load @ playlist-loader.ts:352
onManifestLoading @ playlist-loader.ts:154
emit @ index.js:203
emit @ hls.ts:310
trigger @ hls.ts:318
loadSource @ hls.ts:420
(anonymous) @ PlayerComponent.js:41
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
commitRootImpl @ react-dom.development.js:26935
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
Show 27 more frames
Show less

Chrome media internals output

No response

[robwalch]

hls.js tries to download manifest which does not exist.

You need to provide a valid URL to an HLS asset.

HLS.js plays HLS assets which must include at least one Playlist. HLS.js does not play standalone Transport Stream files.

To the valid the Transport Stream link (The same link is working properly through VLC)

The fact that VLC can play TS is irrelevant.