应用canvas+vue举行视频碎片兼并

堆栈地点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.videocurrentTime只需video能播放就会转变,经由过程这个属性监控触发 canvasdrawimage

4.经由过程canvasdrawimage去抓取当前碎片(也就是指引指向的谁人video实例)

5.经由过程videoonend事宜衔接碎片

存在题目

1.往返拖动进度条的时刻可能会涌现卡顿征象视频 报错

2.兼容性题目

3.。

    原文作者:spademan
    原文地址: https://segmentfault.com/a/1190000008425463
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞