vue3 实现 “ fly-cut 在线视频剪辑 ”
参考地址:https://fly-cut.videocovert.online/
git源码地址:https://github.com/x007xyz/fly-cut
改版示例图:
功能点:
1、通过视频链接地址在浏览器中下载下来,并加载到页面中,展示时间、时间刻度、进度条以及视频基本信息
2、时间刻度以及进度条部分
(1)选中进度条后,才能进行 “分割/删除” 操作;同时刻度线呈现蓝色,选中部分显示选中框以及两端的拖动砝码,拖动任意一端的砝码,可以改变当前所选时间段的时间范围;右上侧的当前时间段以及分割的所有时间段才能显示出来。
(2)当点击右上侧的播放按钮时,时间刻度砝码会定位到当前时间段的初始时间,并播放直到该时间段结束自动暂停
(3)当点击分割(ctrl+x)时,需将时间刻度上的砝码拖动到需要分割的时间点上,再选中进度条,然后再点击分割按钮或者快捷键即可。
(4)当点击删除(delete)时,需选中某个进度条时间段,再点击删除按钮或快捷键即可。
(5)当需要改变时间刻度的疏密程度,点击右侧的 图标进行调整
(6)当拖动时间刻度砝码时,视频会跟着进度条时间走
(7)当点击中间 “ 播放/暂停 ” 按钮时,时间刻度砝码会跟着进度条走
(8)当点击 “ 合成视频 ” 时,时间段剪切好后,多个时间段上传至后台
希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~