canvas-merge-video-in-vue

Build Setup

# install dependencies
npm install

serve with hot reload at localhost:8080
npm run dev
build for production with minification
npm run build</code></pre> 
  
canvas-merge-video-in-vue 利用canvas+vue進行視頻碎片合并
 
  
此pro注意點：
 
  
1.并沒有考慮性能 2.只支持溫柔使用 3.沒有catch error狀態 4.loading狀態正在完善中
 
  
A Vue.js project
 
  
Build Setup
 
  
# install dependencies
npm install

serve with hot reload at localhost:8080
npm run dev
build for production with minification
npm run build</code></pre> 
  
默認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.兼容性問題