feat: provide on-demand H264 compatible browser previews

This commit is contained in:
Codex
2026-10-03 16:49:48 +08:00
parent a887a76095
commit c8e9901b90
8 changed files with 91 additions and 13 deletions
+3 -3
View File
@@ -62,12 +62,12 @@ function renderLive() {
const src = `/media/live/cam_${c.id}_${quality}/index.m3u8`;
const error = text => {const el=panel.querySelector('.video-error');el.textContent=text;el.hidden=false;};
video.onplaying=()=>{panel.querySelector('.video-empty').hidden=true;panel.querySelector('.video-error').hidden=true;};
video.onerror=()=>error('浏览器无法解码此码流。可尝试切换清晰度,或将摄像头设为 H.264。');
video.onerror=()=>error('浏览器无法解码此码流,请在清晰度中选择“兼容 · 流畅画面”。');
if (window.Hls?.isSupported()) {
const hls = new Hls({maxBufferLength:10,backBufferLength:5,liveSyncDurationCount:3,manifestLoadingMaxRetry:2,levelLoadingMaxRetry:2});
const hls = new Hls({maxBufferLength:10,backBufferLength:5,liveSyncDurationCount:3,manifestLoadingTimeOut:60000,levelLoadingTimeOut:60000,manifestLoadingMaxRetry:2,levelLoadingMaxRetry:2});
hls.on(Hls.Events.ERROR,(_,data)=>{if(data.fatal){
const codecError = /codec|bufferAddCodec|manifestIncompatible/i.test(data.details || '');
error(codecError ? '浏览器不支持当前视频编码,需要服务器提供兼容码流。' : '画面加载失败('+(data.details || data.type)+')。点击刷新状态可重试。');
error(codecError ? '浏览器不支持当前视频编码,请选择“兼容 · 流畅画面”。' : '画面加载失败('+(data.details || data.type)+')。点击刷新状态可重试。');
console.warn('Video playback failed', c.id, data.type, data.details);
hls.destroy();
}});