利用canvas+vue进行视频碎片合并

williamwen1986 发布于2019-08-20 14:26 / 1526人阅读

摘要：仓库地址利用进行视频碎片合并此注意点并没有考虑性能只支持温柔使用没有状态状态正在完善中默认对象说明是否自动播放表示是否需要显示状态暂停状态播放状态声音控制是否静音进度条总长度这个是需要后端返回的默认播放时间用来显示终点时间当前时间默

仓库地址canvas-merge-video-in-vue 利用canvas+vue进行视频碎片合并 此pro注意点：

1.并没有考虑性能
2.只支持温柔使用
3.没有catch error状态
4.loading状态正在完善中

默认data对象说明

autoPlay: false, // 是否自动播放
currentEnoughToPlay: false, // 表示是否需要显示enoughToPlay状态
pauseing: true, // 暂停状态
playing: false, // 播放状态
sounds: 10, // 声音控制
mutedable: false, // 是否静音
progress: 0, // 进度条
allLength: 0, // 总长度.这个是需要后端返回的
currentTimeLabel: "0:00", // 默认播放时间 用来显示
terminalTimeLabel: "", // 终点时间
currentTime: 0, // 当前时间
currentIndex: 0, // 默认当前播放碎片指引
videoInstance: null, // 当前激活的视频实例
canvasInstance: null, // canvas 实例
playList: [] // 碎片列表

实现思路

1.先把所有视频碎片丢到dom里面

2.控制当前碎片指引，进行实例dom切换

3.video的currentTime只要video能播放就会改变，通过这个属性监控触发 canvas的drawimage

4.通过canvas 去drawimage去抓取当前碎片（也就是指引指向的那个video实例）

5.通过video的onend事件连接碎片

存在问题

1.来回拖动进度条的时候可能会出现卡顿现象视频报错

2.兼容性问题

3.。

GPU云服务器云服务器利用python进行数据分析利用公有云进行数据备份 GitLab服务器被黑客利用进行DDos 利用python进行数据分析第二版pdf

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81634.html

利用canvas+vue进行视频碎片合并

摘要：仓库地址利用进行视频碎片合并此注意点并没有考虑性能只支持温柔使用没有状态状态正在完善中默认对象说明是否自动播放表示是否需要显示状态暂停状态播放状态声音控制是否静音进度条总长度这个是需要后端返回的默认播放时间用来显示终点时间当前时间默仓库地址canvas-merge-video-in-vue 利用canvas+vue进行视频碎片合并此pro注意点： 1.并没有考虑性能2.只支持温...

546669204 2019-06-21 16:15 评论0 收藏0
基于Vue的MVVM学习笔记

摘要：发布订阅现在每个人应该都用微信吧，一个人可以关注多个公众号，多个人可以同时关注相同的公众号。公众号每周都会更新内容，并推送给我们，把写好的文章在微信管理平台更新就好了，点击推送，就相当于发布。什么是MVVM MVVM——Model-View-ViewModle的缩写，MVC设计模式的改进版。Model是我们应用中的数据模型，View是我们的UI层，通过ViewModle，可以把我们M...

Alan 2019-08-23 18:07 评论0 收藏0
JS每日一题: Vue中mixin怎么理解？

摘要：两个对象键名冲突时，取组件对象的键值对也使用同样的策略进行合并。代码理解全局混合也可以全局注册混合对象。注意使用一旦使用全局混合对象，将会影响到所有之后创建的实例为自定义的选项注入一个处理器。 20190122 Vue中mixin怎么理解？ mixin是为了让可复用的功能灵活的混入到当前组件中，混合的对象可以包含任意组件选项（生命周期，指令之类等等）, mixin翻译过来叫混合,高级的...

jubincn 2019-08-23 15:28 评论0 收藏0
大前端 - 收藏集 - 掘金

摘要：是目前唯一一个支持同步调用的跨平台年度上最多的个项目前端掘金年接近尾声，在最近的几篇文章中，会整理总结一些年度开源项目。 JS 全栈教程 - 前端 - 掘金本课程是基于阮一峰的 js 全栈教程的视频版本，免费供大家观看... 2016 年 10 个最佳的 CodePen 作品 - 前端 - 掘金说到 CodePen，前端开发者们肯定不会陌生。如果说 Dribbble 是设计师们聚集的圣...

honhon 2019-08-20 17:03 评论0 收藏0