Re: [請益] AWS S3 signed url影片問題

作者: qrtt1 (有些事,有時候。。。)   2016-10-06 19:17:22
※ 引述《b510336 (風的細語)》之銘言:
: 大家如果茶餘飯後有點小空的話
: 可以幫我測測這頁的影片可不可以播放嗎?
: 可以的話順便告訴我一下你的瀏覽器跟網路環境(有線無線,網速等)
: https://www.dcplus.com.tw/marketing-training/78934
: 我目前採用AWS S3的方式放置影片
: 後端的node去跟s3拿到signed url然後傳給前端的播放器
: expire設定為兩小時
: 但是有人反應無法播放
: 我自己測或是找認識的測都說可以播放
: 目前不曉得到底是什麼問題
: 如果大家有空幫測一下就太感恩了~
在我的電腦測大致沒問題,但看 html 跟檔案有些細節沒處理的說。
你是這麼寫:
<video src="http://awsdcplus.s3.amazonaws.com/20160111...."
class="fp-engine" autoplay="" preload="none"
x-webkit-airplay="allow"></video>
(雖然好像有用 flowplayer 但播不了應該能 fallback to flash!?)
假設你是單純用 video tag 處理,那這段 code 就不太夠用了。
因為不同的 {平台, 瀏覽器, 版本} 支援的 {container, codecs} 組合不太一樣。
透過 ffprobe 看了一下,你用的是很標準的 mp4:
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'JJ.mp4':
Metadata:
major_brand : isom
minor_version : 512
compatible_brands: isomiso2avc1mp41
creation_time : 2016-02-15 11:27:50
encoder : Lavf54.63.104
Duration: 00:18:15.48, start: 0.000000, bitrate: 818 kb/s
Stream #0:0(und): Video: h264 (Main) (avc1 / 0x31637661), yuv420p, 1280x720 [SAR 1:1 DAR 16:9], 661 kb/s, 25 fps, 25 tbr, 12800 tbn, 50 tbc (default)
Metadata:
creation_time : 2016-02-15 11:27:50
handler_name : VideoHandler
Stream #0:1(und): Audio: aac (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 151 kb/s (default)
Metadata:
creation_time : 2016-02-15 11:27:50
handler_name : SoundHandler
若是 mobile 或是 osx 大致沒什麼問題,但不能預測它是否真的沒問題。
(中肯的廢話)
所以,得要處理一下例外的情況:
1. 準備不同的 container + codecs 的檔案
2. 都沒有東西能播的時候,你要收到通知
先談 [2] 可以參考
[MDN] Using HTML5 audio and video
https://mzl.la/2d5qLkw
其中的 Error Handling 就有交你透過 <source> 準備 [1] 的東西。
還有要透過 "error" event 來收診斷資訊(以下是複製網頁內容的)
var v = document.querySelector('video'),
sources = v.querySelectorAll('source'),
lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
var d = document.createElement('div');
d.innerHTML = v.innerHTML;
v.parentNode.replaceChild(d, v);
// 它的實作把它改掉,
// 改成 call 你自己的 api 做 error report 蒐集診斷資訊
// 這東西不該靠稀少的鄉民測試,一旦使用者最初的狀態是失敗的
// 也許就沒有再回來的一天
// 但你至少能得到診斷資訊,即使不解決,你也知道出錯的比例,決定緊急程度
}, false);
那麼回頭 [1] 談該準備什麼內容,就直接看轉檔服務的建議吧(讓專業的來!?)
https://app.zencoder.com/docs/guides/encoding-settings/html5
What web formats?
There are three video formats that work natively in some browsers.
Unfortunately, no format works in all browsers,
so you need to do at least two if you want meaningful HTML5 video support.
Minimally, you must use MP4 + H.264, with AAC or MP3.
MP4 video plays natively in Safari, Chrome, and IE9 (Vista/Windows 7).
It is also your best option for a Flash video fallback,
and plays natively on many devices
(iOS, Android, Blackberry, PSP, Xbox, PS3, etc.).
Use H.264 High Profile for the best quality,
or Baseline profile if you want the same video to be playable
on mobile devices.
Beyond that, use either WebM + VP8 or Ogg + Theora with Vorbis audio
for other browsers.
Recommendation: Minimally, MP4 + either WebM or Ogg, or maybe both.
(簡單說,再加上 WebM 會好些。)
===========================================================================
其他問題:
1. 若你有用商用的 player 元件,先查手冊或問客服的建議
2. 該查一下為什麼沒有 fallback to flash player
(看起來你不像寫純 video tag)
3. 你的 MP4 不太優,index data 沒在檔案前頭
moov 的 offset 是 111323826,檔案大小是 112025209
(那就是單純的未最佳化的 mp4,影響起播速度)
(player 要有 moov 裡的資訊才能播放,
第 1 次 request 取不到,需要再多打 request 去查到 moov 並取回來
實作比較「杯具」的 player 就會全下載回來再開播
不過,這年代應該不太會發生這樣的事了,
但也是一種「假的」播不了的情況)
qty:Downloads qrtt1$ ./AtomicParsley-MacOSX-0.9.0/AtomicParsley JJ.mp4 -T
Atom ftyp @ 0 of size: 32, ends @ 32
Atom free @ 32 of size: 8, ends @ 40
Atom mdat @ 40 of size: 111323786, ends @ 111323826
Atom moov @ 111323826 of size: 701383, ends @ 112025209
Atom mvhd @ 111323834 of size: 108, ends @ 111323942
Atom trak @ 111323942 of size: 220133, ends @ 111544075
Atom tkhd @ 111323950 of size: 92, ends @ 111324042
Atom edts @ 111324042 of size: 36, ends @ 111324078
Atom elst @ 111324050 of size: 28, ends @ 111324078
Atom mdia @ 111324078 of size: 219997, ends @ 111544075
Atom mdhd @ 111324086 of size: 32, ends @ 111324118
Atom hdlr @ 111324118 of size: 45, ends @ 111324163
Atom minf @ 111324163 of size: 219912, ends @ 111544075
Atom vmhd @ 111324171 of size: 20, ends @ 111324191
Atom dinf @ 111324191 of size: 36, ends @ 111324227
Atom dref @ 111324199 of size: 28, ends @ 111324227
Atom stbl @ 111324227 of size: 219848, ends @ 111544075
Atom stsd @ 111324235 of size: 148, ends @ 111324383
Atom avc1 @ 111324251 of size: 132, ends @ 111324383
Atom avcC @ 111324337 of size: 46, ends @ 111324383
Atom stts @ 111324383 of size: 24, ends @ 111324407
Atom stss @ 111324407 of size: 488, ends @ 111324895
Atom stsc @ 111324895 of size: 52, ends @ 111324947
Atom stsz @ 111324947 of size: 109568, ends @ 111434515
Atom stco @ 111434515 of size: 109560, ends @ 111544075
Atom trak @ 111544075 of size: 481036, ends @ 112025111
Atom tkhd @ 111544083 of size: 92, ends @ 111544175
Atom edts @ 111544175 of size: 36, ends @ 111544211
Atom elst @ 111544183 of size: 28, ends @ 111544211
Atom mdia @ 111544211 of size: 480900, ends @ 112025111
Atom mdhd @ 111544219 of size: 32, ends @ 111544251
Atom hdlr @ 111544251 of size: 45, ends @ 111544296
Atom minf @ 111544296 of size: 480815, ends @ 112025111
Atom smhd @ 111544304 of size: 16, ends @ 111544320
Atom dinf @ 111544320 of size: 36, ends @ 111544356
Atom dref @ 111544328 of size: 28, ends @ 111544356
Atom stbl @ 111544356 of size: 480755, ends @ 112025111
Atom stsd @ 111544364 of size: 103, ends @ 111544467
Atom mp4a @ 111544380 of size: 87, ends @ 111544467
Atom esds @ 111544416 of size: 51, ends @ 111544467
Atom stts @ 111544467 of size: 32, ends @ 111544499
Atom stsc @ 111544499 of size: 182332, ends @ 111726831
Atom stsz @ 111726831 of size: 188720, ends @ 111915551
Atom stco @ 111915551 of size: 109560, ends @ 112025111
Atom udta @ 112025111 of size: 98, ends @ 112025209
Atom meta @ 112025119 of size: 90, ends @ 112025209
Atom hdlr @ 112025131 of size: 33, ends @ 112025164
Atom ilst @ 112025164 of size: 45, ends @ 112025209
Atom too @ 112025172 of size: 37, ends @ 112025209
Atom data @ 112025180 of size: 29, ends @ 112025209
作者: kkx55893 (kkx)   2016-10-06 20:12:00
Youtube如何處理分段送影片檔案broswer端的,broswer的blob如何持續append新的段落呢
作者: b510336 (風的細語)   2016-10-06 23:30:00
大大如此用心的回文小的實在是內牛滿面了QAQ
作者: jjwei ( <囧> )   2016-10-07 09:10:00
推一個
作者: Neo1978 (Neo1978)   2016-10-08 17:59:00
如果是用ffmpeg轉檔,可以加faststart把moov搬到前面或者用qt-faststart
作者: kkc (卡西)   2016-10-10 22:47:00
推一個!!!

Links booklink

Contact Us: admin [ a t ] ucptt.com