5分钟学会React视频裁剪：在浏览器里直接剪辑视频的轻量组件

5分钟学会React视频裁剪：在浏览器里直接剪辑视频的轻量组件

【免费下载链接】react-html5-video-editorReact / Redux video component with crop. Powers demo video editor at项目地址: https://gitcode.com/gh_mirrors/re/react-html5-video-editor

你是不是也遇到过这种情况？手头有一段视频素材，只想截取其中最精彩的几秒，却要为此打开笨重的剪辑软件，导出、转码、再上传，折腾半天😩。如果能直接在网页里拖一拖、拉一拉就把视频裁好，该多省事？

今天要介绍的react-html5-video-editor，就是一个基于 React 和 Redux 的开源视频编辑组件。它主打「网页视频裁剪」能力：拖动时间轴上的裁剪标记，裁剪范围实时更新，整个过程不需要安装任何专业软件，一切都在浏览器里完成。🎬

拖动两个黄色裁剪标记，即可快速圈定视频片段

为什么推荐这个React视频编辑组件？

三步完成React视频裁剪配置

担心自己没经验？完全不用，跟着下面三步走就行。

第 1 步：安装组件

npm init npm install react-html5-video-editor --save

第 2 步：引入并渲染编辑器

只需把视频源和封面图传进去，编辑器就会自动搭好界面：

import {RdxVideo, Overlay, Controls} from 'react-html5-video-editor' ReactDOM.render( <RdxVideo autoPlay loop muted poster="src/img/poster.png" store={store}> <Overlay /> <Controls /> <source src="src/video/small.mp4" type="video/mp4" /> </RdxVideo>, document.getElementById('root') );

第 3 步：拖拽标记，开始裁剪

界面底部时间轴上会出现两个黄色标记，拖动它们就能设定裁剪的起止位置。裁剪数据通过 Redux 统一管理（见 src/reducers/crops.js），组件内部的状态变化清晰可追踪。

想进一步了解组件的组合方式，可以看看核心入口 src/RdxVideo.js，里面用connect把视频组件与 Redux store 绑定在一起，逻辑一目了然。

浏览器视频剪辑实战玩法

这个组件能用在哪些地方？给你几个真实场景参考：

• 🎥 短视频创作→ 为社交媒体快速截取高光片段，拖一拖就能导出想要的段落
• 📚 在线教育→ 老师把长视频裁成一个个知识点小片段，方便学生按需观看
• 💼 产品演示→ 在网页端直接编辑宣传视频，省去本地软件的安装与转码流程
• 🎨 个人博客→ 给网站加上轻量的视频剪辑能力，让访客也能动手玩一玩

新手常见问题与注意事项

问：裁剪标记拖不动？答：先确认RdxVideo.Props里cropEnabled已设为true，这是开启裁剪功能的开关。

问：视频格式支持哪些？答：组件基于 HTML5 video 标签，因此支持浏览器原生支持的格式（如 mp4、webm），选对视频编码格式基本都能正常播放。

现在就动手试试吧

别犹豫了，最好的学习方式就是亲手实践。克隆仓库，导入一段自己的视频，开始你的网页视频剪辑之旅吧：

git clone https://gitcode.com/gh_mirrors/re/react-html5-video-editor

打开编辑器，拖一拖那两个黄色标记，你会立刻感受到「在浏览器里剪辑视频」有多顺畅。期待你的作品！🌟

【免费下载链接】react-html5-video-editorReact / Redux video component with crop. Powers demo video editor at项目地址: https://gitcode.com/gh_mirrors/re/react-html5-video-editor