Video is not playing #7671
Description
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(() => {});
}