114 lines
3.9 KiB
HTML
114 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>M3U8/FLV + PM2 控制</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/flv.js@1.6.2/dist/flv.min.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background: linear-gradient(120deg, #1a237e 0%, #283593 50%, #4a148c 100%);
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
padding: 20px;
|
|
}
|
|
.container { max-width: 640px; width: 100%; background:#fff; color:#000; padding:20px; border-radius:10px; }
|
|
#videoPlayer { width:100%; height:0; padding-bottom:56.25%; position:relative; background:#000; display:none; border-radius:5px; }
|
|
video { position:absolute; top:0; left:0; width:100%; height:100%; }
|
|
input, button { width:100%; margin:5px 0; padding:8px; border-radius:5px; border:1px solid #ccc; box-sizing:border-box; }
|
|
button { background:#283593; color:white; border:none; cursor:pointer; font-weight:bold; }
|
|
button:hover { background:#1a237e; }
|
|
#pm2Buttons button { width:24%; margin-right:1%; }
|
|
#pm2Buttons button:last-child { margin-right:0; }
|
|
#pm2Log { background:#000;color:#0f0;padding:10px;height:200px;overflow:auto; white-space: pre-wrap; font-family: monospace; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<h2>视频播放器</h2>
|
|
<input type="text" id="videoUrlInput" placeholder="请输入 M3U8 或 FLV 链接">
|
|
<button id="playButton">播放视频</button>
|
|
<div id="videoPlayer">
|
|
<video controls></video>
|
|
</div>
|
|
|
|
<h2>PM2 控制</h2>
|
|
<div id="pm2Buttons">
|
|
<button onclick="pm2Action('start')">启动</button>
|
|
<button onclick="pm2Action('stop')">停止</button>
|
|
<button onclick="pm2Action('restart')">重启</button>
|
|
<button onclick="pm2Action('status')">状态</button>
|
|
</div>
|
|
<pre id="pm2Log">PM2 日志显示区</pre>
|
|
</div>
|
|
|
|
<script>
|
|
const video = document.querySelector('#videoPlayer video');
|
|
const videoPlayer = document.getElementById('videoPlayer');
|
|
|
|
function httpToHttps(url) {
|
|
return url.startsWith("http://") ? url.replace("http://", "https://") : url;
|
|
}
|
|
|
|
function playVideo() {
|
|
let url = document.getElementById('videoUrlInput').value.trim();
|
|
if(!url){ alert('请输入视频链接'); return; }
|
|
url = httpToHttps(url);
|
|
|
|
videoPlayer.style.display = 'block';
|
|
if(url.includes('.m3u8')){
|
|
if(Hls.isSupported()){
|
|
const hls = new Hls();
|
|
hls.attachMedia(video);
|
|
hls.on(Hls.Events.MEDIA_ATTACHED, ()=>{ hls.loadSource(url); });
|
|
} else if(video.canPlayType('application/vnd.apple.mpegurl')){
|
|
video.src = url;
|
|
} else { alert('M3U8 不支持'); return; }
|
|
} else if(url.includes('.flv')){
|
|
if(flvjs.isSupported()){
|
|
const flvPlayer = flvjs.createPlayer({type:'flv',url:url});
|
|
flvPlayer.attachMediaElement(video);
|
|
flvPlayer.load(); flvPlayer.play();
|
|
} else { alert('FLV 不支持'); return; }
|
|
} else { alert('不支持此格式'); }
|
|
}
|
|
document.getElementById('playButton').addEventListener('click', playVideo);
|
|
|
|
// ---------------- PM2 控制 ----------------
|
|
async function pm2Action(action){
|
|
const pre = document.getElementById('pm2Log');
|
|
try {
|
|
const res = await fetch(`/${action}`);
|
|
const data = await res.json();
|
|
|
|
if(action === "status"){
|
|
pre.textContent =
|
|
`【PM2 状态】
|
|
${data.status}
|
|
|
|
【最近输出日志】
|
|
${data.recent_log}
|
|
|
|
【最近错误日志】
|
|
${data.recent_error}`;
|
|
} else {
|
|
pre.textContent = data.output || data.error;
|
|
}
|
|
} catch(e){
|
|
pre.textContent = `请求失败: ${e}`;
|
|
}
|
|
}
|
|
|
|
// 可选：每 2 秒自动刷新状态
|
|
setInterval(()=>{ pm2Action('status'); }, 2000);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|