JavaScript检测视频的编码格式是否为h264

更多前端信息可以关注博客：http://www.colbrus.com

之前在网上找的都是些浏览器判断是否支持h264格式的代码，后来在git上看到有解决方案，并且有插件可以直接使用，只是插件文件比较大，有7M多，大家在使用的时候注意一下，以下是我用了插件之后提炼出来的代码，希望能看懂，看不懂可以及时评论哦。

git源码：https://github.com/buzz/mediainfo.js/tree/gh-pages

一、引用插件：
引用1.mediainfo.js：https://github.com/buzz/mediainfo.js/blob/gh-pages/js/mediainfo.js（文件有7M比较大，在打开的时候可能有点卡）
引用2.xml2json.js：https://github.com/buzz/mediainfo.js/blob/gh-pages/js/xml2json.js

<script src="/js/mediainfo.js"></script>
<script src="/js/xml2json.js"></script>

引用3.mediainfo.js.mem：https://github.com/buzz/mediainfo.js/blob/gh-pages/js/mediainfo.js.mem

（此文件我也不知道有什么用，不需要在html页面中引用，但是在mediainfo.js中有用到此文件）

mediainfo.js 的最下面可以找到引用mem的路径，可以在这里修改。memoryInitializerPrefixURL

return function(cb) {return Module({memoryInitializerPrefixURL: '/assets/js/mediainfo/',onRuntimeInitialized: cb});
};

二、预加载，并判断改变后进行解析文件（部分可以进行修改），下一步 parseFile()

    var $videoFile = document.querySelector('#videos');var CHUNK_SIZE = 5 * 1024 * 1024;var miLib, mi;var processing = false;var x2js = new X2JS();//创建mediaInfo ，页面一打开就运行miLib = MediaInfo(function() {console.debug('MediaInfo ready');window['miLib'] = miLib; // debugmi = new miLib.MediaInfo();$videoFile.addEventListener('change', () => {//判断input是否上传是否有变化，有变化则运行const videoFile = document.querySelector('#videos').files[0];parseFile(videoFile);});});

三、解析视频文件（此段代码照抄），下一步 addResult()

    function parseFile(file) {//解析视频文件processing = true;var fileSize = file.size, offset = 0, state = 0, seekTo = -1, seek = null;mi.open_buffer_init(fileSize, offset);var processChunk = function(e) {var l;if (e.target.error === null) {var chunk = new Uint8Array(e.target.result);l = chunk.length;state = mi.open_buffer_continue(chunk, l);var seekTo = -1;var seekToLow = mi.open_buffer_continue_goto_get_lower();var seekToHigh = mi.open_buffer_continue_goto_get_upper();if (seekToLow == -1 && seekToHigh == -1) {seekTo = -1;} else if (seekToLow < 0) {seekTo = seekToLow + 4294967296 + (seekToHigh * 4294967296);} else {seekTo = seekToLow + (seekToHigh * 4294967296);}if(seekTo === -1){offset += l;}else{offset = seekTo;mi.open_buffer_init(fileSize, seekTo);}chunk = null;} else {var msg = 'An error happened reading your file!';console.err(msg, e.target.error);alert(msg);return;}// bit 4 set means finalizedif (state&0x08) {var result = mi.inform();mi.close();addResult(file.name, result);return;}seek(l);};seek = function(length) {if (processing) {var r = new FileReader();var blob = file.slice(offset, length + offset);r.onload = processChunk;r.readAsArrayBuffer(blob);}else {mi.close();}};// startseek(CHUNK_SIZE);}

四、解析完成后复制到results （判断format的值是否为AVC,h264编码只需判断这个即可）

    function addResult(name, result) {//解析完成后复制到resultsvar results = [];var resultObj = x2js.xml_str2json(result);results.unshift(resultObj);var video_format;video_format=results[0].File.track[1].Format;if(video_format == "AVC"){console.log(video_format,"文件是h264编码格式");}else{// alert("请上传h264编码格式的视频文件！");}}

注：如果上述有错误的，希望可以积极帮忙指出错误，谢了！

JavaScript检测视频的编码格式是否为h264相关推荐

JavaScript 检测视频和音频的格式
大家好,我翻译一下子 David Walsh 文章, 用JavaScript 检测视频和音频的格式,https://davidwalsh.name/detect-supported-video-for ...
使用FFmpeg将视频编码格式转化为H264编码
背景介绍: web开发中涉及到视频播放的前端一般会使用h5的video标签对后端提供的视频文件url直接加载进行播放,虽然视频文件后缀都是mp4,但并非所有视频文件的编码格式都支持用video播放,目 ...
旧版RTSP协议网页视频无插件直播EasyNVR视频平台为什么无法播放H264编码视频？
RTSP协议视频平台EasyNVR经过了很多代的升级,目前已经支持H.265编码视频的播放,然而我们很多客户使用的还是旧版本的EasyNVR视频服务器软件(4.0.0之前的版本统称为旧版,均不支持H2 ...
Java 视频直播JavaCV（ffmpeg h264）+RTSP实现低延时1秒推流
上一篇文章介绍了通用协议onvif获取到rtsp地址Java onvif协议通用协议获取rtsp地址当然也有很多其他的方式获取rtsp地址首先还是引入包: & ...
将视频 YUV 格式编码成 H264
首先开始的时候我们借用一张雷神的图帮助大家理解一下我们今天的操作究竟属于那一步. 从上图可以看出我们要做的,就是将像素层的 YUV 格式,编码出编码层的 h264数据. 首先熟悉一下今天我们要用到的 ...
JavaScript检测之basevalidate.js
上篇文章「JavaScript检测原始值.引用值.属性」中涉及了大量有用的代码范例,为了让大家更方便的使用这些代码,博主特意把这些代码重新整理并托管到 GitHub,项目地址是:https://git ...
videowriter最小的编码格式_cv2.VideoWriter() 指定写入视频帧编码格式
今天用opencv保存的视频文件超级大,被小伙伴们嘲笑,哈哈,原来是视频帧编码格式导致的,这里记录下常用的保存视频编码格式. 编码参数:cv2.VideoWriter_fourcc('I','4',' ...
javascript入门视频第一天小案例制作零基础开始学习javascript
JavaScript 是我们网页设计师必备的技能之一.我们主要用javascript来写的是网页特效.我们从零基础开始学习javascript入门. 但是,好的同学刚开始不知道怎么学习,接触js,因此 ...
问题解答004：用javascript检测输入的只能是汉字，字母或者数字，并且长度为4...
问:如何用javascript检测输入的只能是汉字,字母或者数字,并且长度为4(一个汉字为2个长度,字母或数字为1个长度)? 答:直接写代码吧: <script type="text/ ...

JavaScript检测视频的编码格式是否为h264

JavaScript检测视频的编码格式是否为h264

JavaScript检测视频的编码格式是否为h264相关推荐

最新文章

热门文章