iT邦幫忙

0

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

  • 分享至 

  • xImage

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

所以沒人會建議用這一招處理。
淺水員 iT邦大師 6 級 ‧ 2021-01-18 12:55:08 檢舉
brayce 貼的那篇,裡面提到 https://bgrins.github.io/videoconverter.js/
這的確是在瀏覽器上跑 ffmpeg
不用透過伺服器就可以轉檔了
雖然效能不是很好就是
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

2

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

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

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

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

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

這直接查看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的檔案元件。裏面大多數的資料都有。
長度是否可以拿到我倒是不確定就是了。

2
japhenchen
iT邦超人 1 級 ‧ 2021-01-18 12:39:48

FB跟YT都是上傳後在後端壓縮處理,前端你得看人家的設備是否推的動,要是人家用手機上來,又是那種5000元以下的入門機,你在前端壓,就算你可以克服前端元件/程式的問題,客戶端的設備壓完這影片,到底要嗑掉多少%的電?天知道!

豬豬人 iT邦新手 4 級 ‧ 2021-01-18 13:04:08 檢舉

了解 謝謝你

我要發表回答

立即登入回答