821 lines
26 KiB
Plaintext
821 lines
26 KiB
Plaintext
---
|
|
import type { HTMLAttributes } from "astro/types";
|
|
import { cn } from "../utils/cn";
|
|
|
|
interface Props extends HTMLAttributes<"div"> {
|
|
videoUrl: string;
|
|
videoType: string;
|
|
autoPlay?: boolean;
|
|
muted?: boolean;
|
|
volume?: number;
|
|
overlayInfo?: string;
|
|
poster?: string;
|
|
}
|
|
|
|
const {
|
|
videoUrl,
|
|
videoType,
|
|
class: className = "",
|
|
autoPlay = false,
|
|
muted = false,
|
|
volume = 0.75,
|
|
overlayInfo,
|
|
poster = "",
|
|
} = Astro.props;
|
|
---
|
|
|
|
<div class={cn("video-card", className)}>
|
|
<div class="video-wrap">
|
|
<video
|
|
id="video-player"
|
|
preload="metadata"
|
|
playsinline
|
|
autoplay={autoPlay}
|
|
muted
|
|
poster={poster}
|
|
>
|
|
<source src={videoUrl} type={videoType} />
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
|
|
<div id="loading-overlay">
|
|
<div class="spinner" aria-hidden="true"></div>
|
|
</div>
|
|
|
|
<div id="placeholder-overlay" aria-hidden="false">
|
|
<svg
|
|
width="64"
|
|
height="64"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
style="opacity:.7"
|
|
>
|
|
<rect x="2" y="6" width="14" height="12" rx="2"></rect>
|
|
<path
|
|
d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"
|
|
></path>
|
|
</svg>
|
|
<div class="small">{overlayInfo}</div>
|
|
</div>
|
|
|
|
<div id="overlay">
|
|
<div id="overlay-play" class="btn" aria-label="Play/Pause">
|
|
<svg
|
|
width="36"
|
|
height="36"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.8"
|
|
>
|
|
<path
|
|
d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"
|
|
>
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style="position:absolute; top:12px; right:12px; z-index:8; background:rgba(0,0,0,0.6); padding:6px 8px; border-radius:8px; font-size:12px;"
|
|
>
|
|
1080p • 30 FPS
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls-area">
|
|
<div class="progress-block">
|
|
<!-- progress slider -->
|
|
<div
|
|
id="progress-slider"
|
|
class="slider"
|
|
role="slider"
|
|
aria-label="Seek"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
tabindex="0"
|
|
aria-valuenow="0"
|
|
>
|
|
<div class="track"></div>
|
|
<div class="buffered" id="buffered-range" style="width:0%">
|
|
</div>
|
|
<div class="fill" id="progress-range" style="width:0%"></div>
|
|
<div
|
|
class="thumb"
|
|
id="progress-thumb"
|
|
style="left:0%"
|
|
aria-hidden="true"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="display:flex; justify-content:space-between; margin-top:6px; font-size:13px; color:rgba(255,255,255,0.75)"
|
|
>
|
|
<div id="current-time">0:00</div>
|
|
<div id="max-duration">00:00</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls-row">
|
|
<div class="controls-left">
|
|
<button id="play-pause" class="btn" aria-label="Play/Pause"
|
|
>▶</button
|
|
>
|
|
<button id="skip-back" class="btn" aria-label="Back 10s"
|
|
>⟲10s</button
|
|
>
|
|
<button id="skip-forward" class="btn" aria-label="Forward 10s"
|
|
>10s⟳</button
|
|
>
|
|
|
|
<div class="volume-wrap">
|
|
<button id="volume-btn" class="btn" aria-label="Toggle mute"
|
|
>🔊</button
|
|
>
|
|
<div
|
|
id="volume-slider"
|
|
class="slider volume-slider"
|
|
role="slider"
|
|
aria-label="Volume"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
tabindex="0"
|
|
aria-valuenow={volume}
|
|
>
|
|
<div class="track"></div>
|
|
<div class="fill" id="volume-range" style="width:75%">
|
|
</div>
|
|
<div class="thumb" id="volume-thumb" style="left:75%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; align-items:center; gap:8px;">
|
|
<select
|
|
id="speed-select"
|
|
aria-label="Playback speed"
|
|
style="background:#071028; color:#fff; border-radius:6px; padding:6px; border:0"
|
|
>
|
|
<option value="0.5">0.5x</option>
|
|
<option value="1" selected>1x</option>
|
|
<option value="1.25">1.25x</option>
|
|
<option value="1.5">1.5x</option>
|
|
<option value="2">2x</option>
|
|
</select>
|
|
<button id="fullscreen-btn" class="btn" aria-label="Fullscreen"
|
|
><svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M8 3H5a2 2 0 0 0-2 2v3"></path>
|
|
<path d="M21 8V5a2 2 0 0 0-2-2h-3"></path>
|
|
<path d="M3 16v3a2 2 0 0 0 2 2h3"></path>
|
|
<path d="M16 21h3a2 2 0 0 0 2-2v-3"></path>
|
|
</svg></button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
:root {
|
|
--thumb-size: 16px;
|
|
}
|
|
|
|
.video-card {
|
|
position: relative;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: #000;
|
|
box-shadow: 0 8px 30px rgba(2, 6, 23, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.video-wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 16/9;
|
|
background: black;
|
|
}
|
|
|
|
.controls-area {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: linear-gradient(
|
|
to top,
|
|
rgba(0, 0, 0, 0.7),
|
|
rgba(0, 0, 0, 0)
|
|
);
|
|
background: rgba(0 0, 0, 0.5);
|
|
padding: 14px;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
pointer-events: none;
|
|
z-index: 999;
|
|
}
|
|
|
|
.video-card .controls-area {
|
|
opacity: 0 !important;
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
.video-card.show-controls .controls-area {
|
|
opacity: 1 !important;
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
.video-card.show-controls #overlay {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
display: block;
|
|
background: black;
|
|
}
|
|
|
|
/* overlays */
|
|
#loading-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.spinner {
|
|
border: 4px solid rgba(255, 255, 255, 0.15);
|
|
border-top: 4px solid #fff;
|
|
border-radius: 50%;
|
|
width: 36px;
|
|
height: 36px;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
#placeholder-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 5;
|
|
}
|
|
|
|
#overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 6;
|
|
background: rgba(0, 0, 0, 0.15);
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.video.paused + #overlay {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.progress-block {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* Generic slider styles (track + fill + thumb) */
|
|
.slider {
|
|
position: relative;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.slider .track {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
height: 6px;
|
|
background: #374151;
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.slider .buffered {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
height: 6px;
|
|
border-radius: 9999px;
|
|
background: rgba(99, 102, 241, 0.35);
|
|
width: 0%;
|
|
}
|
|
|
|
.slider .fill {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
height: 6px;
|
|
border-radius: 9999px;
|
|
background: linear-gradient(90deg, #1e40af, #3b82f6);
|
|
width: 0%;
|
|
}
|
|
|
|
.slider .thumb {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: var(--thumb-size);
|
|
height: var(--thumb-size);
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
border: 2px solid #000;
|
|
box-shadow: 0 2px 6px rgba(2, 6, 23, 0.5);
|
|
}
|
|
|
|
.controls-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.controls-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn {
|
|
background: transparent;
|
|
border: 0;
|
|
color: #fff;
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
.small {
|
|
font-size: 13px;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
/* Volume small slider */
|
|
.volume-wrap {
|
|
width: 140px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.volume-slider {
|
|
width: 100px;
|
|
}
|
|
|
|
/* simple responsive */
|
|
@media (max-width: 600px) {
|
|
.volume-wrap {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script type="module" is:inline define:vars={{ volume, muted }}>
|
|
// ---------- Fixed & improved JS ----------
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const videoCard = document.querySelector(".video-card");
|
|
const video = document.getElementById("video-player");
|
|
const loadingOverlay = document.getElementById("loading-overlay");
|
|
const placeholder = document.getElementById("placeholder-overlay");
|
|
const overlay = document.getElementById("overlay");
|
|
const overlayPlay = document.getElementById("overlay-play");
|
|
const playPauseBtn = document.getElementById("play-pause");
|
|
const skipBack = document.getElementById("skip-back");
|
|
const skipForward = document.getElementById("skip-forward");
|
|
const volumeBtn = document.getElementById("volume-btn");
|
|
const volumeThumb = document.getElementById("volume-thumb");
|
|
const volumeRange = document.getElementById("volume-range");
|
|
const volumeSlider = document.getElementById("volume-slider");
|
|
const progressThumb = document.getElementById("progress-thumb");
|
|
const progressRange = document.getElementById("progress-range");
|
|
const bufferedRange = document.getElementById("buffered-range");
|
|
const progressSlider = document.getElementById("progress-slider");
|
|
const currentTimeEl = document.getElementById("current-time");
|
|
const maxDurationEl = document.getElementById("max-duration");
|
|
const speedSelect = document.getElementById("speed-select");
|
|
const fullscreenBtn = document.getElementById("fullscreen-btn");
|
|
|
|
let prevVolume = volume;
|
|
let draggingProgress = false;
|
|
let draggingVolume = false;
|
|
let controlsTimeout;
|
|
let lastMouseX = 0,
|
|
lastMouseY = 0;
|
|
|
|
let vol = Number(`${volume}`);
|
|
if (isFinite(vol) && vol >= 0 && vol <= 1) {
|
|
video.volume = vol;
|
|
} else {
|
|
video.volume = 0.75; // fallback
|
|
}
|
|
|
|
video.muted = muted;
|
|
|
|
// clamp helper
|
|
const clamp = (v, a, b) => Math.min(Math.max(v, a), b);
|
|
|
|
function formatTime(sec) {
|
|
if (!isFinite(sec) || isNaN(sec)) return "00:00";
|
|
sec = Math.floor(sec);
|
|
const h = Math.floor(sec / 3600);
|
|
const m = Math.floor((sec % 3600) / 60);
|
|
const s = sec % 60;
|
|
if (h > 0)
|
|
return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
|
|
return `${m}:${String(s).padStart(2, "0")}`;
|
|
}
|
|
|
|
// Update UI helpers
|
|
function updateProgressUI() {
|
|
if (!isFinite(video.duration) || video.duration === 0) return;
|
|
const percent = clamp(
|
|
(video.currentTime / video.duration) * 100,
|
|
0,
|
|
100,
|
|
);
|
|
progressRange.style.width = percent + "%";
|
|
progressThumb.style.left = percent + "%";
|
|
progressSlider.setAttribute(
|
|
"aria-valuenow",
|
|
String(Math.floor(video.currentTime)),
|
|
);
|
|
currentTimeEl.textContent = formatTime(video.currentTime);
|
|
}
|
|
|
|
function updateBuffered() {
|
|
if (!isFinite(video.duration) || video.duration === 0) return;
|
|
if (video.buffered && video.buffered.length) {
|
|
const end = video.buffered.end(video.buffered.length - 1);
|
|
const percent = clamp((end / video.duration) * 100, 0, 100);
|
|
bufferedRange.style.width = percent + "%";
|
|
}
|
|
}
|
|
|
|
function updateVolumeUI() {
|
|
const volPercent = clamp(
|
|
video.muted ? 0 : Math.round((video.volume || 0) * 100),
|
|
0,
|
|
100,
|
|
);
|
|
volumeRange.style.width = volPercent + "%";
|
|
volumeThumb.style.left = volPercent + "%";
|
|
volumeSlider.setAttribute("aria-valuenow", String(volPercent));
|
|
volumeSlider.setAttribute("aria-valuetext", volPercent + "%");
|
|
// update icon
|
|
if (volPercent === 0) volumeBtn.textContent = "🔈";
|
|
else if (volPercent < 50) volumeBtn.textContent = "🔉";
|
|
else volumeBtn.textContent = "🔊";
|
|
}
|
|
|
|
// --- Initial setup ---
|
|
video.volume = prevVolume;
|
|
updateVolumeUI();
|
|
|
|
video.addEventListener("loadedmetadata", () => {
|
|
maxDurationEl.textContent = formatTime(video.duration);
|
|
progressSlider.setAttribute(
|
|
"aria-valuemax",
|
|
String(Math.floor(video.duration)),
|
|
);
|
|
updateProgressUI();
|
|
updateBuffered();
|
|
video.playbackRate = parseFloat(speedSelect.value) || 1;
|
|
});
|
|
|
|
// play/pause logic
|
|
function setPlayIcon(isPlaying) {
|
|
playPauseBtn.textContent = isPlaying ? "⏸" : "▶";
|
|
}
|
|
|
|
function togglePlayPause() {
|
|
if (video.paused) {
|
|
video.play().catch(() => {});
|
|
setOverlayIcon(true);
|
|
} else {
|
|
video.pause();
|
|
setOverlayIcon(false);
|
|
}
|
|
}
|
|
|
|
video.addEventListener("click", togglePlayPause);
|
|
overlay.addEventListener("click", togglePlayPause);
|
|
//overlayPlay.addEventListener("click", togglePlayPause);
|
|
playPauseBtn.addEventListener("click", togglePlayPause);
|
|
|
|
video.addEventListener("play", () => {
|
|
setPlayIcon(true);
|
|
setOverlayIcon(true);
|
|
placeholder.style.display = "none";
|
|
loadingOverlay.style.display = "none";
|
|
showControls();
|
|
});
|
|
video.addEventListener("pause", () => {
|
|
setPlayIcon(false);
|
|
setOverlayIcon(false);
|
|
videoCard.classList.add("show-controls");
|
|
videoCard.style.cursor = "default";
|
|
clearTimeout(controlsTimeout);
|
|
});
|
|
|
|
function setOverlayIcon(isPlaying) {
|
|
if (isPlaying) {
|
|
overlayPlay.innerHTML = `
|
|
<svg width="36" height="36" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="6" y="4" width="4" height="16"></rect>
|
|
<rect x="14" y="4" width="4" height="16"></rect>
|
|
</svg>`; // pause icon
|
|
} else {
|
|
overlayPlay.innerHTML = `
|
|
<svg width="36" height="36" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M5 3l14 9-14 9V3z"></path>
|
|
</svg>`; // play icon
|
|
}
|
|
}
|
|
|
|
video.addEventListener("timeupdate", updateProgressUI);
|
|
video.addEventListener("progress", updateBuffered);
|
|
video.addEventListener("canplay", () => {
|
|
loadingOverlay.style.display = "none";
|
|
updateBuffered();
|
|
});
|
|
video.addEventListener("waiting", () => {
|
|
loadingOverlay.style.display = "flex";
|
|
});
|
|
video.addEventListener("loadstart", () => {
|
|
loadingOverlay.style.display = "flex";
|
|
});
|
|
|
|
// Seeking (supports pointer and keyboard)
|
|
function handlePointerPositionOnSlider(evt, sliderEl) {
|
|
const rect = sliderEl.getBoundingClientRect();
|
|
const clientX =
|
|
evt.touches && evt.touches[0]
|
|
? evt.touches[0].clientX
|
|
: evt.clientX;
|
|
const percent = clamp(
|
|
((clientX - rect.left) / rect.width) * 100,
|
|
0,
|
|
100,
|
|
);
|
|
return percent;
|
|
}
|
|
|
|
// progress pointer handling
|
|
progressSlider.addEventListener("pointerdown", (e) => {
|
|
e.preventDefault();
|
|
draggingProgress = true;
|
|
progressSlider.setPointerCapture(e.pointerId);
|
|
const p = handlePointerPositionOnSlider(e, progressSlider);
|
|
const t = (p / 100) * video.duration || 0;
|
|
video.currentTime = t;
|
|
updateProgressUI();
|
|
});
|
|
|
|
progressSlider.addEventListener("pointermove", (e) => {
|
|
if (!draggingProgress) return;
|
|
const p = handlePointerPositionOnSlider(e, progressSlider);
|
|
const t = (p / 100) * video.duration || 0;
|
|
video.currentTime = t;
|
|
updateProgressUI();
|
|
});
|
|
|
|
progressSlider.addEventListener("pointerup", (e) => {
|
|
draggingProgress = false;
|
|
try {
|
|
progressSlider.releasePointerCapture(e.pointerId);
|
|
} catch {}
|
|
});
|
|
|
|
// keyboard support for seek
|
|
progressSlider.addEventListener("keydown", (e) => {
|
|
if (!isFinite(video.duration)) return;
|
|
if (e.key === "ArrowLeft") {
|
|
video.currentTime = clamp(
|
|
video.currentTime - 5,
|
|
0,
|
|
video.duration,
|
|
);
|
|
}
|
|
if (e.key === "ArrowRight") {
|
|
video.currentTime = clamp(
|
|
video.currentTime + 5,
|
|
0,
|
|
video.duration,
|
|
);
|
|
}
|
|
});
|
|
|
|
// skip buttons
|
|
skipBack.addEventListener("click", () => {
|
|
video.currentTime = clamp(
|
|
video.currentTime - 10,
|
|
0,
|
|
video.duration || Infinity,
|
|
);
|
|
});
|
|
skipForward.addEventListener("click", () => {
|
|
video.currentTime = clamp(
|
|
video.currentTime + 10,
|
|
0,
|
|
video.duration || Infinity,
|
|
);
|
|
});
|
|
|
|
// Volume interactions
|
|
volumeSlider.addEventListener("pointerdown", (e) => {
|
|
e.preventDefault();
|
|
draggingVolume = true;
|
|
volumeSlider.setPointerCapture(e.pointerId);
|
|
const p = handlePointerPositionOnSlider(e, volumeSlider);
|
|
video.volume = p / 100;
|
|
video.muted = p === 0;
|
|
prevVolume = video.volume || prevVolume;
|
|
updateVolumeUI();
|
|
});
|
|
|
|
volumeSlider.addEventListener("pointermove", (e) => {
|
|
if (!draggingVolume) return;
|
|
const p = handlePointerPositionOnSlider(e, volumeSlider);
|
|
video.volume = p / 100;
|
|
video.muted = p === 0;
|
|
prevVolume = video.volume || prevVolume;
|
|
updateVolumeUI();
|
|
});
|
|
|
|
volumeSlider.addEventListener("pointerup", (e) => {
|
|
draggingVolume = false;
|
|
try {
|
|
volumeSlider.releasePointerCapture(e.pointerId);
|
|
} catch {}
|
|
});
|
|
|
|
// click on volume track
|
|
volumeSlider.addEventListener("click", (e) => {
|
|
const p = handlePointerPositionOnSlider(e, volumeSlider);
|
|
video.volume = p / 100;
|
|
video.muted = p === 0;
|
|
prevVolume = video.volume || prevVolume;
|
|
updateVolumeUI();
|
|
});
|
|
|
|
// toggle mute
|
|
volumeBtn.addEventListener("click", () => {
|
|
if (video.muted || video.volume === 0) {
|
|
video.muted = false;
|
|
video.volume = prevVolume || 0.75;
|
|
} else {
|
|
prevVolume = video.volume || prevVolume;
|
|
video.muted = true;
|
|
}
|
|
updateVolumeUI();
|
|
});
|
|
|
|
// sync on change
|
|
video.addEventListener("volumechange", updateVolumeUI);
|
|
|
|
// playback speed
|
|
speedSelect.addEventListener("change", () => {
|
|
video.playbackRate = parseFloat(speedSelect.value);
|
|
});
|
|
|
|
// fullscreen
|
|
fullscreenBtn.addEventListener("click", async () => {
|
|
try {
|
|
if (!document.fullscreenElement) {
|
|
await videoCard.requestFullscreen();
|
|
} else {
|
|
await document.exitFullscreen();
|
|
}
|
|
} catch (err) {
|
|
console.error("Fullscreen error:", err);
|
|
}
|
|
});
|
|
|
|
function showControls() {
|
|
videoCard.classList.add("show-controls");
|
|
videoCard.style.cursor = "default";
|
|
clearTimeout(controlsTimeout);
|
|
|
|
if (!video.paused) {
|
|
controlsTimeout = setTimeout(() => {
|
|
videoCard.classList.remove("show-controls");
|
|
// Hide cursor too in fullscreen
|
|
if (document.fullscreenElement === videoCard) {
|
|
videoCard.style.cursor = "none";
|
|
}
|
|
}, 3000);
|
|
}
|
|
}
|
|
|
|
videoCard.addEventListener("mousemove", (e) => {
|
|
if (e.clientX !== lastMouseX || e.clientY !== lastMouseY) {
|
|
showControls();
|
|
lastMouseX = e.clientX;
|
|
lastMouseY = e.clientY;
|
|
}
|
|
});
|
|
videoCard.addEventListener("click", showControls);
|
|
|
|
document.addEventListener("fullscreenchange", () => {
|
|
if (!document.fullscreenElement) {
|
|
// videoCard.classList.add('show-controls');
|
|
// videoCard.style.cursor = 'default';
|
|
// clearTimeout(controlsTimeout);
|
|
|
|
showControls();
|
|
}
|
|
});
|
|
|
|
// keyboard shortcuts
|
|
document.addEventListener("keydown", (e) => {
|
|
// prevent interfering when typing in inputs/selects
|
|
const tag =
|
|
document.activeElement &&
|
|
document.activeElement.tagName.toLowerCase();
|
|
if (tag === "input" || tag === "textarea" || tag === "select")
|
|
return;
|
|
|
|
if (e.code === "Space") {
|
|
e.preventDefault();
|
|
togglePlayPause();
|
|
}
|
|
if (e.code === "ArrowLeft") {
|
|
video.currentTime = clamp(
|
|
video.currentTime - 10,
|
|
0,
|
|
video.duration || Infinity,
|
|
);
|
|
}
|
|
if (e.code === "ArrowRight") {
|
|
video.currentTime = clamp(
|
|
video.currentTime + 10,
|
|
0,
|
|
video.duration || Infinity,
|
|
);
|
|
}
|
|
if (e.code === "KeyM") {
|
|
if (video.muted) {
|
|
video.muted = false;
|
|
video.volume = prevVolume || 0.75;
|
|
} else {
|
|
prevVolume = video.volume || prevVolume;
|
|
video.muted = true;
|
|
}
|
|
updateVolumeUI();
|
|
}
|
|
});
|
|
|
|
// pointerup anywhere to cancel drags (safety)
|
|
document.addEventListener("pointerup", () => {
|
|
draggingProgress = false;
|
|
draggingVolume = false;
|
|
});
|
|
});
|
|
</script>
|