176 lines
9.6 KiB
HTML
176 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>视频播放 - 短视频平台</title>
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
</head>
|
|
<body>
|
|
<!-- 顶部导航栏 -->
|
|
<header class="header">
|
|
<div class="container">
|
|
<div class="logo">
|
|
<a href="/">
|
|
<svg viewBox="0 0 24 24" width="32" height="32">
|
|
<path fill="#ff2442" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
|
</svg>
|
|
<span>短视频平台</span>
|
|
</a>
|
|
</div>
|
|
|
|
<nav class="nav-menu">
|
|
<a href="/" class="nav-item">首页</a>
|
|
<a href="#" class="nav-item">热门</a>
|
|
<a href="#" class="nav-item">关注</a>
|
|
</nav>
|
|
|
|
<div class="search-box">
|
|
<input type="text" id="searchInput" placeholder="搜索视频、作者">
|
|
<button onclick="handleSearch()">
|
|
<svg viewBox="0 0 24 24" width="20" height="20">
|
|
<path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="header-actions">
|
|
<a href="/admin" class="btn-admin">
|
|
<svg viewBox="0 0 24 24" width="20" height="20">
|
|
<path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主要内容区 -->
|
|
<main class="main-content video-page">
|
|
<div class="container">
|
|
<div class="video-container">
|
|
<!-- 视频播放器 -->
|
|
<div class="player-wrapper">
|
|
<div class="video-player" id="videoPlayer">
|
|
<video id="mainVideo" playsinline>
|
|
<source src="" type="video/mp4">
|
|
您的浏览器不支持视频播放
|
|
</video>
|
|
|
|
<!-- 弹幕层 -->
|
|
<div class="danmaku-layer" id="danmakuLayer"></div>
|
|
|
|
<!-- 控制栏 -->
|
|
<div class="player-controls">
|
|
<button class="play-btn" id="playBtn">
|
|
<svg class="play-icon" viewBox="0 0 24 24" width="24" height="24">
|
|
<path fill="currentColor" d="M8 5v14l11-7z"/>
|
|
</svg>
|
|
<svg class="pause-icon" viewBox="0 0 24 24" width="24" height="24" style="display:none">
|
|
<path fill="currentColor" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="progress-bar" id="progressBar">
|
|
<div class="progress-played" id="progressPlayed"></div>
|
|
<div class="progress-handle" id="progressHandle"></div>
|
|
</div>
|
|
|
|
<span class="time-display">
|
|
<span id="currentTime">0:00</span> / <span id="duration">0:00</span>
|
|
</span>
|
|
|
|
<div class="control-right">
|
|
<button class="volume-btn" id="volumeBtn">
|
|
<svg viewBox="0 0 24 24" width="24" height="24">
|
|
<path fill="currentColor" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
|
|
</svg>
|
|
</button>
|
|
<input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="100">
|
|
|
|
<button class="fullscreen-btn" id="fullscreenBtn">
|
|
<svg viewBox="0 0 24 24" width="24" height="24">
|
|
<path fill="currentColor" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 弹幕输入 -->
|
|
<div class="danmaku-input-wrapper">
|
|
<input type="text" class="danmaku-input" id="danmakuInput" placeholder="发个弹幕吧~">
|
|
<div class="color-picker">
|
|
<span class="color-label">颜色:</span>
|
|
<button class="color-btn active" data-color="#ffffff" style="background:#ffffff"></button>
|
|
<button class="color-btn" data-color="#ff0000" style="background:#ff0000"></button>
|
|
<button class="color-btn" data-color="#00ff00" style="background:#00ff00"></button>
|
|
<button class="color-btn" data-color="#ffff00" style="background:#ffff00"></button>
|
|
<button class="color-btn" data-color="#00ffff" style="background:#00ffff"></button>
|
|
<button class="color-btn" data-color="#ff00ff" style="background:#ff00ff"></button>
|
|
</div>
|
|
<button class="danmaku-send-btn" id="sendDanmaku">发送</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 视频信息 -->
|
|
<div class="video-info">
|
|
<h1 class="video-title" id="videoTitle">加载中...</h1>
|
|
<div class="video-meta">
|
|
<span class="view-count"><span id="viewCount">0</span> 次播放</span>
|
|
<span class="upload-date" id="uploadDate"></span>
|
|
</div>
|
|
|
|
<div class="video-actions">
|
|
<button class="action-btn" id="likeBtn">
|
|
<svg viewBox="0 0 24 24" width="24" height="24">
|
|
<path fill="currentColor" d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/>
|
|
</svg>
|
|
<span id="likeCount">0</span>
|
|
</button>
|
|
<button class="action-btn">
|
|
<svg viewBox="0 0 24 24" width="24" height="24">
|
|
<path fill="currentColor" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z"/>
|
|
</svg>
|
|
<span>分享</span>
|
|
</button>
|
|
<button class="action-btn">
|
|
<svg viewBox="0 0 24 24" width="24" height="24">
|
|
<path fill="currentColor" d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"/>
|
|
</svg>
|
|
<span>收藏</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="author-info">
|
|
<div class="author-avatar">
|
|
<svg viewBox="0 0 24 24" width="40" height="40">
|
|
<path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="author-details">
|
|
<div class="author-name" id="authorName">加载中...</div>
|
|
<div class="author-desc" id="videoDesc">加载中...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 侧边栏：推荐列表 -->
|
|
<div class="sidebar">
|
|
<h3 class="sidebar-title">推荐视频</h3>
|
|
<div class="recommend-list" id="recommendList">
|
|
<!-- 动态加载 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="/js/app.js"></script>
|
|
<script src="/js/player.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initVideoPage();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |