Mediabunny实现在浏览器中离线分割视频删除片段合并导出新视频代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：Mediabunny实现在浏览器中离线分割视频删除片段合并导出新视频代码，完全在浏览器中实现，无需后端服务。

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

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>Mediabunny 在线视频分割/删除/导出</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    :root {
      --bg: #0f172a;
      --panel: #111827;
      --muted: #94a3b8;
      --text: #e5e7eb;
      --accent: #06b6d4;
      --accent-2: #22c55e;
      --danger: #ef4444;
      --warning: #f59e0b;
    }
    body {
      margin: 0;
      background: linear-gradient(135deg, #0b1220, #111827);
      color: var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
        "Segoe UI Emoji";
    }
    .container {
      max-width: 1100px;
      margin: 24px auto;
      padding: 0 16px 64px;
    }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
    }
    h1 {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      font-size: 20px;
      margin: 0;
      color: #d1e9ff;
    }
    .panel {
      background: rgba(17, 24, 39, 0.75);
      border: 1px solid rgba(148, 163, 184, 0.15);
      border-radius: 14px;
      padding: 16px;
      margin-bottom: 16px;
      backdrop-filter: blur(6px);
    }
    .row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
    }
    .grow { flex: 1; }
    input[type="text"], input[type="number"], select {
      background: #0b1220;
      color: var(--text);
      border: 1px solid rgba(148,163,184,0.25);
      border-radius: 10px;
      padding: 10px 12px;
      outline: none;
      min-width: 0;
    }
    input[type="range"] {
      width: 100%;
    }
    button {
      background: #0b1220;
      color: var(--text);
      border: 1px solid rgba(148,163,184,0.3);
      padding: 10px 14px;
      border-radius: 10px;
      cursor: pointer;
      transition: all .15s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    button:hover { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(6,182,212,0.2) inset; }
    button.primary { background: linear-gradient(135deg,#06b6d4,#3b82f6); border: none; }
    button.success { background: linear-gradient(135deg,#22c55e,#16a34a); border: none; }
    button.warn { background: linear-gradient(135deg,#f59e0b,#f97316); border: none; }
    button.danger { background: linear-gradient(135deg,#ef4444,#f43f5e); border: none; }
    button:disabled { opacity: .6; cursor: not-allowed; }

    video {
      width: 100%;
      max-height: 420px;
      background: #000;
      border-radius: 12px;
      border: 1px solid rgba(148,163,184,0.2);
    }
    .badges { display:flex; gap:8px; flex-wrap: wrap; }
    .badge {
      padding: 4px 8px;
      background: rgba(148,163,184,0.12);
      border: 1px solid rgba(148,163,184,0.2);
      border-radius: 999px;
      font-size: 12px;
      color: #cbd5e1;
    }
    .muted { color: var(--muted); }
    .seg-list { width: 100%; border-collapse: collapse; }
    .seg-list th, .seg-list td {
      border-bottom: 1px dashed rgba(148,163,184,0.2);
      padding: 8px 6px;
      text-align: left;
      font-size: 14px;
    }
    .seg-list tr:hover { background: rgba(148,163,184,0.08); }
    .right { text-align: right; }
    progress {
      width: 100%;
      height: 14px;
      accent-color: var(--accent);
    }
    .hint {
      font-size: 12px;
      color: var(--muted);
    }
    .code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      background: rgba(148,163,184,0.12);
      padding: 2px 6px;
      border-radius: 6px;
    }
    .footer-note { font-size: 12px; color: var(--muted); margin-top: 8px; }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>🎬 在线视频分割/删除/合成导出（Mediabunny）</h1>
      <div class="badges">
        <span class="badge">前端解码/编码</span>
        <span class="badge">MP4 优先</span>
        <span class="badge">WebM 回退</span>
      </div>
    </header>

    <div class="panel">
      <div class="row" style="align-items:flex-start">
        <div class="grow">
          <div class="row">
            <input type="file" id="fileInput" accept="video/*,audio/*" />
            <span class="muted">或</span>
            <input class="grow" type="text" id="urlInput" placeholder="粘贴网络视频 URL（需支持 Range + 允许 CORS）".........完整代码请登录后点击上方下载按钮下载查看