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

代码语言：html

所属分类：其他

代码由mimo-v2.5-pro 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>CutStudio - 在线视频剪辑工作台</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400;500&family=Syne:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-deep:#08080c;--bg-main:#0d0d14;--bg-panel:#111118;--bg-surface:#17171f;
  --bg-elevated:#1e1e2a;--bg-hover:#252534;
  --border:#2a2a3a;--border-light:#363650;
  --accent:#00d4ff;--accent-dim:#005f73;--accent-glow:rgba(0,212,255,0.15);
  --danger:#ff3366;--success:#00e68a;--warning:#ffaa22;
  --text:#e2e2ee;--text-sec:#9090a8;--text-muted:#555568;
  --clip-video:#2563eb;--clip-video-bg:rgba(37,99,235,0.25);
  --clip-audio:#10b981;--clip-audio-bg:rgba(16,185,129,0.25);
  --clip-text:#a855f7;--clip-text-bg:rgba(168,85,247,0.25);
  --clip-image:#f59e0b;--clip-image-bg:rgba(245,158,11,0.25);
  --clip-h:44px;--track-header-w:148px;--ruler-h:28px;
  --pps:80;
}
html,body{height:100%;overflow:hidden;font-family:'DM Mono',monospace;background:var(--bg-deep);color:var(--text)}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 20% 30%,rgba(0,212,255,0.03) 0%,transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(0,212,255,0.02) 0%,transparent 50%);pointer-events:none;z-index:0}

/* Layout */
#app{display:grid;grid-template-rows:48px 1fr 290px;grid-template-columns:260px 1fr;height:100vh;position:relative;z-index:1}
#toolbar{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:0 16px;background:var(--bg-panel);border-bottom:1px solid var(--border);z-index:50}
#media-panel{grid-row:2;display:flex;flex-direction:column;background:var(--bg-panel);border-right:1px solid var(--border);overflow:hidden}
#preview-area{grid-row:2;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-main);position:relative;overflow:hidden;padding:20px}
#timeline-panel{grid-column:1/-1;display:flex;flex-direction:column;background:var(--bg-panel);border-top:1px solid var(--border);overflow:hidden}

/* Toolbar */
.logo{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:0.12em;color:var(--accent);margin-right:24px;flex-shrink:0}
.logo span{color:var(--text-muted);font-size:14px;letter-spacing:0.08em;margin-left:4px}
.tb-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--border);border-radius:6px;background:var(--bg-surface);color:var(--text-sec);font-family:'DM Mono',monospace;font-size:11px;cursor:pointer;transition:all .2s;white-space:nowrap;letter-spacing:0.03em}
.tb-btn:hover{border-color:var(--border-light);color:var(--text);background:var(--bg-elevated)}
.tb-btn.primary{border-color:var(--accent-dim);color:var(--accent);background:rgba(0,212,255,0.08)}
.tb-btn.primary:hover{background:rgba(0,212,255,0.15);box-shadow:0 0 20px rgba(0,212,255,0.1)}
.tb-btn.danger{border-color:rgba(255,51,102,0.3);color:var(--danger)}
.tb-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tb-sep{width:1px;height:24px;background:var(--border);margin:0 8px;flex-shrink:0}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.tb-shortcut{font-size:9px;color:var(--text-muted);background:var(--bg-deep);padding:2px 5px;border-radius:3px;margin-left:4px}

/* Media Panel */
.mp-header{padding:14px 16px 10px;font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:0.2em;color:var(--text-sec);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.mp-count{font-family:'DM Mono',monospace;font-size:10px;color:var(--text-muted);letter-spacing:0.05em}
.mp-dropzone{margin:12px 12px 8px;border:1.5px dashed var(--border-light);border-radius:8px;padding:24px 16px;text-align:center;cursor:pointer;transition:all .25s;flex-shrink:0}
.mp-dropzone:hover,.mp-dropzone.drag-over{border-color:var(--accent);background:var(--accent-glow)}
.mp-dropzone svg{width:28px;height:28px;stroke:var(--text-muted);fill:none;stroke-width:1.5;margin-bottom:8px}
.mp-dropzone p{font-size:11px;color:var(--text-muted);line-height:1.6}
.mp-dropzone .accent{color:var(--accent)}
.mp-list{flex:1;overflow-y:auto;padding:8px 12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.mp-list::-webkit-scrollbar{width:4px}
.mp-list::-webkit-scrollbar-track{background:transparent}
.mp-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.mp-item{position:relative;border-radius:6px;overflow:hidden;cursor:grab;background:var(--bg-surface);border:1px solid var(--border);transition:all .2s;aspect-ratio:16/9}
.mp-item:hover{border-color:var(--border-light);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.mp-item.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.mp-item img,.mp-item canvas{width:100%;height:100%;object-fit:cover;display:block}
.mp-item .mp-info{position:absolute;bottom:0;left:0;right:0;padding:4px 6px;background:linear-gradient(transparent,rgba(0,0,0,0.85));font-size:9px;color:var(--text-sec);letter-spacing:0.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-item .mp-type{position:absolute;top:4px;right:4px;font-size:8px;padding:1px 5px;border-radius:3px;letter-spacing:0.06em;font-weight:500}
.mp-item .mp-type.video{background:rgba(37,99,235,0.7);color:#fff}
.mp-item .mp-type.audio{background:rgba(16,185,129,0.7);color:#fff}
.mp-item .mp-type.image{background:rgba(245,158,11,0.7);color:#fff}
.mp-item .mp-del{position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,0.7);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;cursor:pointer;font-size:10px;color:var(--text-sec)}
.mp-item:hover .mp-del{opacity:1}
.mp-empty{grid-column:1/-1;text-align:center;padding:20px;color:var(--text-muted);font-size:11px}

/* Preview */
#preview-canvas{background:#000;border-radius:4px;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 4px 30px rgba(0,0,0,0.5)}
.preview-controls{display:flex;align-items:center;gap:16px;margin-top:12px;flex-shrink:0}
.pc-btn{width:36px;height:36.........完整代码请登录后点击上方下载按钮下载查看