fallback of formats
This commit is contained in:
Simon
@@ -46,74 +46,34 @@ App.player = App.player || {};
|
||||
return;
|
||||
}
|
||||
const useMobileFullscreen = isMobilePlayback() || isTvPlayback();
|
||||
let playbackStarted = false;
|
||||
|
||||
if (!state.playerHome) {
|
||||
state.playerHome = video.parentElement;
|
||||
}
|
||||
|
||||
// Normalize stream URL + optional referer forwarding.
|
||||
let resolved = { url: '', referer: '' };
|
||||
if (App.videos && typeof App.videos.resolveStreamSource === 'function') {
|
||||
resolved = App.videos.resolveStreamSource(source);
|
||||
} else if (typeof source === 'string') {
|
||||
resolved.url = source;
|
||||
} else if (source && typeof source === 'object') {
|
||||
resolved.url = source.url || '';
|
||||
}
|
||||
if (!resolved.referer && resolved.url) {
|
||||
try {
|
||||
resolved.referer = `${new URL(resolved.url).origin}/`;
|
||||
} catch (err) {
|
||||
resolved.referer = '';
|
||||
// Resolve an ordered list of candidate sources (best first). When a
|
||||
// source's URL fails to load we fall back to the next one.
|
||||
let sources = [];
|
||||
if (App.videos && typeof App.videos.resolveStreamSources === 'function') {
|
||||
sources = App.videos.resolveStreamSources(source);
|
||||
} else {
|
||||
let resolved = { url: '', referer: '' };
|
||||
if (App.videos && typeof App.videos.resolveStreamSource === 'function') {
|
||||
resolved = App.videos.resolveStreamSource(source);
|
||||
} else if (typeof source === 'string') {
|
||||
resolved.url = source;
|
||||
} else if (source && typeof source === 'object') {
|
||||
resolved.url = source.url || '';
|
||||
}
|
||||
if (resolved.url) sources = [resolved];
|
||||
}
|
||||
if (!resolved.url) {
|
||||
if (!sources.length) {
|
||||
if (App.ui && App.ui.showError) {
|
||||
App.ui.showError('Unable to play this stream.');
|
||||
}
|
||||
clearLoading();
|
||||
return;
|
||||
}
|
||||
const refererParam = resolved.referer ? `&referer=${encodeURIComponent(resolved.referer)}` : '';
|
||||
const userAgentParam = resolved.userAgent ? `&User-Agent=${encodeURIComponent(resolved.userAgent)}` : '';
|
||||
const liveParam = resolved.isLive ? '&live=1' : '';
|
||||
const streamUrl = `/api/stream?url=${encodeURIComponent(resolved.url)}${refererParam}${userAgentParam}${liveParam}`;
|
||||
let isHls = /\.m3u8($|\?)/i.test(resolved.url);
|
||||
let isDirectMedia = /\.(mp4|m4v|m4s|webm|ts|mov)($|\?)/i.test(resolved.url);
|
||||
// Live cam streams resolve (server-side) to HLS; treat them as HLS up
|
||||
// front so we skip the content-type HEAD probe and go straight to it.
|
||||
if (resolved.isLive) {
|
||||
isHls = true;
|
||||
isDirectMedia = false;
|
||||
}
|
||||
|
||||
// Cleanup existing player instance to prevent aborted bindings.
|
||||
if (state.hlsPlayer) {
|
||||
state.hlsPlayer.stopLoad();
|
||||
state.hlsPlayer.detachMedia();
|
||||
state.hlsPlayer.destroy();
|
||||
state.hlsPlayer = null;
|
||||
}
|
||||
|
||||
// Reset the video element before re-binding a new source.
|
||||
video.pause();
|
||||
video.removeAttribute('src');
|
||||
video.load();
|
||||
|
||||
if (!isHls) {
|
||||
try {
|
||||
const headResp = await fetch(streamUrl, { method: 'HEAD' });
|
||||
const contentType = headResp.headers.get('Content-Type') || '';
|
||||
if (contentType.includes('application/vnd.apple.mpegurl')) {
|
||||
isHls = true;
|
||||
} else if (contentType.startsWith('video/') || contentType.startsWith('audio/')) {
|
||||
isDirectMedia = true;
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('Failed to detect stream type', err);
|
||||
}
|
||||
}
|
||||
|
||||
if (useMobileFullscreen) {
|
||||
const host = getMobileVideoHost();
|
||||
@@ -149,107 +109,172 @@ App.player = App.player || {};
|
||||
}
|
||||
};
|
||||
|
||||
const startPlayback = () => {
|
||||
if (playbackStarted) return;
|
||||
playbackStarted = true;
|
||||
clearLoading();
|
||||
const playPromise = video.play();
|
||||
if (playPromise && typeof playPromise.catch === 'function') {
|
||||
playPromise.catch(() => {});
|
||||
}
|
||||
if (state.playerMode === 'mobile') {
|
||||
if (video.readyState >= 1) {
|
||||
requestFullscreen();
|
||||
} else {
|
||||
video.addEventListener('loadedmetadata', requestFullscreen, { once: true });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Confirmed direct media (mp4/webm/…) never needs hls.js; everything
|
||||
// else might, so pull it in now that the type has been sniffed.
|
||||
if (!window.Hls && (isHls || !isDirectMedia)) {
|
||||
try {
|
||||
await App.ensureHls();
|
||||
} catch (err) {
|
||||
// Fall back to native playback below.
|
||||
}
|
||||
}
|
||||
|
||||
const canUseHls = !!(window.Hls && window.Hls.isSupported());
|
||||
const prefersHls = isHls || (canUseHls && !isDirectMedia && !video.canPlayType('application/vnd.apple.mpegurl'));
|
||||
let hlsTried = false;
|
||||
let nativeTried = false;
|
||||
let usingHls = false;
|
||||
|
||||
const startNative = () => {
|
||||
if (nativeTried) return;
|
||||
nativeTried = true;
|
||||
usingHls = false;
|
||||
video.src = streamUrl;
|
||||
startPlayback();
|
||||
};
|
||||
|
||||
const startHls = (allowFallback) => {
|
||||
if (!canUseHls || hlsTried) return false;
|
||||
hlsTried = true;
|
||||
usingHls = true;
|
||||
state.hlsPlayer = new window.Hls();
|
||||
state.hlsPlayer.loadSource(streamUrl);
|
||||
state.hlsPlayer.attachMedia(video);
|
||||
state.hlsPlayer.on(window.Hls.Events.MANIFEST_PARSED, function() {
|
||||
startPlayback();
|
||||
});
|
||||
startPlayback();
|
||||
state.hlsPlayer.on(window.Hls.Events.ERROR, function(event, data) {
|
||||
if (data && data.fatal) {
|
||||
const shouldFallback = allowFallback && !nativeTried && !isHls;
|
||||
if (state.hlsPlayer) {
|
||||
state.hlsPlayer.destroy();
|
||||
state.hlsPlayer = null;
|
||||
}
|
||||
if (shouldFallback) {
|
||||
startNative();
|
||||
return;
|
||||
}
|
||||
clearLoading();
|
||||
if (App.ui && App.ui.showError) {
|
||||
App.ui.showError('Unable to play this stream.');
|
||||
}
|
||||
App.player.close();
|
||||
}
|
||||
});
|
||||
return true;
|
||||
};
|
||||
|
||||
if (prefersHls) {
|
||||
if (!startHls(true)) {
|
||||
if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
startNative();
|
||||
} else {
|
||||
console.error("HLS not supported in this browser.");
|
||||
if (App.ui && App.ui.showError) {
|
||||
App.ui.showError('HLS is not supported in this browser.');
|
||||
}
|
||||
clearLoading();
|
||||
return;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
startNative();
|
||||
}
|
||||
|
||||
video.onerror = () => {
|
||||
if (!usingHls && canUseHls && !hlsTried && !isDirectMedia) {
|
||||
if (startHls(true)) return;
|
||||
}
|
||||
const failPlayback = (message) => {
|
||||
clearLoading();
|
||||
if (App.ui && App.ui.showError) {
|
||||
App.ui.showError('Video failed to load.');
|
||||
App.ui.showError(message);
|
||||
}
|
||||
App.player.close();
|
||||
};
|
||||
|
||||
// Attempts to play a single source. On a fatal failure it advances to
|
||||
// the next candidate, or reports an error once the list is exhausted.
|
||||
const attempt = async (index) => {
|
||||
const resolved = sources[index];
|
||||
const hasNext = index + 1 < sources.length;
|
||||
let playbackStarted = false;
|
||||
let settled = false;
|
||||
|
||||
// Advances to the next source (or fails) exactly once per attempt,
|
||||
// guarding against overlapping error callbacks.
|
||||
const advanceOrFail = (message) => {
|
||||
if (settled) return;
|
||||
settled = true;
|
||||
if (hasNext) {
|
||||
attempt(index + 1);
|
||||
} else {
|
||||
failPlayback(message);
|
||||
}
|
||||
};
|
||||
|
||||
const refererParam = resolved.referer ? `&referer=${encodeURIComponent(resolved.referer)}` : '';
|
||||
const userAgentParam = resolved.userAgent ? `&User-Agent=${encodeURIComponent(resolved.userAgent)}` : '';
|
||||
const liveParam = resolved.isLive ? '&live=1' : '';
|
||||
const streamUrl = `/api/stream?url=${encodeURIComponent(resolved.url)}${refererParam}${userAgentParam}${liveParam}`;
|
||||
let isHls = /\.m3u8($|\?)/i.test(resolved.url);
|
||||
let isDirectMedia = /\.(mp4|m4v|m4s|webm|ts|mov)($|\?)/i.test(resolved.url);
|
||||
// Live cam streams resolve (server-side) to HLS; treat them as HLS up
|
||||
// front so we skip the content-type HEAD probe and go straight to it.
|
||||
if (resolved.isLive) {
|
||||
isHls = true;
|
||||
isDirectMedia = false;
|
||||
}
|
||||
|
||||
// Drop the previous attempt's error handler and player instance
|
||||
// before rebinding so stale callbacks don't double-advance.
|
||||
video.onerror = null;
|
||||
if (state.hlsPlayer) {
|
||||
state.hlsPlayer.stopLoad();
|
||||
state.hlsPlayer.detachMedia();
|
||||
state.hlsPlayer.destroy();
|
||||
state.hlsPlayer = null;
|
||||
}
|
||||
|
||||
// Reset the video element before re-binding a new source.
|
||||
video.pause();
|
||||
video.removeAttribute('src');
|
||||
video.load();
|
||||
|
||||
if (!isHls) {
|
||||
try {
|
||||
const headResp = await fetch(streamUrl, { method: 'HEAD' });
|
||||
const contentType = headResp.headers.get('Content-Type') || '';
|
||||
if (contentType.includes('application/vnd.apple.mpegurl')) {
|
||||
isHls = true;
|
||||
} else if (contentType.startsWith('video/') || contentType.startsWith('audio/')) {
|
||||
isDirectMedia = true;
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('Failed to detect stream type', err);
|
||||
}
|
||||
}
|
||||
|
||||
const startPlayback = () => {
|
||||
if (playbackStarted) return;
|
||||
playbackStarted = true;
|
||||
clearLoading();
|
||||
const playPromise = video.play();
|
||||
if (playPromise && typeof playPromise.catch === 'function') {
|
||||
playPromise.catch(() => {});
|
||||
}
|
||||
if (state.playerMode === 'mobile') {
|
||||
if (video.readyState >= 1) {
|
||||
requestFullscreen();
|
||||
} else {
|
||||
video.addEventListener('loadedmetadata', requestFullscreen, { once: true });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Confirmed direct media (mp4/webm/…) never needs hls.js; everything
|
||||
// else might, so pull it in now that the type has been sniffed.
|
||||
if (!window.Hls && (isHls || !isDirectMedia)) {
|
||||
try {
|
||||
await App.ensureHls();
|
||||
} catch (err) {
|
||||
// Fall back to native playback below.
|
||||
}
|
||||
}
|
||||
|
||||
const canUseHls = !!(window.Hls && window.Hls.isSupported());
|
||||
const prefersHls = isHls || (canUseHls && !isDirectMedia && !video.canPlayType('application/vnd.apple.mpegurl'));
|
||||
let hlsTried = false;
|
||||
let nativeTried = false;
|
||||
let usingHls = false;
|
||||
|
||||
const startNative = () => {
|
||||
if (nativeTried) return;
|
||||
nativeTried = true;
|
||||
usingHls = false;
|
||||
video.src = streamUrl;
|
||||
startPlayback();
|
||||
};
|
||||
|
||||
const startHls = (allowFallback) => {
|
||||
if (!canUseHls || hlsTried) return false;
|
||||
hlsTried = true;
|
||||
usingHls = true;
|
||||
state.hlsPlayer = new window.Hls();
|
||||
state.hlsPlayer.loadSource(streamUrl);
|
||||
state.hlsPlayer.attachMedia(video);
|
||||
state.hlsPlayer.on(window.Hls.Events.MANIFEST_PARSED, function() {
|
||||
startPlayback();
|
||||
});
|
||||
startPlayback();
|
||||
state.hlsPlayer.on(window.Hls.Events.ERROR, function(event, data) {
|
||||
if (data && data.fatal) {
|
||||
const shouldFallback = allowFallback && !nativeTried && !isHls;
|
||||
if (state.hlsPlayer) {
|
||||
state.hlsPlayer.destroy();
|
||||
state.hlsPlayer = null;
|
||||
}
|
||||
if (shouldFallback) {
|
||||
startNative();
|
||||
return;
|
||||
}
|
||||
advanceOrFail('Unable to play this stream.');
|
||||
}
|
||||
});
|
||||
return true;
|
||||
};
|
||||
|
||||
if (prefersHls) {
|
||||
if (!startHls(true)) {
|
||||
if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
startNative();
|
||||
} else if (hasNext) {
|
||||
advanceOrFail('HLS is not supported in this browser.');
|
||||
return;
|
||||
} else {
|
||||
console.error("HLS not supported in this browser.");
|
||||
failPlayback('HLS is not supported in this browser.');
|
||||
return;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
startNative();
|
||||
}
|
||||
|
||||
video.onerror = () => {
|
||||
if (!usingHls && canUseHls && !hlsTried && !isDirectMedia) {
|
||||
if (startHls(true)) return;
|
||||
}
|
||||
advanceOrFail('Video failed to load.');
|
||||
};
|
||||
};
|
||||
|
||||
attempt(0);
|
||||
|
||||
if (state.playerMode === 'modal') {
|
||||
modal.style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
Reference in New Issue
Block a user