video标签播放黑屏，只有声音无图像

在做视频上传时，发现有的视频上传之后无法播放的问题，在手机（ios）上却可以显示

一、先从video标签讲起

在2000年代初期到后期，网络上的视频播放主要依靠Flash插件，这是因为当时没有其它方法可以在浏览器上流式传输视频，然而，并非所有浏览器都拥有相同的插件，同时，如果用户如果没有安装Flash插件，则无法播放任何视频

image.png

为了填补这个空白，WHATWG开始研究HTML标准的新版本，并在HTML5中规定了一种通过video标签来包含视频的标准方法。在HTML5中，在页面中播放视频非常简单，只需要在页面中添加具有很少属性的视频标签即可~

到目前为止，Internet Explorer 9+、FireFox、Opera、Chrome和Safari等浏览器中都已经支持

然而，前不久在做一个项目时，发现在Chrome下有些MP4视频文件居然不能正常播放了！

在播放时不能看到图像而只能听到声音了？
明明都是MP4视频格式的文件，为什么在Chrome中一些MP4格式的视频就不能正常播放了？要想弄清楚里面的原因，还需要先从视频的文件格式、封装格式和编码方式讲起~

二、视频格式及编码方式简介

1、视频文件格式

在Windows系统中，我们所创建的文件都带有后缀，如.doc等，Windows设置后缀名的目的是让系统中的应用程序来识别并关联这些文件，让相应的文件由相应的应用程序打开，比如我们双击.doc文件时，它会知道让Microsoft Office去打开而不是用PhotoShop去打开这个文件~
一般来说，常用的视频文件格式通常包括了.mpg、.mkv、.wmv和.mp4等，当我们双击这些文件时，它会和我们电脑安装的视频播放器关联，并且打开视频播放器进行播放~我们可以随意改扩展名，但是千万不要以为将.avi改为.mp4，视频就变成mp4格式了，要想真正的转换，还需要采用如格式工厂等工具进行转换。

2、视频封装格式

视频封装格式是指把编码器生成的多媒体内容（视频、音频和字幕）混合封装在一起的标准。简单点讲，视频封装格式其实就是相当于一种存储视频信息的容器，我们可以往这个容器中嵌入任何形式的数据、各种编码的视频和音频~我们平时看到的.avi、.mpg和.vob这些视频文件格式的后缀名即采用相应的视频封装格式的名称。

image.png

一般来说，常见的视频封装格式主要包括了以下几种：

（1）AVI格式（文件后缀为.avi）：Audio Video InterLeaved，音频视频交错格式，这种视频格式图像质量好，但是体积过于庞大，压缩标准不统一

（2）DV-AVI格式（文件后缀为.avi）：Digital Video Format，由索尼、松下、JVC等多家厂商联合提出的一种家用数字视频格式

（3）QuickTime File Format（文件后缀为.mov）：美国Apple公司开发的一种视频格式，默认的播放器是苹果的QuickTime，具有较高的压缩比率和较完美的视频清晰度

（4）MPGE格式（文件后缀可以是.mpg、.mpeg、.mpe、.dat、.vob、.asp、.3gp和mp4等）：Moving Picture Experts Group，运动图像专家组格式，MPGE目前包括三个压缩标准，分别是MPEG-1、MPEG-2和MPEG-4

（5）WMV格式（文件后缀为.wmv或.asf）：Windows Media Viedo，微软推出的一种采用独立编码方式并且可以直接在网上实时观看视频节目的文件压缩格式

（6）Real Video格式（文件后缀为.rm或.rmvb）：Real Networks公司所制定的音频视频压缩规范

（7）Flash Video格式（文件后缀为.flv）：由Adobe Flash延伸出来的一种流行网络视频封装格式

（8）Matroska格式（文件后缀为.mkv）：一种新的多媒体封装格式，可以把多种不同编码的视频及16条或以上不同格式的音频和语言不同的字幕封装到一个Matroska Media档内

3、视频编码方式

视频编码方式是指能够对数字视频进行压缩或者解压缩（视频编码）的程序或设备，通常这种压缩属于有损数据压缩，通过特定的压缩技术，可以将某个视频格式转化成另一种视频格式~从视频诞生到发展，无疑在追求更高质量的画质和尽可能低的比特率，下图主要给出了视频编码方式的发展。

image.png

从上图可以看出，目前常见的编码方式式主要包括了以下几种：

（1）H.26X系列：包括H.261、H.262、H.263、H.264和H.265

（2）MPEG系列：包括MPEG-1第二部分、MPEG-2第二部分、MPEG-4第二部分和MPEG-4第十部分

（3）其它系列：AMV、AVS、Bink、CineForm、Cinepak、Dirac、VP3、VP5、VP6、VP7、VP8和VP9等

在目前的编码方式中，最新的就是大家关注的H.265和VP9，不过由于历史的积累和浏览器的支持问题，现在还是以H.264编码的视频为主~

综上所述，其实对于同一种视频文件格式，如.mpg文件，它其实包括MPEG-1、MPEG-2和MPEG-4几种不同的视频封装格式，而对于MPEG-4又可以使用多种视频编码格式，因此，视频的编码格式才是一个视频文件的本质所在，不要简单的通过文件格式和封装格式来区分视频

三、部分MP4视频文件无法在Chrome下播放的原因

搞清楚了视频的文件格式、封装格式和编码格式，让我们再回归到前面说的那个问题中_{前面提到了部分MP4视频文件无法在Chrome正常播放的问题。而通过前面的分析，我们可以知道，对于两个不同的.mp4视频来说，虽然它们的后缀名是一样的，但是两个MP4视频采用的编码格式可能是不一样的，它们可以采用H.264或H.265的编码格式进行编码，也可以采用MPEG-4的编码方式。而对于MP4视频文件的播放，Chrome只支持标准的H.264方式编码。因此如果MP4视频的编码格式不是H.264，那么这个视频文件就无法正常播放}

那么，为什么Chrome只支持H.264这种编码方式而不支持所有的视频编码方式呢？Google查了一下，网上给出的原因主要是说因为绝大部分的视频编码格式都要付专利费的，Google已经购买了H.264编码格式，而其它的就没有购买了~因此如果一个MP4视频不是H.264格式的，那么Chrome也是不支持播放的~

四、解决方案

既然对于MP4视频文件来说，Chrome只能支持H.264编码方式视频文件的播放，而由于MP4视频文件可能包含多种编码，因此，较好的解决方案就是对上传的MP4视频文件进行转码，将非H.264编码方式的MP4视频文件转换成H.264编码方式的视频，这样就能够保证所有的MP4视频文件在Chrome上正常播放~

1、ffmpeg转码

然而，在实际的业务中，我们并不能总要求用户只上传H.264编码方式的MP4视频文件，更好的方式是能够实现MP4视频文件的自动转码而无需用户自己进行转码，因此，最后我们采用了前端MP4视频编码格式判断+后台视频文件转码的方案解决~

2、前端MP4视频编码格式判断+后台视频文件转码

前端怎么进行判断一个MP4视频文件是不是H.264编码格式呢？在这里，就需要获取当前视频编码的信息，也就是Codec，并且根据Codec进行视频编码格式的判断。而为了获取到Codec，我们可以借助现有的一些插件，如mediainfo.js（https://github.com/buzz/mediainfo.js）或mp4box.js（https://github.com/gpac/mp4box.js）进行获取，而由于medianinfo.js的体积较大，mp4box.js比较轻量，因此实现过程中采用了mp4box.js进行视频编码格式的检测。

为了使用mp4box.js，我们首先需要先进行mp4box.js的安装

npm install mp4box --save

接着就需要在我们的项目中引入mp4box.js

import mp4box from \'mp4box\'

Vue.prototype.$checkVideoCode = async  function checkVideoCode(file) {
  return new Promise((resolve, reject) => {
    const mp4boxFile = MP4Box.createFile();
    const reader = new FileReader();
    reader.readAsArrayBuffer(file.tempFile);
    reader.onload = function (e) {
      const arrayBuffer = e.target.result;
      arrayBuffer.fileStart = 0;
      mp4boxFile.appendBuffer(arrayBuffer);
    };
    mp4boxFile.onReady = function (info) {
      resolve(info);
    };
    mp4boxFile.onError = function (info) {
      reject(info);
    };
  });
}

由于在mp4box.js中，如果一个MP4视频文件的编码格式为H.264，则其Codec是会包括avc这个字符串的，因此我们可以通过判断Codec中是否包含"avc"从而进行H.264视频编码格式的判断

image.png

最后，当后台接收到的is_transcode为1时，就将MP4视频文件进行转码，并且将转码后的视频文件保存起来，这样，无论用户上传什么编码格式的MP4视频文件，最后都能够转换成H.264编码格式的视频文件保存起来，因此，当用户下次访问页面并播放MP4视频时，就可以看到所有的MP4视频都能够在Chrome正常播放