分析两视频文件

1.解析源码

/**  npm地址=>  https://www.npmjs.com/package/mp4-stream **/

var mp4 = require('mp4-stream')
var fs = require('fs')
var decode = mp4.decode()
fs.createReadStream('./source/xx.mp4')
    .pipe(decode)
    .on('box', headers => {
        console.log(`found box(${headers.type})(${headers.length})`)
        if (headers.type === 'mdat') {
            // you can get the contents as a stream
            console.log('box has stream data (consume stream to continue)')
            decode.stream().resume()
        } else if (headers.type === 'moof') {
            // you can ignore some boxes
            decode.ignore()
        } else {
            // or you can fully decode them
            decode.decode((box) => {
                console.log('box contents:', box)
            })
        }
    })

• 解析xx.mp4文件内容

found box(ftyp)(32)
box contents: { brand: 'isom',
  brandVersion: 512,
  compatibleBrands: [ 'isom', 'iso2', 'avc1', 'mp41' ],
  length: 32,
  contentLen: 24,
  type: 'ftyp',
  version: undefined,
  flags: undefined }
found box(moov)(131450)
box contents: { otherBoxes: 
   [ { buffer: <Buffer 00 00 00 96 6d 65 74 61 00 00 00 00 00 00 00 21 68 64 6c 72 00 00 00 00 00 00 00 00 6d 64 69 72 61 70 70 6c 00 00 00 00 00 00 00 00 00 00 00 00 69 69 ... >,
       length: 158,
       contentLen: 150,
       type: 'udta',
       version: undefined,
       flags: undefined } ],
  mvhd: 
   { ctime: 1904-01-01T00:00:00.000Z,
     mtime: 1904-01-01T00:00:00.000Z,
     timeScale: 1000,
     duration: 229738,
     preferredRate: 1,
     preferredVolume: 1,
     matrix: [ 1, 0, 0, 0, 1, 0, 0, 0, 16384 ],
     previewTime: 0,
     previewDuration: 0,
     posterTime: 0,
     selectionTime: 0,
     selectionDuration: 0,
     currentTime: 0,
     nextTrackId: 3,
     length: 108,
     contentLen: 96,
     type: 'mvhd',
     version: 0,
     flags: 0 },
  traks: 
   [ { otherBoxes: [],
       tkhd: [Object],
       edts: [Object],
       mdia: [Object],
       length: 91094,
       contentLen: 91086,
       type: 'trak',
       version: undefined,
       flags: undefined },
     { otherBoxes: [],
       tkhd: [Object],
       edts: [Object],
       mdia: [Object],
       length: 40082,
       contentLen: 40074,
       type: 'trak',
       version: undefined,
       flags: undefined } ],
  length: 131450,
  contentLen: 131442,
  type: 'moov',
  version: undefined,
  flags: undefined }
found box(mdat)(15076735)
box has stream data (consume stream to continue)

• 解析f-xx.mp4文件内容

found box(ftyp)(36)
box contents: { brand: 'isom',
  brandVersion: 512,
  compatibleBrands: [ 'isom', 'iso2', 'avc1', 'mp41', 'iso5' ],
  length: 36,
  contentLen: 28,
  type: 'ftyp',
  version: undefined,
  flags: undefined }
found box(moov)(1208)
box contents: { otherBoxes: [],
  mvhd: 
   { ctime: 1904-01-01T00:00:00.000Z,
     mtime: 1904-01-01T00:00:00.000Z,
     timeScale: 1000,
     duration: 229738,
     preferredRate: 1,
     preferredVolume: 1,
     matrix: [ 1, 0, 0, 0, 1, 0, 0, 0, 16384 ],
     previewTime: 0,
     previewDuration: 0,
     posterTime: 0,
     selectionTime: 0,
     selectionDuration: 0,
     currentTime: 0,
     nextTrackId: 4294967295,
     length: 108,
     contentLen: 96,
     type: 'mvhd',
     version: 0,
     flags: 0 },
  traks: 
   [ { otherBoxes: [],
       tkhd: [Object],
       edts: [Object],
       mdia: [Object],
       length: 546,
       contentLen: 538,
       type: 'trak',
       version: undefined,
       flags: undefined },
     { otherBoxes: [],
       tkhd: [Object],
       edts: [Object],
       mdia: [Object],
       length: 458,
       contentLen: 450,
       type: 'trak',
       version: undefined,
       flags: undefined } ],
  mvex: 
   { otherBoxes: [],
     mehd: 
      { fragmentDuration: 229738,
        length: 16,
        contentLen: 4,
        type: 'mehd',
        version: 0,
        flags: 0 },
     trexs: [ [Object], [Object] ],
     length: 88,
     contentLen: 80,
     type: 'mvex',
     version: undefined,
     flags: undefined },
  length: 1208,
  contentLen: 1200,
  type: 'moov',
  version: undefined,
  flags: undefined }
found box(moof)(2100)
found box(mdat)(614142)
box has stream data (consume stream to continue)

2.对比分析

通过对比分析f-xx.mp4文件比xx.mp4文件多了moofbox，并且mdat文件体积约小一半

• moofbox，这个box是视频分片的描述信息。并不是MP4文件必须的部分，但在我们常见的可在线播放的MP4格式文件中（例如Silverlight Smooth Streaming中的ismv文件）确是重中之重。
  附：Smooth Streaming中ismv文件结构，文件分为了多个Fragments，每个Fragment中包含moof和mdat。这样的结构符合渐进式播放需求。（mdat及其描述信息逐步传输，收齐一个Fragment便可播放其中的mdat）。
• mdatbox，实际媒体数据。我们最终解码播放的数据都在这里面。

3.结论

也就是说f-xx.mp4包含moofbox更适合在线播放

4.总结及感受

• 首先拿到该任务的时候，感觉一头雾水，不知道如何下手（没有接触过视频业务）；正确的提问等于解决问题的一半，于是我想到了视频播放的原理是什么？
• 然后顺藤摸瓜找到了MP4文件格式的介绍，我觉得接触一个新东西，应该从上往下的学习会事半功倍，也就是先整体再局部的思路
• 最后通过对比找出它们的不同点，通过参考资料又挖掘出渐进式播放时什么意思？
• 综合一下我的感受就是，视频文件可以类比类比为HTML文件写的都是写配置文件，然后通过视频播放软件进行解析呈现给用户；而渐进式播放，类似于文件流操作，读出一点播放一点，提升用户体验
• 我也不知道分析的对不对，还望老师多多提点指教。另外，对于视频业务就是个门外汉，老师有什么资料可以分享的？

参考：

• 视频的显示和存放原理
• MP4文件格式详解——文件类型ftyp）
• 对于渐进式视频播放的一些总结