js实现在线视频时间轴轨道剪辑代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由glm-5.1 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：web在线视频剪辑软件（类似剪映）

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ClipForge - 在线视频剪辑</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<style>
:root {
  --bg0:#0b0b0f;--bg1:#131318;--bg2:#1a1a22;--bg3:#222230;
  --border:#2a2a3a;--text:#e0e0ec;--muted:#6a6a80;
  --accent:#ff3b3b;--accent2:#ff6b4a;
  --video:#3b9eff;--audio:#f59e0b;--text-track:#c084fc;--image:#34d399;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Noto Sans SC',sans-serif;background:var(--bg0);color:var(--text);overflow:hidden;height:100vh;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--bg1);}
::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:#3a3a50;}

/* 工具栏 */
.toolbar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg1);border-bottom:1px solid var(--border);flex-shrink:0;z-index:20;}
.toolbar .logo{font-weight:900;font-size:1.15rem;letter-spacing:-0.03em;margin-right:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.tb-sep{width:1px;height:24px;background:var(--border);margin:0 4px;}
.tb-btn{display:flex;align-items:center;gap:5px;padding:6px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);color:var(--text);font-size:0.8rem;font-family:inherit;cursor:pointer;transition:all .15s;white-space:nowrap;}
.tb-btn:hover{background:var(--bg3);border-color:#3a3a50;}
.tb-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;}
.tb-btn.primary:hover{background:var(--accent2);}
.tb-btn .material-icons-round{font-size:16px;}

/* 工作区 */
.workspace{display:flex;flex:1;min-height:0;overflow:hidden;}

/* 预览面板 */
.preview-panel{flex:1;display:flex;flex-direction:column;background:var(--bg0);min-width:0;}
.preview-viewport{flex:1;display:flex;align-items:center;justify-content:center;background:#000;position:relative;overflow:hidden;min-height:0;}
.preview-viewport canvas{max-width:100%;max-height:100%;display:block;}
.preview-controls{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg1);border-top:1px solid var(--border);flex-shrink:0;}
.pc-btn{width:32px;height:32px;border:none;border-radius:6px;background:var(--bg2);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.pc-btn:hover{background:var(--bg3);}
.pc-btn.play-btn{width:36px;height:36px;background:var(--accent);border-radius:50%;}
.pc-btn.play-btn:hover{background:var(--accent2);}
.pc-btn .material-icons-round{font-size:18px;}
.pc-btn.play-btn .material-icons-round{font-size:20px;}
.time-display{font-size:0.78rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:120px;text-align:center;}
.zoom-ctrl{display:flex;align-items:center;gap:4px;margin-left:auto;}
.zoom-ctrl span{font-size:0.75rem;color:var(--muted);min-width:40px;text-align:center;}

/* 素材面板 */
.media-panel{width:260px;display:flex;flex-direction:column;background:var(--bg1);border-left:1px solid var(--border);flex-shrink:0;}
.media-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;}
.media-tab{flex:1;padding:8px 0;text-align:center;font-size:0.75rem;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;}
.media-tab:hover{color:var(--text);}
.media-tab.active{color:var(--text);border-bottom-color:var(--accent);}
.media-list{flex:1;overflow-y:auto;padding:8px;}
.media-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--bg2);margin-bottom:6px;cursor:pointer;transition:all .15s;border:1px solid transparent;}
.media-item:hover{background:var(--bg3);border-color:var(--border);}
.media-item .mi-icon{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.media-item .mi-icon.video{background:rgba(59,158,255,.15);color:var(--video);}
.media-item .mi-icon.audio{background:rgba(245,158,11,.15);color:var(--audio);}
.media-item .mi-icon.image{background:rgba(52,211,153,.15);color:var(--image);}
.media-item .mi-icon.text{background:rgba(192,132,252,.15);color:var(--text-track);}
.media-item .mi-info{flex:1;min-width:0;}
.media-item .mi-name{font-size:0.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.media-item .mi-dur{font-size:0.65rem;color:var(--muted);}
.media-item .mi-add{width:24px;height:24px;border:none;border-radius:4px;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;transition:opacity .15s;}
.media-item:hover .mi-add{opacity:1;}
.media-item .mi-add .material-icons-round{font-size:14px;}
.media-add-btn{display:fle.........完整代码请登录后点击上方下载按钮下载查看