新项目推荐 https://github.com/spademan/seamlessCanvasPlayer 【播放器】
canvas-merge-video-in-vue
##demo
##一.组件形式使用
###组件引入方式
1.npm install canvasmergevideo --save
###html文件中
import MergeVideo from 'canvasmergevideo'
Vue.use(MergeVideo)
<template>
<div id="app">
<merge-video :playList='playList' :autoPlay='autoPlay' :audioSrc='audioSrc'></merge-video>
</div>
</template>
autoPlay: false, // 是否自动播放 Boolean(required)
playList: [] // 碎片列表 Array（）
sounds: Number// 声音 Number（非必填）
audioSrc: String// 第三方声音（必填）
picOption: { // 水印配置
editLogo: false, // // 是否需要调整水印
logoSrc: require('./assets/logo.png'), //水印地址
info: {
w: 60, // 宽
h: 60, // 高
x: 0 // logo相对画布x轴起点
y: 0 // logo相对画布y轴起点
}
},
###另外需要引入 elmenet-ui的css
// 因为我后续在拓展的时候需要用到element-ui所以引入了这个ui
// 在项目的开始
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
##二. fork项目跑起来 (想自己改造源码的同学可以看这个步骤)
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build此pro注意点：
1.并没有考虑性能
2.只支持温柔使用
3.没有catch error状态
4.loading状态正在完善中
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
组件内部默认data对象说明
progress: 0, // 进度条
allLength: 0, // 总长度.这个是需要后端返回的
currentTimeLabel: '0:00', // 默认播放时间 用来显示
terminalTimeLabel: '', // 终点时间
currentTime: 0, // 当前时间
currentIndex: 0, // 默认当前播放碎片指引
currentEnoughToPlay: false, // 表示是否需要显示enoughToPlay状态
loading: true, // loading状态
videoPauseing: true, // 暂停状态
audioPlaying: false, // 音频播放状态
mutedable: false, // 是否静音
videoInstance: null, // 当前激活的视频实例
canvasInstance: null // canvas 实
实现思路
1.先把所有视频碎片丢到dom里面
2.控制当前碎片指引，进行实例dom切换
3.video的currentTime只要video能播放就会改变，通过这个属性监控触发 canvas的drawimage
4.通过canvas 去drawimage去抓取当前碎片（也就是指引指向的那个video实例）
5.通过video的onend事件连接碎片
存在问题
1.来回拖动进度条的时候可能会出现卡顿现象视频 报错
2.兼容性问题
3.移动端播放全屏有兼容性问题