ffmpeg.js在浏览器中裁剪分割视频代码-html代码-BFW代码库

ffmpeg.js在浏览器中裁剪分割视频代码

代码语言：html

所属分类：多媒体

代码描述：ffmpeg.js在浏览器中裁剪分割视频代码

下面为部分代码预览，完整代码请点击下载或在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>音视频分割与裁剪</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>
  如果出现SharedArrayBuffer is not defined错误，请参开这个解决：https://ask.bfw.wiki/question/17129708576992410025.html

  <!-- 通过 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('文件已加载，请选择裁剪或分割操作');
      }
    });

 .........完整代码请登录后点击上方下载按钮下载查看