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

[qrtt1 (有些事，有時候。。。)]

※ 引述《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
------------------------------------------------------
Total size: 112025209 bytes; 49 atoms total. AtomicParsley version: 0.9.0 (utf8)
Media data: 111323786 bytes; 701423 bytes all other atoms (0.626% atom overhead).
Total free atom space: 8 bytes; 0.000% waste.
------------------------------------------------------

        需再找轉檔工具搬一下 moov 到檔頭的開頭。


--
JCConf 工商服務
https://www.facebook.com/jcconf/posts/974947969317750

JCConf 2016 售票至 10/9 (日) 結束呦 :D

報名網址：http://twjug.kktix.cc/events/jcconf2016-register
議程網址：http://jcconf.tw/2016/

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.251.136.87
※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1475752648.A.0D8.html
推 kkx55893: Youtube如何處理分段送影片檔案broswer端的，broswer的b
→ kkx55893: lob如何持續append新的段落呢
推 b510336: 大大如此用心的回文小的實在是內牛滿面了QAQ
推 jjwei: 推一個
推 Neo1978: 如果是用ffmpeg轉檔,可以加faststart把moov搬到前面
→ Neo1978: 或者用qt-faststart
推 kkc: 推一個！！！