MediaBunny通过浏览器本地离线拖拽裁剪视频片段导出mp4代码-html代码-BFW代码库

MediaBunny通过浏览器本地离线拖拽裁剪视频片段导出mp4代码

代码语言：html

所属分类：多媒体

代码描述：MediaBunny通过浏览器本地离线拖拽裁剪视频片段导出mp4代码，可拖动选择起始位置。

代码标签： MediaBunny 浏览器本地离线拖拽裁剪视频片段导出 mp4 代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
<title>MediaBunny · 拖拽起止截取视频并导出 MP4</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.5.1.css">
<style>
:root{
  --bg:#0f1221; --card:#1a1f36; --panel:#151a31; --text:#e8ecff; --muted:#aab0d9;
  --border:#2a2f55; --accent:#7c7bff; --accent2:#00d4ff; --danger:#ef4444; --success:#22c55e;
}
*{box-sizing:border-box}
body{margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; display:flex; align-items:center; justify-content:center; padding:20px}
main{width:100%; max-width:1100px; background:var(--card); border:1px solid var(--border); border-radius:18px; padding:20px; box-shadow: 0 12px 40px rgba(0,0,0,.35)}
.header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.title{display:flex; align-items:center; gap:10px; font-weight:900}
.title .dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2))}
.actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.btn{appearance:none; border:1px solid var(--border); background:#20264a; color:#fff; padding:.6rem 1rem; border-radius:10px; cursor:pointer; font-weight:800; display:inline-flex; align-items:center; gap:8px}
.btn:hover{background:#222b58}
.btn.primary{background:linear-gradient(135deg,var(--accent),#9d98ff); border-color:#7d80ff; color:#0e1030}
.btn.success{background:linear-gradient(135deg,#16a34a,#22c55e); border:0; color:#07170f}
.input-file{display:none}
.tag{font-size:12px; color:#cfd5ff; border:1px solid rgba(255,255,255,.14); padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06)}

.grid{display:grid; grid-template-columns:1fr; gap:12px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:12px}
.card h3{margin:0 0 10px; font-size:16px}
.video{width:100%; background:#000; border-radius:12px; border:1px solid var(--border)}

.controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px}
.kbd{background:#11162c; border:1px solid #2a3058; border-radius:6px; padding:2px 6px; font-family:ui-monospace,monospace; font-size:12px}

.timeline{border:1px solid var(--border); border-radius:12px; background:#0b0f24; padding:10px}
.bar{position:relative; width:100%; height:90px; border-radius:10px; overflow:hidden; background:#0f1430; user-select:none; cursor:default}
#thumbs{position:absolute; inset:0; display:flex}
#thumbs img{height:100%; object-fit:cover; flex:0 0 auto}
.shade{position:absolute; top:0; bottom:0; background:rgba(0,0,0,.45)}
#shadeLeft{left:0}
#shadeRight{right:0}
.handle{position:absolute; top:0; width:10px; height:100%; background:linear-gradient(180deg,#7c7bff,#4f46e5); border:1px solid #aab0ff; border-radius:4px; cursor:ew-resize; box-shadow:0 0 0 3px rg.........完整代码请登录后点击上方下载按钮下载查看