React多分辨率播放器开发：如何找多分辨率视频并无库获取其分辨率？

一、获取不同分辨率的视频文件 #

• 自行转码生成：使用FFmpeg命令行工具，将原始视频批量转码为不同分辨率版本，示例命令：

  # 转码为1080p
  ffmpeg -i input.mp4 -vf scale=1920:1080 -c:v libx264 -crf 23 -preset medium output_1080p.mp4
  # 转码为720p
  ffmpeg -i input.mp4 -vf scale=1280:720 -c:v libx264 -crf 23 -preset medium output_720p.mp4
  # 转码为480p
  ffmpeg -i input.mp4 -vf scale=854:480 -c:v libx264 -crf 23 -preset medium output_480p.mp4
  

• 使用开源测试视频：像Big Buck Bunny、Sintel这类开源演示视频，官方通常提供多种分辨率的版本，可直接下载用于开发测试。
• 用户上传后后端转码：若用户仅上传单分辨率视频，可在后端部署FFmpeg服务，接收到文件后自动生成多分辨率副本，存储后供前端播放器调用。

二、无第三方库获取视频分辨率详情 #

利用浏览器原生HTML5 Video API即可实现，在React中可以这样处理：

1. 处理本地上传文件 #

import { useState } from 'react';

const VideoResolutionChecker = () => {
  const [resolutions, setResolutions] = useState([]);

  const handleFileUpload = (e) => {
    const files = Array.from(e.target.files);
    const resolutionPromises = files.map(file => {
      return new Promise((resolve) => {
        const video = document.createElement('video');
        video.preload = 'metadata';
        video.src = URL.createObjectURL(file);
        
        video.onloadedmetadata = () => {
          const width = video.videoWidth;
          const height = video.videoHeight;
          URL.revokeObjectURL(video.src);
          resolve({ filename: file.name, resolution: `${width}x${height}` });
        };
      });
    });

    Promise.all(resolutionPromises).then(results => {
      setResolutions(results);
    });
  };

  return (
    <div>
      <input type="file" accept="video/*" multiple onChange={handleFileUpload} />
      <ul>
        {resolutions.map((item, index) => (
          <li key={index}>{item.filename}: {item.resolution}</li>
        ))}
      </ul>
    </div>
  );
};

export default VideoResolutionChecker;

2. 处理远程视频文件 #

const getRemoteVideoResolution = (videoUrl) => {
  return new Promise((resolve, reject) => {
    const video = document.createElement('video');
    video.preload = 'metadata';
    // 注意：远程视频需配置CORS，否则会跨域报错
    video.crossOrigin = 'anonymous';
    video.src = videoUrl;

    video.onloadedmetadata = () => {
      resolve({ width: video.videoWidth, height: video.videoHeight });
    };

    video.onerror = () => {
      reject(new Error('无法加载视频元数据'));
    };
  });
};

// 使用示例
getRemoteVideoResolution('https://example.com/video.mp4')
  .then(res => console.log('分辨率:', `${res.width}x${res.height}`))
  .catch(err => console.error(err));

• 关键注意点：远程视频必须在服务器端配置CORS允许跨域访问，否则浏览器会阻止读取视频元数据；本地文件通过URL.createObjectURL生成临时URL，无需担心跨域问题。

内容的提问来源于stack exchange，提问作者Mohd Mustajab khan