当前位置: 首页 > article >正文

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)当需要改变时间刻度的疏密程度,点击右侧的 \circleddash \oplus 图标进行调整

(6)当拖动时间刻度砝码时,视频会跟着进度条时间走

(7)当点击中间 “ 播放/暂停 ” 按钮时,时间刻度砝码会跟着进度条走

(8)当点击 “ 合成视频 ” 时,时间段剪切好后,多个时间段上传至后台

      希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~


http://www.kler.cn/a/503823.html

相关文章:

  • 互斥与同步
  • 【微信小程序】5|我的页面 | 我的咖啡店-综合实训
  • Windows核心编程—匿名管道双向通信
  • Python使用socket实现简易的http服务
  • 介绍下不同语言的异常处理机制
  • Linux网络编程5——多路IO转接
  • 【MySQL】count(*)、count(1)和count(列名)区别
  • JAVA:利用 RabbitMQ 死信队列实现支付超时场景的技术指南
  • 第424场周赛:使数组元素等于零、零数组变换 Ⅰ、零数组变换 Ⅱ、最小化相邻元素的最大差值
  • OJ题目下篇
  • AI赋能下的美颜API与滤镜SDK:从传统到深度学习的进化之路
  • 深入理解 Python 的装饰器
  • Elasticsearch ES|QL 地理空间索引加入纽约犯罪地图
  • 计算机的错误计算(二百一十一)
  • 交互数字人:革新沟通的未来
  • Java Agent(三)、ASM 操作字节码入门
  • 【机器学习】神经网络训练技巧
  • 使用VSCode搭建Ruby on Rails集成开发环境
  • mac intel芯片下载安卓模拟器
  • 【css】浏览器强制设置元素状态(hover|focus……)
  • rclone,云存储备份和迁移的瑞士军刀,千字常文解析,附下载链接和安装操作步骤...
  • MAC AndroidStudio模拟器无网络
  • 新版懒人精灵基础老狼孩插件经典例子板块-视频教程
  • C# 内存篇
  • 《零基础Go语言算法实战》【题目 4-1】返回数组中所有元素的总和
  • 蓝牙BT04-A的使用与相关AT指令