能否用JavaScript从1-3GB视频提取Geotags并在地图标记？

好问题！之前我也碰到过类似需求，完全可以用前端JavaScript实现提取视频地理标签并标记到地图上，不用把1-3GB的大视频上传到服务端处理，能省不少带宽和等待时间。下面给你详细拆解方案：

核心思路：用WebAssembly版FFmpeg处理视频元数据 #

服务端的FFmpeg之所以能行，是因为它能解析视频容器里的元数据。现在有WebAssembly版本的FFmpeg（ffmpeg.wasm），可以直接在浏览器里运行，不用依赖后端。这是目前处理复杂视频元数据最可靠的前端方案。

步骤1：加载并解析视频元数据 #

首先通过input[type=file]让用户选择本地视频，然后用ffmpeg.wasm提取元数据中的GPS信息。这里要注意，大视频处理会占用较多浏览器内存，建议提前给用户提示（比如“处理大视频可能需要几分钟，请不要关闭页面”）。

示例代码：

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

// 初始化FFmpeg实例，开启日志方便调试
const ffmpeg = createFFmpeg({ log: true });

async function getVideoGPS(file) {
  // 先加载FFmpeg核心文件（首次加载会下载，后续缓存）
  await ffmpeg.load();
  
  // 将本地视频写入FFmpeg的虚拟文件系统
  ffmpeg.FS('writeFile', 'target.mp4', await fetchFile(file));
  
  // 执行命令提取元数据到文本文件
  await ffmpeg.run('-i', 'target.mp4', '-f', 'ffmetadata', 'gps-info.txt');
  
  // 读取并解析元数据内容
  const metadataContent = ffmpeg.FS('readFile', 'gps-info.txt').toString();
  
  // 匹配GPS纬度和经度（不同视频的元数据格式可能略有差异，需要适配）
  const latMatch = metadataContent.match(/GPSLatitude=(.*)\n/);
  const lngMatch = metadataContent.match(/GPSLongitude=(.*)\n/);
  
  if (latMatch && lngMatch) {
    // 把FFmpeg输出的度分秒格式（如"39/1, 54/1, 1234/100"）转成十进制坐标
    const latitude = convertGPSCoordinate(latMatch[1]);
    const longitude = convertGPSCoordinate(lngMatch[1]);
    return { latitude, longitude };
  }
  
  return null;
}

// 度分秒转十进制坐标的工具函数
function convertGPSCoordinate(coordinateStr) {
  const [degrees, minutes, seconds] = coordinateStr.split(', ').map(part => {
    const [num, den] = part.split('/');
    return parseInt(num) / parseInt(den);
  });
  return degrees + minutes/60 + seconds/3600;
}

步骤2：在地图上标记位置 #

拿到经纬度后，就可以用任意前端地图库（比如Leaflet、原生高德/百度地图API）标记位置。这里用Leaflet举个简单例子：

<!-- 先引入Leaflet的CSS和JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<!-- 地图容器 -->
<div id="map" style="width: 100%; height: 400px;"></div>

// 假设已经通过getVideoGPS拿到了坐标
async function renderMapWithGPS(file) {
  const gps = await getVideoGPS(file);
  if (!gps) {
    alert('该视频未包含地理标签');
    return;
  }
  
  // 初始化地图
  const map = L.map('map').setView([gps.latitude, gps.longitude], 15);
  
  // 添加底图图层
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);
  
  // 添加标记点
  L.marker([gps.latitude, gps.longitude]).addTo(map)
    .bindPopup('视频拍摄位置')
    .openPopup();
}

// 绑定文件选择事件
document.querySelector('input[type="file"]').addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file) {
    renderMapWithGPS(file);
  }
});

注意事项 #

• 内存限制：1-3GB的视频在浏览器中处理会占用大量内存，部分低配设备或老浏览器可能出现卡顿甚至崩溃。建议让用户关闭其他无关标签页，或者考虑添加“处理中”的加载提示。
• 兼容性：ffmpeg.wasm需要浏览器支持WebAssembly，现代Chrome、Firefox、Edge都没问题，但IE完全不支持。
• 元数据格式差异：不同设备拍摄的视频，GPS元数据的存储格式可能不同（比如有些用XMP格式），如果上面的正则匹配不到，可能需要调整解析逻辑，或者用ffmpeg.wasm导出更详细的元数据进行分析。
• 替代方案：如果只需要处理简单的视频格式，也可以试试专门的元数据解析库（比如video-metadata-parser），但这类库对复杂视频容器的支持不如ffmpeg.wasm全面。

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