iT邦幫忙

1

請教網頁撥放 mp4 , 等全部下載後才撥放的可能性/方法

  • 分享至 

  • xImage

想請教使用網頁撥放 mp4 時
能不能類似圖片一樣有 onload / complete 之類的事件可用
(用 plugin 擴充也可以)
或是能否控制 player 的 buffer / preload 多一點

目前碰到的問題是 客戶首頁想要做 boom 圖的演示
希望可以透過 捲軸 的方式做上一張和下一張
也希望可以按下 play 後自動完整撥放

由於客戶有強調要高品質圖檔 + 第一次拿到素材 total 是 50mb 的檔案
雖然知道有 preload 問題 , 但還是覺得好吧用影片 , 不要拆成圖片處理
本機上跑得很順 , 上主機之後就悲劇了 , 會一直有 loading 的狀況發生

目前 html 上是使用 video 標籤
js 是套件 https://videojs.com/

========================================

目前已經將影片縮小到符合各種螢幕尺寸的比例了
手機版本影片只有 5 mb
桌機版本影片只有 11 mb

比較期待的可能是做到 "先擋一層 loading , 等影片完整下載才進入開啟頁面"
這樣做影格的前後移動應該就不會再有撥放器 loading 的問題了
但目前找不到可以調整 preload 相關設定方式 , 也沒有真的 onload / complete 可用

如果影片真的全靠 browser 控制 , 沒有辦法修改
可能就只能考慮全拆成 圖片 來做撥放了 QQ

希望有經驗的前輩可以給各方向做參考
我可以自己讀資料
或明確的讓我知道不可能 XD
那我就乖乖去拆圖片重寫

客戶主機會不會有問題
黃彥儒 iT邦高手 1 級 ‧ 2023-06-24 02:47:24 檢舉
用 Webassembly 自己寫一個播放器,或找人家的播放器來改寫,就不會受制於瀏覽器了
suncuxiapple - 不會, 因為其他影片順著撥時很順 , 只有影格瘋狂操作才會這樣

黃彥儒 - 好的 , 我學一下 Webassembly 相關資料做評估 , 謝謝提供方向參考
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
Ray
iT邦大神 1 級 ‧ 2023-06-24 10:23:34
最佳解答

原來是寫在 link Orz
趕快去試試看

0

一般這只能做成串流的方式。
串流的技術網路上找一下有很多方法。
不過這很吃流量及主機效能。

一般我都會建議客戶直接使用第三方影視。
如youtube、vimeo....
將影片直接上傳到這邊。而網頁只單純串接就行。

如果不做串流技術。無論是自做還是使用第三方。
基本想直接MP4處理這個問題,的確很難。

於你說的圖片的方式,其實這就是串流技術的一種模式。
自已拆太累了啦!

謝謝回覆 , 我有嘗試過 M3U8 的方式處理 , 但 loading 還是跑不掉
YT 其實一樣 , 只要一直改變影格位置 , 還是會 loading XD

使用 m3u8 是清單的處理方式,一般預設的的確是這樣的手法沒錯。
但你還得考量來源是否為像是TS串流來源。

一般來說TS的串流還是有區分事先準備好及後置處理的。
會希望您使用第三方影視的原因,是因為只要付費了。
上傳的影片就會幫你準備好串流的來源。無需自行做處理。

但你說的 loading 的畫面,基本還是去除不掉。
只能盡量降低它出現的頻率。
因為這還是取決於雙方的網速跟頻寬。
你總不能要求只有2M網速的客戶不要出現loading吧。

就算是已經切割分流為1K的TS流。還是有機會出現LOADING。
只是比較少。不可能完全不出現。

raytracy大有給你相關知識的連結了。你再一個一個去查看。
基本我現在也是在挑戰自建影音伺服器中。
目前也是在評估成本及費用上的評估考量。

㊣浩瀚星空㊣ 感謝

我要發表回答

立即登入回答