Skip to main content

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]!)} />
);
}