如何對URL.createObjectURL產生的blob影片做切割和其他處理? - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2

如何對URL.createObjectURL產生的blob影片做切割和其他處理?

網站開發

Citrus 2019-09-08 15:19:27 ‧ 1438 瀏覽

分享至

最近我在做一個讓使用者可以切割影片以及轉檔的網站
原本的實作方式是使用者選擇自己的影片，然後上傳到server
接著再用ffmpeg對影片作處理
可是我覺得有些時候要耗時很久
所以想改用URL.createObjectURL
雖然這大部分被用在圖片及影片的預覽
但是我想對這個URL.createObjectURL產生的blob影片做切割和其他處理
請問有辦法實現嗎?
因為ffmpeg沒辦法直接讀這個blob影片連結

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

1 個回答

3

dragonH

iT邦超人 5 級 ‧ 2019-09-08 16:54:23

最佳解答

我覺得不太可能

切文件或圖片就算了

切影片的話...

就算可以

效率及耗費資源

也一定沒辦法像 ffmpeg 那樣

真的想要在前端切影片

或許可以朝 WebAssembly 下手

雖然沒試過可不可行

不過我想記憶體應該還是一大問題就是

回應 6
分享
檢舉

看更多先前的回應...收起先前的回應...

Citrus iT邦新手 5 級 ‧ 2019-09-08 16:56:44 檢舉

想請問
https://online-video-cutter.com/tw/
這個網站的videocutter功能大概是如何實作的?
我的目標就是像這個網站一樣

dragonH iT邦超人 5 級 ‧ 2019-09-08 17:15:22 檢舉

你可以打開 browser console 看

首先

你選完影片

他會做上傳的動作

按儲存後

可以看到 websocket 那邊

他會有一些處理進度的 event

最後會將結果回傳

結論

他應該還是用後端處裡

Citrus iT邦新手 5 級 ‧ 2019-09-08 21:54:29 檢舉

好的，謝謝您的回答!了解了!

dragonH iT邦超人 5 級 ‧ 2019-09-08 22:09:45 檢舉

Citrus iT邦新手 5 級 ‧ 2019-09-08 22:24:22 檢舉

想順便問一個前端介面設計問題，
像這個自製的custom html5影片進度條
淺藍色部分可以拖動，讓使用者選取片段的外觀及功能，分別要如何實作? 我google了好久但不知道這個該用什麼關鍵字查

dragonH iT邦超人 5 級 ‧ 2019-09-08 23:22:54 檢舉

大概就是 drag 的延伸應用吧

跟常見的圖片拖拉放大那種很像

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22182 篇

完賽人數

597 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙