为了将 html5 中的 video 的 src 从 mp4 视频转 blob 对象,我基于 MediaSource 的 demo 代码封装了一个插件:

一、问题

之前我在使用 MediaSource 把 MP4 视频转 blob 的时候,发现在使用 MediaSource MDN 文档demo中的视频不会出现错误,但是使用自己的 MP4 视频则会出现错误。

报错信息如下:

TIM截图20180323203621.jpg

Failed to execute 'endOfStream' on 'MediaSource': The MediaSource's readyState is not 'open'.

二、解决

在 stackoverflow 看到一个问题,在回答中看到一种解决方案:

究其原因是自己使用的 MP4 视频并不是 fragmented 的。

至于为什么在流媒体传输的时候需要使用 fragmented 视频可以参考:

步骤如下:

我使用的工具是 Bento4

1、下载 Bento4

下载地址:

根据不同的系统下载不同的压缩包即可

2、windows上使用

需要注意的事情是,windows上的bin目录下的 exe 是需要通过命令行来运行。

  1. 解压缩
  2. 打开 bin 目录
  3. 在 bin 目录上开启 powershell 或者 cmd
  4. 运行如下命令:
.\mp4fragment.exe .\v0.mp4 v0-new.mp4

其中:mp4fragment.exe 是命令 , v0.mp4 是原视频地址 , v0-new.mp4 是要输出的视频路径

三、用 Bento4 获取 视频 Codecs 信息

因为在使用 MediaSource 的时候需要获取 Codecs,因此也需要获取视频的这些信息。

而 Bento4 有很多应用。

.\mp4info.exe v0.mp4 

输出的信息能够找到 Codecs 的内容:

File:
  major brand:      isom
  minor version:    200
  compatible brand: isom
  compatible brand: iso2
  compatible brand: avc1
  compatible brand: mp41
  fast start:       no

Movie:
  duration:   132224 ms
  time scale: 1000
  fragments:  no

Found 3 Tracks
Track 1:
  flags:        3 ENABLED IN-MOVIE
  id:           1
  type:         Video
  duration: 132160 ms
  language: und
  media:
    sample count: 3304
    timescale:    12800
    duration:     1691648 (media timescale units)
    duration:     132160 (ms)
    bitrate (computed): 418.394 Kbps
  display width:  720.000000
  display height: 1280.000000
  frame rate (computed): 25.000
  Sample Description 0
    Coding:      avc1 (H.264)
    Width:       720
    Height:      1280
    Depth:       24
    AVC Profile:          100 (High)
    AVC Profile Compat:   0
    AVC Level:            40
    AVC NALU Length Size: 4
    AVC SPS: [67640028ac528a02d0286c05a810100a000003000200000300641e306315]
    AVC PPS: [68e89ef2c0]
    Codecs String: avc1.640028
Track 2:
  flags:        3 ENABLED IN-MOVIE
  id:           2
  type:         Audio
  duration: 132224 ms
  language: und
  media:
    sample count: 6198
    timescale:    48000
    duration:     6346752 (media timescale units)
    duration:     132224 (ms)
    bitrate (computed): 189.270 Kbps
  Sample Description 0
    Coding:      mp4a (MPEG-4 Audio)
    Stream Type: Audio
    Object Type: MPEG-4 Audio
    Max Bitrate: 189269
    Avg Bitrate: 189269
    Buffer Size: 0
    Codecs String: mp4a.40.2
    MPEG-4 Audio Object Type: 2 (AAC Low Complexity)
    MPEG-4 Audio Decoder Config:
      Sampling Frequency: 48000
      Channels: 2
      Extension:
        Object Type: Spectral Band Replication
        SBR Present: no
        PS Present:  no
        Sampling Frequency: 0
    Sample Rate: 48000
    Sample Size: 16
    Channels:    2
Track 3:
  flags:        2 IN-MOVIE
  id:           3
  type:         Text
  duration: 132224 ms
  language: ```
  media:
    sample count: 1
    timescale:    1000
    duration:     132224 (media timescale units)
    duration:     132224 (ms)
    bitrate (computed): 0.001 Kbps
  Sample Description 0
    Coding:      text