oiwmiodev/recorder-player
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Document player features and usage

Browse Source
This commit is contained in:
human insan
2026-08-27 22:30:32 +01:00
parent 3d38e32b1b
commit 6c521e5513
2 changed files with 79 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+20
View File
@@ -14,6 +14,11 @@
.header { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 16px; }
.header h1 { font-size: 18px; font-weight: 500; }
.header select { background: var(--surface); color: var(--text); border: none; padding: 6px 10px; border-radius: 3px; font-size: 14px; cursor: pointer; }
.help { margin-bottom: 14px; background: var(--surface); border-radius: 8px; overflow: hidden; }
.help summary { padding: 11px 16px; color: var(--text); cursor: pointer; font-size: 13px; }
.help-content { padding: 0 16px 14px; color: var(--dim); font-size: 13px; line-height: 1.55; }
.help-content p { margin-top: 8px; }
.help-content strong { color: var(--text); font-weight: 500; }
/* player wrapper */
.player-wrap { position: relative; background: #000; border-radius: 12px; overflow: hidden; }
@@ -89,6 +94,19 @@
<select id="date"></select>
</div>
<details class="help">
<summary>How to use this player</summary>
<div class="help-content">
<p><strong>Choose a date:</strong> Select a recording day at the top right.</p>
<p><strong>Find a recording:</strong> Light blue sections contain video. Dark sections are times when nothing was recorded. Click a light blue section to play it.</p>
<p><strong>Move through video:</strong> Use the red bar below the video to move within the current clip. Use the back and forward buttons, or the left and right arrow keys, to jump 10 seconds. Jumps automatically cross clips and skip gaps.</p>
<p><strong>Audio:</strong> Use the speaker button to mute. Hover over it to adjust volume. Press <strong>M</strong> to mute or unmute.</p>
<p><strong>Play and pause:</strong> Press the play button, click the video, or press <strong>Space</strong>.</p>
<p><strong>Timeline zoom:</strong> Press <strong>+</strong> or <strong>-</strong> to see a smaller part of the day in more detail.</p>
<p><strong>Encoding:</strong> Open the Encoding menu and press Start to create browser-friendly copies. Existing copies are skipped and never overwritten.</p>
</div>
</details>
<div class="player-wrap paused" id="player-wrap">
<video id="video" playsinline></video>
<div class="big-play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
@@ -373,6 +391,8 @@
if (e.target.tagName === "SELECT" || e.target.tagName === "INPUT") return;
if (e.code === "ArrowLeft") { e.preventDefault(); seekBy(-10); }
else if (e.code === "ArrowRight") { e.preventDefault(); seekBy(10); }
else if (e.code === "Equal" || e.code === "NumpadAdd") { e.preventDefault(); zoom = Math.min(24, zoom * 2); drawTimeline(); }
else if (e.code === "Minus" || e.code === "NumpadSubtract") { e.preventDefault(); zoom = Math.max(1, zoom / 2); drawTimeline(); }
else if (e.code === "Space") { e.preventDefault(); if (activeClip) video.paused ? video.play() : video.pause(); }
else if (e.code === "KeyM") { video.muted = !video.muted; updateVolIcon(); }
});