如何从存储于S3的MP4文件元数据中读取章节信息？

首先明确：你用HeadObjectCommand和GetObjectCommand拿到的是S3对象的存储元数据（如文件大小、修改时间、自定义HTTP头），而MP4的章节信息存在文件自身的**媒体元数据（moov原子）**里，这部分内容不会暴露在S3的对象元数据中——QuickTime能读取是因为它会解析MP4文件的内部结构，而非依赖S3返回的元数据。

以下是两种可行方案，适配你的自定义React播放器需求：

方案1：前端直接解析MP4文件（无需后端修改） #

使用专门处理MP4的JavaScript库mp4box.js，它可以解析MP4内部的章节数据。步骤如下：

1. 安装依赖：

   npm install mp4box
   

2. 从Cloudfront/S3请求MP4文件的部分内容（Final Cut导出的MP4通常会把章节所在的moov原子放在文件头部），然后用mp4box解析：

   import MP4Box from 'mp4box';
   
   async function fetchMP4Chapters(url) {
     const response = await fetch(url);
     const mp4File = MP4Box.createFile();
     let chapters = [];
   
     mp4File.onReady(info => {
       // 从MP4元数据提取章节
       if (info.chapters) {
         chapters = info.chapters.map(chap => ({
           title: chap.title,
           startTime: chap.startTime / 1000, // 转换为秒
           endTime: chap.endTime / 1000
         }));
       }
     });
   
     // 分块读取文件内容（适配大文件）
     const reader = response.body.getReader();
     let offset = 0;
     while (true) {
       const { done, value } = await reader.read();
       if (done) break;
       mp4File.appendBuffer(value, offset);
       offset += value.length;
     }
     mp4File.flush();
   
     return chapters;
   }
   
   // React组件中调用示例
   // const chapters = await fetchMP4Chapters('你的Cloudfront MP4地址');
   

方案2：上传时预处理（后端提取章节并存入S3元数据） #

如果不想在前端处理文件解析，可以在MP4上传到S3前，用后端脚本提取章节，然后将章节信息以JSON格式存入S3对象的自定义元数据（如x-amz-meta-chapters）：

1. 后端用mp4box提取章节（Node.js示例）：

   const MP4Box = require('mp4box');
   const fs = require('fs');
   
   function extractChapters(filePath) {
     return new Promise((resolve) => {
       const mp4File = MP4Box.createFile();
       mp4File.onReady(info => {
         resolve(info.chapters ? JSON.stringify(info.chapters) : null);
       });
       const stream = fs.createReadStream(filePath);
       let offset = 0;
       stream.on('data', chunk => {
         mp4File.appendBuffer(chunk, offset);
         offset += chunk.length;
       });
       stream.on('end', () => mp4File.flush());
     });
   }
   

2. 上传到S3时携带自定义元数据：

   const command = await s3.send(
     new PutObjectCommand({
       Bucket: bucket,
       Key: `file.mp4`,
       Body: fileStream,
       Metadata: {
         chapters: await extractChapters(localFilePath)
       }
     })
   );
   

3. 前端用HeadObjectCommand获取并解析章节：

   const command = await s3.send(
     new HeadObjectCommand({
       Bucket: bucket,
       Key: `file.mp4`,
     })
   );
   const chapters = JSON.parse(command.Metadata.chapters);
   

备选方案：使用VTT文件 #

如果上述方案都不符合需求，你可以回到最初的计划：提取章节生成VTT文件，上传到S3并和MP4关联，在React播放器中通过track标签加载：

<video>
  <source src="你的Cloudfront MP4地址" type="video/mp4">
  <track kind="chapters" src="章节VTT文件地址" srclang="zh" label="章节">
</video>

内容的提问来源于stack exchange，提问作者Amie Wilt