js如何在浏览器中分割和裁剪音视频文件保存下载?
网友回复
使用ffmpeg.js实现
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>音视频分割与裁剪</title> <style> body { font-family: Arial, sans-serif; padding: 20px; } button { margin: 5px; padding: 8px 16px; } #output { margin-top: 20px; } </style> </head> <body> <h1>音视频分割与裁剪</h1> <input type="file" id="fileInput" accept="audio/*,video/*" /> <br /> <h3>裁剪</h3> <label>开始时间 (秒): <input type="number" id="startTime" value="10" min="0" /></label> <label>持续时间 (秒): <input type="number" id="duration" value="20" min="1" /></label> <button onclick="trimFile()">裁剪文件</button> <h3>分割</h3> <label>分割间隔 (秒): <input type="number" id="segmentTime" value="10" min="1" /></label> <button onclick="splitFile()">分割文件</button> <div id="output"></div> <!-- 通过 CDN 加载 ffmpeg.wasm --> <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.10.1/dist/ffmpeg.min.js"></script> <script> const { createFFmpeg, fetchFile } = FFmpeg; const ffmpeg = createFFmpeg({ log: true }); // 初始化 ffmpeg 实例 let fileData = null; // 存储上传的文件数据 // 文件选择事件 document.getElementById('fileInput').addEventListener('change', async (e) => { const file = e.target.files[0]; if (file) { fileData = await file.arrayBuffer(); // 读取文件为 ArrayBuffer alert('文件已加载,请选择裁剪或分割操作'); } }); // 加载 ffmpeg async function loadFFmpeg() { if (!ffmpeg.isLoaded()) { await ffmpeg.load(); console.log('ffmpeg.wasm 已加载'); } } // 裁剪文件 async function trimFile() { const startTime = document.get...
点击查看剩余70%
python如何实现torrent的服务端进行文件分发p2p下载?
如何在浏览器中录制摄像头和麦克风数据为mp4视频保存下载本地?
go如何编写一个类似docker的linux的虚拟容器?
python如何写一个bittorrent的种子下载客户端?
ai能通过看一个网页的交互过程视频自主模仿复制网页编写代码吗?
ai先写功能代码通过chrome mcp来进行测试功能最后ai美化页面这个流程能行吗?
vue在手机端上下拖拽元素的时候如何禁止父元素及body的滚动导致无法拖拽完成?
使用tailwindcss如何去掉响应式自适应?
有没有直接在浏览器中运行的离线linux系统?
nginx如何保留post或get数据进行url重定向?