82 lines
3.1 KiB
HTML
82 lines
3.1 KiB
HTML
 
|
<!doctype html>
|
|||
|
|
<html lang="zh-Hant">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|||
|
|
<title>360 Player</title>
|
|||
|
|
<link rel="stylesheet" href="/style.css">
|
|||
|
|
<script type="importmap">{ "imports": { "three": "/vendor/three/three.module.js" } }</script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="app">
|
|||
|
|
<header id="topbar">
|
|||
|
|
<div class="brand">360<span>Player</span></div>
|
|||
|
|
|
|||
|
|
<label class="field">
|
|||
|
|
<span class="field-label">影片</span>
|
|||
|
|
<select id="videoSelect" title="選擇影片"></select>
|
|||
|
|
<button id="refreshBtn" class="icon-btn" title="重新掃描資料夾">↻</button>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<label class="field">
|
|||
|
|
<span class="field-label">畫質</span>
|
|||
|
|
<select id="qualitySelect" title="選擇播放畫質"></select>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<button id="projBtn" class="pill" title="切換 360° / 平面 顯示">360°</button>
|
|||
|
|
<button id="panelBtn" class="pill" title="轉檔與畫質管理">轉檔 <span id="panelBadge" class="badge" hidden></span></button>
|
|||
|
|
<div id="info" class="info"></div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<main id="stage" tabindex="0">
|
|||
|
|
<canvas id="gl"></canvas>
|
|||
|
|
<video id="video" playsinline preload="metadata"></video>
|
|||
|
|
|
|||
|
|
<div id="hint" class="hint">拖曳環視 · 滾輪/雙指縮放 · 空白鍵播放 · F 全螢幕</div>
|
|||
|
|
<div id="spinner" class="spinner" hidden></div>
|
|||
|
|
<button id="bigPlay" class="big-play" title="播放">▶</button>
|
|||
|
|
<div id="toast" class="toast" hidden></div>
|
|||
|
|
|
|||
|
|
<div id="controls" class="controls">
|
|||
|
|
<input id="seek" type="range" min="0" max="1000" value="0" step="1" aria-label="進度">
|
|||
|
|
<div class="row">
|
|||
|
|
<button id="playBtn" class="ctl" title="播放/暫停 (空白鍵)">▶</button>
|
|||
|
|
<span id="time" class="time">0:00 / 0:00</span>
|
|||
|
|
<span class="spacer"></span>
|
|||
|
|
<button id="muteBtn" class="ctl" title="靜音 (M)">🔊</button>
|
|||
|
|
<input id="vol" class="vol" type="range" min="0" max="1" step="0.02" value="1" aria-label="音量">
|
|||
|
|
<select id="rate" class="ctl-select" title="播放速度">
|
|||
|
|
<option value="0.5">0.5×</option>
|
|||
|
|
<option value="0.75">0.75×</option>
|
|||
|
|
<option value="1" selected>1×</option>
|
|||
|
|
<option value="1.25">1.25×</option>
|
|||
|
|
<option value="1.5">1.5×</option>
|
|||
|
|
<option value="2">2×</option>
|
|||
|
|
</select>
|
|||
|
|
<button id="resetBtn" class="ctl" title="重置視角 (0)">⌖</button>
|
|||
|
|
<button id="fsBtn" class="ctl" title="全螢幕 (F)">⛶</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<aside id="panel" class="panel" hidden>
|
|||
|
|
<div class="panel-head">
|
|||
|
|
<h2>轉檔 / 畫質</h2>
|
|||
|
|
<button id="panelClose" class="icon-btn" title="關閉">✕</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="panel-body">
|
|||
|
|
<p class="muted" id="encoderInfo"></p>
|
|||
|
|
<h3 id="panelVideoName">—</h3>
|
|||
|
|
<div id="panelVariants" class="variants"></div>
|
|||
|
|
<div class="panel-section-head">
|
|||
|
|
<h3>轉檔佇列</h3>
|
|||
|
|
<button id="clearJobsBtn" class="link-btn">清除已完成</button>
|
|||
|
|
</div>
|
|||
|
|
<div id="panelJobs" class="jobs"></div>
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
</div>
|
|||
|
|
<script type="module" src="/app.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|