用trae自动生成网页播放视频的效果(模仿B站)
·
直接看效果。
卧槽，效果还是不错的。
文件名是video.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BiliVideo - 在线视频</title>
<link rel="stylesheet" href="css/video.css">
</head>
<body>
<!-- 顶部导航 -->
<header class="top-nav">
<div class="nav-left">
<div class="logo">📺 BiliVideo</div>
<nav class="nav-menu">
<a href="#" class="active">首页</a>
<a href="#">动画</a>
<a href="#">音乐</a>
<a href="#">科技</a>
<a href="#">游戏</a>
<a href="#">生活</a>
</nav>
</div>
<div class="nav-right">
<div class="search-box">
<input type="text" placeholder="搜索视频...">
<button>🔍</button>
</div>
<div class="user-avatar">👤</div>
</div>
</header>
<div class="main-container">
<!-- 左侧：视频播放区 -->
<div class="video-section">
<!-- 视频播放器 -->
<div class="player-wrapper" id="playerWrapper">
<video id="videoPlayer" preload="metadata">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
您的浏览器不支持视频播放
</video>
<!-- 弹幕层 -->
<div class="danmaku-layer" id="danmakuLayer"></div>
<!-- 中央播放按钮 -->
<div class="center-play-btn" id="centerPlayBtn">▶</div>
<!-- 加载提示 -->
<div class="loading-spinner" id="loadingSpinner" style="display:none;">
<div class="spinner"></div>
</div>
<!-- 控制条 -->
<div class="video-controls" id="videoControls">
<!-- 进度条 -->
<div class="progress-bar" id="progressBar">
<div class="progress-buffered" id="progressBuffered"></div>
<div class="progress-played" id="progressPlayed"></div>
<div class="progress-thumb" id="progressThumb"></div>
</div>
<!-- 控制按钮组 -->
<div class="controls-bottom">
<div class="controls-left">
<button class="ctrl-btn" id="playPauseBtn" title="播放/暂停">
<span id="playIcon">▶</span>
</button>
<button class="ctrl-btn" id="nextBtn" title="下一个">⏭</button>
<div class="volume-control">
<button class="ctrl-btn" id="muteBtn" title="静音">🔊</button>
<div class="volume-slider" id="volumeSlider">
<div class="volume-fill" id="volumeFill"></div>
<div class="volume-thumb" id="volumeThumb"></div>
</div>
</div>
<div class="time-display">
<span id="currentTime">00:00</span>
<span> / </span>
<span id="duration">00:00</span>
</div>
</div>
<div class="controls-right">
<!-- 弹幕开关 -->
<div class="danmaku-control">
<button class="ctrl-btn danmaku-toggle" id="danmakuToggle" title="弹幕开关">
💬 <span class="badge" id="danmakuCount">0</span>
</button>
<input type="text" class="danmaku-input" id="danmakuInput" placeholder="发个弹幕呗~" maxlength="50">
<button class="ctrl-btn send-btn" id="sendDanmaku" title="发送">发送</button>
</div>
<!-- 倍速 -->
<div class="speed-control">
<button class="ctrl-btn" id="speedBtn" title="倍速">1.0x</button>
<div class="speed-menu" id="speedMenu">
<div data-speed="0.5">0.5x</div>
<div data-speed="0.75">0.75x</div>
<div data-speed="1" class="active">1.0x 正常</div>
<div data-speed="1.25">1.25x</div>
<div data-speed="1.5">1.5x</div>
<div data-speed="2">2.0x</div>
</div>
</div>
<!-- 画质 -->
<div class="quality-control">
<button class="ctrl-btn" id="qualityBtn" title="画质">720P</button>
<div class="quality-menu" id="qualityMenu">
<div data-quality="1080P">1080P 高清</div>
<div data-quality="720P" class="active">720P 高清</div>
<div data-quality="480P">480P 流畅</div>
<div data-quality="360P">360P 流畅</div>
</div>
</div>
<!-- 全屏 -->
<button class="ctrl-btn" id="fullscreenBtn" title="全屏">⛶</button>
</div>
</div>
</div>
</div>
<!-- 视频信息 -->
<div class="video-info">
<h1 class="video-title" id="videoTitle">Big Buck Bunny - 经典动画短片</h1>
<div class="video-meta">
<div class="meta-left">
<span class="play-count">▶ 128.5万播放</span>
<span class="danmaku-count">💬 3.2万弹幕</span>
<span class="upload-time">2024-01-15</span>
</div>
<div class="meta-right">
<button class="action-btn like-btn" id="likeBtn">
<span class="icon">👍</span>
<span class="count">8.6万</span>
</button>
<button class="action-btn dislike-btn" id="dislikeBtn">
<span class="icon">👎</span>
</button>
<button class="action-btn coin-btn" id="coinBtn">
<span class="icon">🪙</span>
<span class="count">投币</span>
</button>
<button class="action-btn fav-btn" id="favBtn">
<span class="icon">⭐</span>
<span class="count">收藏</span>
</button>
<button class="action-btn share-btn" id="shareBtn">
<span class="icon">↗</span>
<span class="count">分享</span>
</button>
</div>
</div>
</div>
<!-- UP主信息 -->
<div class="up-info">
<div class="up-avatar">🐰</div>
<div class="up-details">
<div class="up-name">BlenderStudio</div>
<div class="up-fans">32.5万粉丝</div>
</div>
<button class="follow-btn" id="followBtn">+ 关注</button>
</div>
<!-- 视频简介 -->
<div class="video-desc">
<p>Big Buck Bunny（大雄兔）是一部由Blender基金会制作的经典开源动画短片。讲述了一只巨大的兔子在森林中与小动物们发生的故事。</p>
<div class="tags">
<span class="tag">动画</span>
<span class="tag">开源</span>
<span class="tag">Blender</span>
<span class="tag">短片</span>
</div>
</div>
<!-- 评论区 -->
<div class="comments-section">
<h3>评论 <span class="comment-count">(2,356)</span></h3>
<div class="comment-input">
<div class="comment-avatar">👤</div>
<div class="comment-form">
<textarea placeholder="发一条友善的弹幕吧~" id="commentInput"></textarea>
<div class="comment-actions">
<span class="char-count"><span id="charCount">0</span>/500</span>
<button class="send-comment-btn" id="sendCommentBtn">发表评论</button>
</div>
</div>
</div>
<div class="comment-list" id="commentList">
<!-- 评论由JS动态生成 -->
</div>
</div>
</div>
<!-- 右侧：视频列表 -->
<div class="sidebar">
<div class="playlist-tabs">
<button class="tab active" data-tab="related">相关推荐</button>
<button class="tab" data-tab="playlist">播放列表</button>
</div>
<div class="video-list" id="videoList">
<!-- 视频列表由JS动态生成 -->
</div>
</div>
</div>
<!-- 投币弹窗 -->
<div class="modal" id="coinModal">
<div class="modal-content">
<div class="modal-header">
<h3>投币</h3>
<button class="modal-close" id="closeCoinModal">×</button>
</div>
<div class="modal-body">
<p>选择投币数量：</p>
<div class="coin-options">
<button class="coin-option" data-coin="1">1枚 🪙</button>
<button class="coin-option" data-coin="2">2枚 🪙</button>
</div>
<p class="coin-balance">当前硬币余额：256枚</p>
</div>
</div>
</div>
<!-- Toast提示 -->
<div class="toast" id="toast"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="js/video.js"></script>
</body>
</html>
AtomGit AI 社区提供模型库、数据集、Agent、Token等资源
更多推荐
0
0- 0
已为社区贡献8条内容
所有评论(0)