hls.js icon indicating copy to clipboard operation
hls.js copied to clipboard

Video is not playing

Open athulbabu835 opened this issue 2 months ago • 1 comments

What do you want to do with Hls.js?

Hi Community,

I’m working with an HLS streaming setup and facing an issue where certain streams are not playing in HLS Player, even though they play correctly in other players (like VLC / Safari / Tizen built-in player,webos).

Here are two sample master playlist entries that fail:

#EXTM3U #EXT-X-VERSION:6 #EXT-X-STREAM-INF:BANDWIDTH=140800,RESOLUTION=720x576,CODECS="avc1.4d401e,mp4a.40.2" 162_0.m3u8

and playing for

#EXTM3U #EXT-X-VERSION:6 #EXT-X-STREAM-INF:BANDWIDTH=140800,RESOLUTION=1920x1080,CODECS="avc1.640028,mp4a.40.2" 344_0.m3u8

Does hls fully support streams with these codec tags (avc1.4d401e)?

What have you tried so far?

async function videoPlayFun(url) { const videoElement = document.getElementById("myVideo"); if (!videoElement) return;

// --- 1. INITIALIZE PLAYER (ONLY ONCE) --- if (!hlsInstance) { const accessToken = "xxxxxxxxxxxx";

// Initialize HLS.js with configuration
if (Hls.isSupported()) {
  hlsInstance = new Hls({
    xhrSetup: function (xhr) {
      xhr.setRequestHeader("Authorization", `Bearer ${accessToken}`);
    },
    lowLatencyMode: false,
    capLevelToPlayerSize: true,
    maxBufferLength: 60,
    maxMaxBufferLength: 120,
    liveSyncDurationCount: 3,
    liveMaxLatencyDurationCount: 6,
  });

  // Attach the media element once
  hlsInstance.attachMedia(videoElement);
  
  // Set up error handlers once
  hlsInstance.on(Hls.Events.ERROR, (event, data) => {
    console.error("HLS.js Error:", data);

    if (data.type === Hls.ErrorTypes.MEDIA_ERROR && data.fatal) {
      console.warn("Attempting aggressive recovery for fatal media error...");
      hlsInstance.recoverMediaError();
      return;
    }

    if (data.fatal) {
      if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
        console.warn("⚠️ Network error, retry load…");
        hlsInstance.startLoad();
      } else {
        console.error("❌ Fatal HLS error -> attempting graceful recovery or failover.");
        // Add more robust error handling here (e.g., fall back to Shaka or show error message)
      }
    }
  });
  
  // Add a listener for when playback starts
  hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
    // Optional: Log zapping time here (from channel-switch-start to manifest-parsed)
    videoElement.play().catch(() => {});
  });

} else {
    // Fallback or error if HLS is not supported
    console.error("HLS is not supported on this device.");
    return;
}

}

if (hlsInstance) { hlsInstance.loadSource(url); }

// Optional: For fast zapping, you may need to explicitly play/load again // in some scenarios, but loadSource and the attached media should handle it. videoElement.play().catch(() => {}); }

athulbabu835 avatar Dec 09 '25 07:12 athulbabu835

The browser or device has to support the codec, not HLS.js.

What browser and OS are you running into this issue on?

What errors are logged when adding debug: true to the config?

robwalch avatar Dec 09 '25 16:12 robwalch