webFileReader

warning

不稳定的 API：此包是实验性的。我们可能随时更改 API，直到删除此通知。

一个用于 @remotion/media-parser 的阅读器，从一个 File 对象中读取。
它只在浏览器中工作。
如果您想要从 <input type="file"> 元素解析视频，这将非常有用。

示例

读取本地文件
tsx
import React, {useCallback} from 'react';
import {parseMedia} from '@remotion/media-parser';
import {webFileReader} from '@remotion/media-parser/web-file';
 
const MyComp: React.FC = () => {
  const onFile = useCallback(async (file: File) => {
    const result = await parseMedia({
      src: file,
      fields: {
        durationInSeconds: true,
        dimensions: true,
      },
      reader: webFileReader,
    });
  }, []);
 
  return (
    <input type="file" onChange={(e) => onFile(e.target.files?.[0]!)} />
  );
}

读取本地文件
tsx
import React, {useCallback} from 'react';
import {parseMedia} from '@remotion/media-parser';
import {webFileReader} from '@remotion/media-parser/web-file';
 
const MyComp: React.FC = () => {
  const onFile = useCallback(async (file: File) => {
    const result = await parseMedia({
      src: file,
      fields: {
        durationInSeconds: true,
        dimensions: true,
      },
      reader: webFileReader,
    });
  }, []);
 
  return (
    <input type="file" onChange={(e) => onFile(e.target.files?.[0]!)} />
  );
}

示例​

示例