漂Ｊ
@floatj
好奇
Tue, Dec 3, 2019 6:06 AM
HTML5 Video - How to do a seamless play and/or loop ...
沒想到還可以用 canvas 解
漂Ｊ
@floatj
說
Tue, Dec 3, 2019 6:08 AM
這題的需求：影片靜態資源上傳 github pages 會碰到 100MB 單檔上限
然後這個靜態資源是要放在網頁背景自動播放的，所以感覺放 Google Drive 也不理想，
目前想到解法是拆成幾個小檔案，播放再合併播放
漂Ｊ
@floatj
說
Tue, Dec 3, 2019 6:15 AM
好像也沒有想像中困難，影片本身有轉場，所以就算用比較爛的方法實作，說不定也看不出來不連續...
漂Ｊ
@floatj
說
Tue, Dec 3, 2019 6:16 AM
totymedli/html5-video-playlist-prototype
天津風@FF44 O14
@yamato_han
說
Tue, Dec 3, 2019 6:20 AM
之前遇過連去續錄影的切割檔要連續播放
我記得只要用兩個 video tag 互相切換就可以感受不太到切換的瞬間
漂Ｊ
@floatj
說
Tue, Dec 3, 2019 6:20 AM
j28347846: 也是一招，--不過我怕 dom 疊太多層顯示會爆炸—
漂Ｊ
@floatj
說
Tue, Dec 3, 2019 6:21 AM
ji3g4bp6: mp4
天津風@FF44 O14
@yamato_han
說
Tue, Dec 3, 2019 6:21 AM
漂Ｊ : 不會，我寫完了而且很順暢
天津風@FF44 O14
@yamato_han
說
Tue, Dec 3, 2019 6:23 AM
m3u / m3u8 應該更簡單，畢竟那是 HLS 的標準
也許有套件可以直接上？
漂Ｊ
@floatj
說
Tue, Dec 3, 2019 6:25 AM
ji3g4bp6: 原來如此
漂Ｊ
@floatj
說
Tue, Dec 3, 2019 6:26 AM
ji3g4bp6: 因為解析度要 1080p 啊
天津風@FF44 O14
@yamato_han
說
Tue, Dec 3, 2019 6:26 AM
ji3g4bp6: 那時候有看過，不過因為我這裡式特殊需求
所以用純 JS 自幹了
漂Ｊ
@floatj
說
Tue, Dec 3, 2019 6:27 AM
j28347846: 如果 video.js 能用的話感覺更方便，但我原本也沒有引入這個 lib 所以還是先試著用純 js 解
l• ܫ•) Davyキュルッ
@david50407
Tue, Dec 3, 2019 6:28 AM
不就 m3u playlist 嗎
漂Ｊ
@floatj
說
Tue, Dec 3, 2019 6:34 AM
l• ܫ•) Davyキュルッ : 之前沒聽過
漂Ｊ
@floatj
說
Tue, Dec 3, 2019 6:35 AM
ji3g4bp6: 所以手機 RWD 做成只顯示圖片輪播 雖然圖片很醜
漂Ｊ
@floatj
說
Tue, Dec 3, 2019 6:35 AM
最後發現影片用 ffmpeg 重轉後可以壓在 100MB 內，畫質根本看不出來有減損
漂Ｊ
@floatj
說
Tue, Dec 3, 2019 6:42 AM
於是搞半天變成用 ffmpeg 轉檔練習
漂Ｊ
@floatj
說
Tue, Dec 3, 2019 7:01 AM
發現用 js 操作影片看起來不連續...
l• ܫ•) Davyキュルッ
@david50407
Tue, Dec 3, 2019 2:02 PM
除了讀取時間還有瀏覽器的 js 很難精準處理 real-time 的東西也是一個問題吧
漂Ｊ
@floatj
Tue, Dec 3, 2019 3:18 PM
對啊 讀取要時間
漂Ｊ
@floatj
說
Tue, Dec 3, 2019 4:57 PM
參考這篇看有沒有解法...
Fast Playback with Video Preload  |  Web Fundamental...
漂Ｊ
@floatj
Wed, Dec 4, 2019 4:51 AM
後來實測切割的方法有個問題，因為影片是有背景音樂的，如果切割的話，很容易被聽出來音樂不連續…
載入新的回覆