影片有辦法在前端壓縮嗎?

html5 js

豬豬人 2021-01-18 11:28:00 ‧ 1850 瀏覽

分享至

如提，小弟之前有使用過canvas在前端壓縮圖檔，不知道能不能使用canvas壓縮影片，有找到跟影片相關的canvas，但好像只是做簡單的特效而已。如果canvas不行的話，有沒有甚麼比較推薦的前端壓縮影片的方式嗎?謝謝

brayce iT邦新手 5 級 ‧ 2021-01-18 11:53:02 檢舉

可以參考看看stackoverflow的解答
討論內容看起來是不太建議這麼做
https://stackoverflow.com/questions/31316791/compress-a-video-on-client-side-web

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2021-01-18 12:02:20 檢舉

這篇的討論其實還有另外一篇的討論。
基本上來說，理論上是可以做到的。
但這也不是真的在瀏覽器中做處理。
而是將資料用類似串流的方式。傳入伺服端處理。
這一篇討論的是，用此方式看起來很像是前端處理。但實用性不大。
處理起來前前後後要10分。但先將影片上傳直接後端處理。則只要2分。

所以沒人會建議用這一招處理。

淺水員 iT邦大師 6 級 ‧ 2021-01-18 12:55:08 檢舉

brayce 貼的那篇，裡面提到 https://bgrins.github.io/videoconverter.js/
這的確是在瀏覽器上跑 ffmpeg
不用透過伺服器就可以轉檔了
雖然效能不是很好就是

登入發表討論

直播研討會

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

直播中

2 個回答

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2021-01-18 11:41:54

基本來說，這邊指的前端因該是客戶那邊吧。

正常來講，應用式的因該不用考量了。
畢竟應用式的大多數都是需要客戶再安裝啥鬼的，基本接受度不大。

大多數而言，都是請user上傳影片後來後端處理。這樣會比較容易統一處理。
要前端用的話。除了 canvas 。在不安裝任何插件或是應用軟體的情況下。
我目前是想不到招了。

回應 2
分享
檢舉

豬豬人 iT邦新手 4 級 ‧ 2021-01-18 11:47:47 檢舉

感謝星大，有辦法先判斷影片長度或影片大小是否符合在上傳到後端嗎?謝謝

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2021-01-18 12:05:23 檢舉

這直接查看file元件就可以了。
我找一下對應的程式碼

function ValidateFileSize() {
    if (window.FileReader && window.Blob) {
        var FileSize = this.files[0].size / 1024 / 1024; // in MB
        if (FileSize > 5) {
           alert('上傳檔案大小不得超過 5 MB！');
           this.value = "";
        } else {

        }
        var type = this.files[0].type.split('/');
        if (type[1]=='png'||type[1]=='pdf'||type[1]=='jpeg'||type[1]=='jpg'){
            //pass
        } else {
            alert('不支援的檔案格式！僅支援上傳 JPG, PNG, PDF 檔案，且檔案大小不得超過 5 MB。');
            this.value = "";
        }
    } else {
        // File and Blob are not supported
    }
}
$('input[type="file"]').change(ValidateFileSize);

網路上找到的。你可以比照一下處理。
基本原則就是讀取input的檔案元件。裏面大多數的資料都有。
長度是否可以拿到我倒是不確定就是了。

登入發表回應