Chrome使⽤video⽆法正常播放MP4视频的解决⽅案
世界美院排名H5的video标签让前端开发者⽤⼀⾏代码就可以实现视频和⾳频的播放，然⽽，有时候我们会突然发现，某些Mp4格式的视频在Chrome下居
然⽆法正常播放？这究竟是什么原因呢？这篇⽂章主要分析了部分Mp4⽂件在Chrome下⽆法正常播放的原因，最后，将会给出相应的解决
⽅案~
⼀、先从video标签讲起
和平精英火箭少女101在2000年代初期到后期，⽹络上的视频播放主要依靠Flash插件，这是因为当时没有其它⽅法可以在浏览器上流式传输视频，然⽽，并⾮所有浏览器都拥有相同的插件，
为了填补这个空⽩，WHATWG开始研究HTML标准的新版本，并在HTML5中规定了⼀种通过video标签来包含视频的标准⽅法。在HTML5中，在页⾯中播放视频⾮常简<html\>
<head\>
<meta charset\="UTF-8"\>
<title\>My Video</title\>
新鱼塘水浑浊怎么处理</head\>
<body\>
<video src\="some\_video.mp4" width\="1280px" height\="720px" />
</body\>
</html\>
到⽬前为⽌，Internet Explorer 9+、FireFox、Opera、Chrome和Safari等浏览器中都已经⽀持<video>标签，同时，<video>也能够⽀持MP4、WebM和Ogg等不同视频然⽽，前不久在做⼀个项⽬时，发现在Chrome下有些MP4视频⽂件居然不能正常播放了在这个项⽬中，主要包括了教师端和学⽣端，在教师端中，⽼师可以上
嗯~这个视频看起来挺正常的呀，于是我⼜选择了另⼀个MP4视频进⾏播放~
咦？怎么这个MP4视频在播放时不能看到图像⽽只能听到声⾳了？于是我⼜打开了IE，发现这个视频在IE中居然⼜可以正常播放了！
1、视频⽂件格式
在Windows系统中，我们所创建的⽂件都带有后缀，如.doc等，Windows设置后缀名的⽬的是让系统中的应⽤程序来识别并关联这些⽂件，让相应的⽂件由相应的应⽤⼀般来说，常⽤的视频⽂件格式通常包括了.mpg、.mkv、.wmv和.mp4等，当我们双击这些⽂件时，它会和我们电脑安装的视频播放器关联，并且打开视频播放器进⾏2、视频封装格式
视频封装格式是指把编码器⽣成的多媒体内容（视频、⾳频和字幕）混合封装在⼀起的标准。简单点讲，视频封装格式其实就是相当于⼀种存储视频信息的容器，
⼀般来说，常见的视频封装格式主要包括了以下⼏种：
（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⽬前包括（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 3、视频编码⽅式
视频编码⽅式是指能够对数字视频进⾏压缩或者解压缩（视频编码）的程序或设备，通常这种压缩属于有损数据压缩，通过特定的压缩技术，可以将某个视频格式
从上图可以看出，⽬前常见的编码⽅式式主要包括了以下⼏种：少年仙人在异世
（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正常播放的问题。⽽通过前⾯的分那么，为什么Chrome只⽀持H.264这种编码⽅式⽽不⽀持所有的视频编码⽅式呢？Google查了⼀下，⽹上给出的原因主要是说因为绝⼤
部分的视频编码格式都要付专利四、解决⽅案
既然对于MP4视频⽂件来说，Chrome只能⽀持H.264编码⽅式视频⽂件的播放，⽽由于MP4视频⽂件可能包含多种编码，因此，较好的解决⽅案就是对上传的MP4视频1、ffmpeg转码
⽹上Google了⼀圈，发现很多⽅法都是推荐采⽤ffmpeg⼯具进⾏转码，通过使⽤ffmpeg，就可以轻松使⽤命令⾏进⾏视频转码~
如果你的电脑是mac，那么ffmpeg的安装⾮常简单，只需要下⾯⼀句命令⾏就搞定了
brew install ffmpeg
我们也可以通过npm进⾏安装ffmpeg，并且在node中使⽤
npm install ffmpeg //安装
var ffmpeg = require('ffmpeg');
通过下⾯的命令，我们就可以轻松的将MP4视频⽂件转换成H.264编码⽅式的视频
ffmpeg -i input.mp4 -vcodec h264 output.mp4 //h264默认转码
然⽽，在实际的业务中，我们并不能总要求⽤户只上传H.264编码⽅式的MP4视频⽂件，更好的⽅式是能够实现MP4视频⽂件的⾃动转码⽽⽆需⽤户⾃⼰进⾏转码，因此2、前端MP4视频编码格式判断+后台视频⽂件转码
⾸先，当⽤户上传MP4⽂件时，前端会对MP4视频⽂件的编码格式进⾏判断。如果该视频⽂件是H.264编码格式，则将事先约定的字段is\_transcode设置为0，告诉后台那么，问题⼜来了，前端怎么进⾏判断⼀个MP4视频⽂件是不是H.264编码格式呢？在这⾥，就需要获取当前视频编码的信息，也就是Codec，并且根据Codec进⾏视频为了使⽤mp4box.js，我们⾸先需要先进⾏mp4box.js的安装
npm install mp4box --save
接着就需要在我们的项⽬中引⼊mp4box.js
import mp4box from 'mp4box'
由于在mp4box.js中，如果⼀个MP4视频⽂件的编码格式为H.264，则其Codec是会包括avc这个字符串的，因此我们可以通过判断Codec中是否包含"avc"从⽽进⾏H.26⽰例代码如下：
var input = ElementById("file"); // 获取上传的⽂件
var file = this.files\[0\];
var mp4boxfile = ateFile();
var is\_transcode = 0;
let mime \= info.mime
let codec \= mime.match(/codecs="(\\S\*),/)\[1\]
if (codec.indexOf('avc') === -1) {
is\_transcode \= 1; // 需要转码
}
// 进⾏⽂件上传操作
...
}
if(file){
// 读取mp4的buffer
var reader = new FileReader();
var buffer = adAsArrayBuffer(file);
var arrayBuffer = sult
arrayBuffer.fileStart \= 0
mp4boxFile.appendBuffer(arrayBuffer)
}
}
ladygaga图片
}
最后，当后台接收到的is\_transcode为1时，就将MP4视频⽂件进⾏转码，并且将转码后的视频⽂件保存起来，这样，⽆论⽤户上传什么编码格式的MP4视频⽂件，最后
发布评论