Update videoapp frontend
This commit is contained in:
yuqianhe
@@ -193,6 +193,7 @@ async function loadVideoDetail(viewkey) {
|
||||
document.getElementById('playerStatus').classList.add('hidden');
|
||||
document.getElementById('playerBox').classList.remove('hidden');
|
||||
document.getElementById('videoPlayer').classList.add('hidden');
|
||||
document.getElementById('playerError').classList.add('hidden');
|
||||
document.getElementById('videoSource').src = '';
|
||||
extractedVideoURL = null;
|
||||
|
||||
@@ -211,11 +212,7 @@ async function loadVideoDetail(viewkey) {
|
||||
|
||||
if (d.video_url) {
|
||||
extractedVideoURL = d.video_url;
|
||||
|
||||
// 显示播放器
|
||||
showVideoPlayer(d.video_url, d.title);
|
||||
|
||||
// 显示源地址和操作按钮
|
||||
startVideoPlayer(d.video_url);
|
||||
document.getElementById('playerStatus').className = 'player-status success';
|
||||
document.getElementById('playerStatus').textContent = '✅ 视频源提取成功';
|
||||
document.getElementById('playerStatus').classList.remove('hidden');
|
||||
@@ -230,6 +227,8 @@ async function loadVideoDetail(viewkey) {
|
||||
} catch(e) {
|
||||
document.getElementById('videoTitle').textContent = '提取失败';
|
||||
document.getElementById('playerLabel').textContent = '提取失败';
|
||||
document.getElementById('playerBox').classList.remove('hidden');
|
||||
document.getElementById('videoPlayer').classList.add('hidden');
|
||||
document.getElementById('playerStatus').className = 'player-status error';
|
||||
document.getElementById('playerStatus').textContent = '❌ ' + e.message;
|
||||
document.getElementById('playerStatus').classList.remove('hidden');
|
||||
@@ -245,58 +244,59 @@ async function loadVideoDetail(viewkey) {
|
||||
} catch(e) {}
|
||||
}
|
||||
|
||||
function showVideoPlayer(src, title) {
|
||||
function startVideoPlayer(src) {
|
||||
const playerBox = document.getElementById('playerBox');
|
||||
const videoPlayer = document.getElementById('videoPlayer');
|
||||
const videoSource = document.getElementById('videoSource');
|
||||
const video = document.getElementById('videoPlayer');
|
||||
const source = document.getElementById('videoSource');
|
||||
const errorOverlay = document.getElementById('playerError');
|
||||
|
||||
// 设置视频源
|
||||
videoSource.src = src;
|
||||
videoPlayer.load();
|
||||
|
||||
// 切换显示
|
||||
playerBox.classList.add('hidden');
|
||||
videoPlayer.classList.remove('hidden');
|
||||
|
||||
// 监听播放事件
|
||||
videoPlayer.onloadedmetadata = function() {
|
||||
// 先注册事件，再加载
|
||||
video.onloadedmetadata = function() {
|
||||
document.getElementById('playerStatus').className = 'player-status success';
|
||||
document.getElementById('playerStatus').textContent = '✅ 视频就绪 — ' + formatDuration(videoPlayer.duration);
|
||||
document.getElementById('playerStatus').textContent = '✅ 视频就绪 — ' + formatDuration(video.duration);
|
||||
document.getElementById('playerStatus').classList.remove('hidden');
|
||||
};
|
||||
|
||||
videoPlayer.onerror = function() {
|
||||
const err = videoPlayer.error;
|
||||
let msg = '播放失败';
|
||||
if (err) {
|
||||
switch(err.code) {
|
||||
case 1: msg = '视频加载被中止'; break;
|
||||
case 2: msg = '网络错误，无法加载视频'; break;
|
||||
case 3: msg = '视频解码失败（格式不支持）'; break;
|
||||
case 4: msg = '视频不可用（CDN 防盗链或链接过期）'; break;
|
||||
}
|
||||
}
|
||||
document.getElementById('playerStatus').className = 'player-status error';
|
||||
document.getElementById('playerStatus').textContent = '⚠️ ' + msg + ' — 可尝试复制地址用下载工具打开';
|
||||
document.getElementById('playerStatus').classList.remove('hidden');
|
||||
|
||||
// 错误时显示回退占位
|
||||
playerBox.classList.remove('hidden');
|
||||
videoPlayer.classList.add('hidden');
|
||||
document.getElementById('playerLabel').textContent = '⚠️ 无法在线播放';
|
||||
};
|
||||
|
||||
videoPlayer.onplaying = function() {
|
||||
video.onplaying = function() {
|
||||
document.getElementById('playerStatus').className = 'player-status success';
|
||||
document.getElementById('playerStatus').textContent = '▶ 正在播放';
|
||||
document.getElementById('playerStatus').classList.remove('hidden');
|
||||
};
|
||||
|
||||
video.onerror = function() {
|
||||
const err = video.error;
|
||||
var msg = '无法在线播放';
|
||||
var hint = '请尝试复制地址用下载工具打开';
|
||||
if (err) {
|
||||
switch(err.code) {
|
||||
case 1: msg = '视频加载被中止'; break;
|
||||
case 2: msg = '网络错误，无法加载'; break;
|
||||
case 3: msg = '视频解码失败（格式不支持）'; break;
|
||||
case 4: msg = 'CDN 防盗链或链接已过期'; hint = '可尝试「新窗口打开」或复制地址下载'; break;
|
||||
}
|
||||
}
|
||||
document.getElementById('playerErrorMsg').textContent = msg;
|
||||
document.getElementById('playerErrorHint').textContent = hint;
|
||||
// 显示覆盖层，不隐藏播放器
|
||||
errorOverlay.classList.remove('hidden');
|
||||
document.getElementById('playerStatus').className = 'player-status error';
|
||||
document.getElementById('playerStatus').textContent = '⚠️ ' + msg;
|
||||
document.getElementById('playerStatus').classList.remove('hidden');
|
||||
};
|
||||
|
||||
// 切换显示：隐藏占位，显示播放器
|
||||
source.src = src;
|
||||
video.load();
|
||||
playerBox.classList.add('hidden');
|
||||
video.classList.remove('hidden');
|
||||
errorOverlay.classList.add('hidden');
|
||||
}
|
||||
|
||||
async function extractCurrent() {
|
||||
if (!currentViewkey) return;
|
||||
document.getElementById('playerBox').classList.remove('hidden');
|
||||
document.getElementById('videoPlayer').classList.add('hidden');
|
||||
document.getElementById('playerError').classList.add('hidden');
|
||||
document.getElementById('videoSource').src = '';
|
||||
document.getElementById('playerLabel').textContent = '正在提取视频源...';
|
||||
document.getElementById('playerStatus').classList.remove('hidden');
|
||||
|
||||
@@ -90,8 +90,12 @@
|
||||
</div>
|
||||
<video id="videoPlayer" class="hidden" controls controlsList="nodownload" crossorigin="anonymous" playsinline>
|
||||
<source id="videoSource" src="" type="video/mp4">
|
||||
您的浏览器不支持 HTML5 视频播放
|
||||
</video>
|
||||
<div class="player-error-overlay hidden" id="playerError">
|
||||
<div class="error-icon">⚠️</div>
|
||||
<p id="playerErrorMsg">无法播放</p>
|
||||
<p id="playerErrorHint"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player-status hidden" id="playerStatus"></div>
|
||||
</div>
|
||||
|
||||
@@ -131,6 +131,18 @@ body {
|
||||
}
|
||||
#videoPlayer.hidden, .player-placeholder.hidden { display:none !important; }
|
||||
|
||||
.player-error-overlay {
|
||||
position:absolute; top:0; left:0; right:0; bottom:0; z-index:10;
|
||||
display:flex; flex-direction:column; align-items:center; justify-content:center;
|
||||
background:rgba(0,0,0,0.85); border-radius:var(--radius);
|
||||
color:var(--text); text-align:center; padding:20px;
|
||||
}
|
||||
.player-error-overlay.hidden { display:none !important; }
|
||||
.player-error-overlay .error-icon { font-size:3rem; margin-bottom:12px; }
|
||||
.player-error-overlay p { margin:4px 0; font-size:0.95rem; }
|
||||
.player-error-overlay #playerErrorHint { color:var(--text2); font-size:0.8rem; margin-top:8px; }
|
||||
.player-error-overlay .btn { margin-top:12px; }
|
||||
|
||||
.player-status { padding:12px 16px; background:var(--card); border-radius:8px; margin-top:8px; font-size:0.85rem; }
|
||||
.player-status.success { border-left:3px solid var(--success); color:var(--success); }
|
||||
.player-status.error { border-left:3px solid var(--accent); color:var(--accent); }
|
||||
|
||||
Reference in New Issue
Block a user