2023年6月27日发(作者：)

js获取视频编码格式信息遇到问题在开发中，测试反馈了⼀个问题，就是在前端上传视频后，视频⽆法回显，显⽰⿊屏。于是我要来了测试上传的视频，看了下后缀名是.mp4， ⽤vlc打开播放正常，于是我开始了爬坑之旅。查找原因因为后缀名和播放都是正常的，先考虑是不是视频编码格式问题。⾸先查看MDN⽂档，查看html⽀持的视频格式，了解到⽀持的视频后缀有如下： mp4, webm, ogg，那我们的mp4的视频类型应该没有问题的。那就开始看看视频编码格式问题，查看视频编码的⽅法我们就⽤vlc打开视频:可以看到，显⽰的codec是mp4v:为了验证是不是编码格式的问题，⽤录屏软件和⼿机分别拍摄了⼀些视频做了测试，测试结果如下：视频格式ev录制mp4ev录制aviev录制flvev录制wmv视频编码信息（VLC）MPEG-4 Video(FMP4)Flash-Video (FLV1)MS-MPEG-4-Video v3(MP43)⽹页能否正常播放异常异常异常异常H264-MPEG-4 AVC(part10 avc1)正常qq桌⾯端录制MPEG-4 Video(MP4V)qq⼿机端录制H264-MPEG-4 AVC(part10 avc1)正常tim录制微信录制H264-MPEG-4 AVC(part10 avc1)正常H264-MPEG-4 AVC(part10 avc1)正常根据上述结果可以看到，编码格式(codec)和⽂件类型(type，后缀名)会导致视频⽆法正常播放。备注：ev是windows下的⼀款录屏软件，测试提供的视频就是⽤qq桌⾯端功能录制的视频。解决问题⽬前前端操作，获取⽂件类型倒是⽐较简单，⼀般传输图⽚、⽂本等等都是根据和来判断是否允许上传。但是我们这⾥只获取name和type也⽆法判断，我们上传的视频能否正常播放了。我找了很久的之后，发现了github上⼤神的写的⼀个框架 可以帮助我们解决这个问题。mp4box安装npm i mp4box -S导⼊import MP4Box from 'mp4box'校验代码async videoBeforeUpload(file) { const isVideo = === 'video/mp4' || === 'video/ogg' || === 'video/webm'; const isLt30M = / 1024 / 1024 < 30; if (!isVideo) { this.$g('请上传正确格式的视频！'); return () } else { if (!isLt30M) { this.$g('上传视频⽂件⼤⼩不能超过 30MB!'); return () } } // 正确的视频后缀会有mime信息 let result = await ideoCode(file) let valid = ecValid() if (!valid) { this.$('请上传正确的视频编码格式') return () }},async checkVideoCode(file) { return new Promise((resolve, reject) => { const mp4boxFile = File(); const reader = new FileReader(); ArrayBuffer(file); = function (e) { const arrayBuffer = ; art = 0; Buffer(arrayBuffer); }; y = function (info) { resolve(info) }; r = function (info) { reject(info) }; })},getCodecValid(str) { let arr = (';') return !!(arr[1].includes('mp4a') || arr[1].includes('avc1'));},因为我是⽤了elementUI框架的组件，所以返回的值都是promise类型，⼤家⾃⾏修改为return false 就⾏了。因为判断codec 我感觉⽐较复杂(我懒)，所以我⽤了和类型判断和getCodecValid 简单的判断了⼀下编码格式。通过这两种⽅式，我们可以获取到不能播放的视频格式了。接下来的处理⼤家各取所需，可以让⽤户继续传，但是没办法观看，让后端转码。或者直接拦截，不让⽤户传。或者提⽰，你传了可以，⽹页观看不了，⾃⼰下载下来观看。其他框架在发现和解决问题的过程中，我发现了⼏个不错的视频组件和转码框架。bilibili的flv格式视频播放解决⽅案：视频播放组件：常⽤的视频处理库：补充测试视频codec信息视频格式视频编码信息（VLC）codec信息（MP4BOX）ev录制mp4H264-MPEG-4 AVC(part10avc1)video/mp4; codecs="avc1.42c028"; profiles="isom,iso2,avc1,mp41"ev录制aviMPEG-4 Video(FMP4)nullev录制flvFlash-Video (FLV1)nullev录制wmvMS-MPEG-4-Video v3(MP43)nullqq桌⾯端录制MPEG-4 Video(MP4V)application/mp4; codecs="mp4v"; profiles="isom,iso2,mp41"qq⼿机端录H264-MPEG-4 AVC(part10video/mp4; codecs="avc1.640020,mp4a.40.2";制avc1)profiles="isom,iso2,avc1,mp41"tim录制H264-MPEG-4 AVC(part10video/mp4; codecs="avc1.64001f,mp4a.40.2";avc1)profiles="isom,iso2,avc1,mp41"微信录制H264-MPEG-4 AVC(part10avc1)video/mp4; codecs="mp4a.40.2,avc1.64001f"; profiles="mp42,isom"参考⽹页能否正常播放正常异常异常异常异常正常正常正常