视频文件读取问题

在利用electron+react开发视频播放器的过程中遇到了一些有令人疑惑得问题：

1. 读取文件给到前端，发现只有音频没有画面
2. 针对大视频文件，如何实现块数据读取？因为倘若每次读取都是一整个文件，大文件情况下，响应缓慢。

针对第一个问题，目测时文件格式导致的。但是同样都是mp4文件格式，为什么有的没问题，有的就会出现有声音没画面的情况呢？

• 后端读取逻辑：

  fs.readFile(path, (err: Error, data: any) => {
    console.log('读取文件内容>>>', data)
    event.sender.send('getVideoContent_back', {
      name: message.data.name,
      file: data
    })
  })

• 前端处理逻辑

  window.Main.on('getVideoContent_back', (data: any) => {
      const blob = new Blob([data.file], { type: 'mp4' })
      const url = URL.createObjectURL(blob)
      this.setState({
        currentVideoInfo: {
          ...videoInfo,
          url: url
        }
      })
  })

用格式工厂查看两个视频文件的信息如下：
a.mp4 有声音没画面

b.mp4 正常

稍微查了下两者的区别，如下：

H.264（也称为 AVC 或高级视频编码）是视频压缩的行业标准。它通过使用面向块、基于运动补偿的视频压缩标准处理视频帧来工作。这些单元称为宏块。宏块通常由 16×16 像素样本组成，这些样本可以细分为变换块，并且可以进一步细分为所谓的预测块。H.264 算法可以比以前的标准更好地降低比特率, 比如 iTunes 等流媒体互联网就会使用。

HEVC是High Efficiency Video Coding的缩写，是一种新的视频压缩标准，用来扩充H.264/AVC编码标准。

从上图中可以看到，两者的区别在于，a文件的format为HEVC格式，b视频为AVC格式。直觉告诉我这就是问题所在。为了验证，用格式工厂将a文件转换成AVC进行测试。
结论：a文件画面有了。

看起来，后者好像更加高级但是，浏览器不支持再高级也得给他打下来。
借助格式工厂，批量将不符合格式的视频文件统一转换为mp4的avc格式，完美解决