利用canvas+vue進行視頻碎片合并

546669204 發布于2019-06-21 16:15 / 1745人閱讀

摘要：倉庫地址利用進行視頻碎片合并此注意點并沒有考慮性能只支持溫柔使用沒有狀態狀態正在完善中默認對象說明是否自動播放表示是否需要顯示狀態暫停狀態播放狀態聲音控制是否靜音進度條總長度這個是需要后端返回的默認播放時間用來顯示終點時間當前時間默

倉庫地址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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/11034.html

利用canvas+vue進行視頻碎片合并

摘要：倉庫地址利用進行視頻碎片合并此注意點并沒有考慮性能只支持溫柔使用沒有狀態狀態正在完善中默認對象說明是否自動播放表示是否需要顯示狀態暫停狀態播放狀態聲音控制是否靜音進度條總長度這個是需要后端返回的默認播放時間用來顯示終點時間當前時間默倉庫地址canvas-merge-video-in-vue 利用canvas+vue進行視頻碎片合并此pro注意點： 1.并沒有考慮性能2.只支持溫...

williamwen1986 2019-08-20 14:26 評論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