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" />
<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)}

.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
label.switch{display:inline-flex; align-items:center; gap:8px}
input[type=range]{width:220px}
input[type=number], select{height:36px; background:#0f1430; color:#fff; border:1px solid var(--border); border-radius:8px; padding:6px 8px; width:120px}
.progress{height:10px; border-radius:999px; overflow:hidden; background:#141a3a; border:1px solid var(--border); margin-top:8px}
.progress .bar{height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent2))}
.alert{display:none; margin-top:8px; padding:10px; border-radius:10px; border:1px solid #7c1d1d; background:#1a0f15; color:#ffd6d6}
.warn{display:none; margin-to.........完整代码请登录后点击上方下载按钮下载查看