效果图

体验地址

快速开始

随着AI生成视频的需求越来越大，视频编辑器的重要性日益体现，适合中小型开发团队或个人开发者的...

废话到此为止！让我们快速开始！

npm i easecut-react

home.tsx

import { EaseCut } from "easecut-react";
import "easecut-react/styles.css";

export function App() {
  return <EaseCut />;
}

好了。

明暗主题

theme 支持 "light" 和 "dark"，未传时默认使用深色主题。

import { EaseCut } from "easecut-react";
import "easecut-react/styles.css";

export function App() {
  return <EaseCut theme="light" />;
}

theme 是受控属性，更新它即可在运行时切换主题。

导入素材 & 导出视频 & 关闭编辑器

导入素材

import { useRef } from "react";
import { EaseCut, type EaseCutHandle } from "easecut-react";
import "easecut-react/styles.css";

export function App() {
  const editorRef = useRef<EaseCutHandle>(null);

  return (
    <>
      <button 
        onClick={() => 
          void editorRef.current?.source.add("/video.mp4")
        }>
        导入素材
      </button>
      <EaseCut ref={editorRef} />
    </>
  );
}

导出视频

import { EaseCut } from "easecut-react";
import "easecut-react/styles.css";

export function App() {
  return (
    <EaseCut
      onExport={async ({ payload }) => {
        await fetch("/api/export", {
          method: "POST",
          body: JSON.stringify(payload),
        });
      }}
    />
  );
}

EaseCut 不直接编码视频，onExport 用于将导出数据交给后端渲染。

关闭编辑器

import { useState } from "react";
import { EaseCut } from "easecut-react";
import "easecut-react/styles.css";

export function App() {
  const [open, setOpen] = useState(true);

  if (!open) return null;

  return <EaseCut onClose={() => setOpen(false)} />;
}

重要

实在懒得写README了，还有好多操作API没列出来，功能还是比较全面的，很多东西都考虑到了，如果有疑惑的话请通过以下方式解决：

• 问你的AI，它知道怎么做
• EaseCut\docs\npm-component-usage.md 有较为详细的使用说明
• 如果确实是EaseCut没做好，请提交Issues
• 发送邮件至[email protected]

官方文档在制作路上...

也欢迎任何人进行贡献

许可证

基于 MIT 许可证发布。