JavaScript判断视频编码是否为h.264

1.视频编码是什么？

现在视频编码主流是h.264，对应着输入格式为AVC

H.264/AVC是2003年制定的视频编码压缩标准 ，集中了以往标准的优点，并吸收了以往标准制定中积累的经验，采用简洁设计，使它比MPEG4更容易推广。H.264创造性了多参考帧、多块类型、整数变换、帧内预测等新的压缩技术，使用了更精细的分象素运动矢量（1/4、1/8）和新一代的环路滤波器，使得压缩性能大大提高，系统更加完善。

有兴趣深入了解可以好好看看

好学直通车

https://baike.baidu.com/item/%E8%A7%86%E9%A2%91%E7%BC%96%E7%A0%81/839038?fr=aladdin

2.获取视频的基本信息

• 我们通过input拿到系统对象e里面的文件信息很有限，而且没有我们想要的东西。
  
  

• 引入插件mediainfo.js
  
  这是出色的MediaInfoLib的JavaScript端口， 可以直接在浏览器或Node.js中运行。它使用Emscripten从C ++源代码进行编译 。

演示地址https://mediainfo.js.org/

github地址https://github.com/buzz/mediainfo.js

看下他的魔法，使用很简单可以直接用CDN

<script type="text/javascript" src="https://unpkg.com/mediainfo.js/dist/mediainfo.min.js"></script>

function base_videoInfo(id) {
	const fileinput = document.getElementById(id);
	const onChangeFile = (mediainfo) => {
		const file = fileinput.files[0]
		if (file) {
			const getSize = () => file.size
			const readChunk = (chunkSize, offset) =>
				new Promise((resolve, reject) => {
					const reader = new FileReader()
					reader.onload = (event) => {
						if (event.target.error) {
							reject(event.target.error)
						}
						resolve(new Uint8Array(event.target.result))
					}
					reader.readAsArrayBuffer(file.slice(offset, offset + chunkSize))
				})
			mediainfo.analyzeData(getSize, readChunk).then((result) => {
				// console.log(result)
				// console.log(result.media.track[1].Format)
				//result.media.track[1].Format == "AVC"说明是h264
				if (result.media.track[1].Format != "AVC") {

				}
			}).catch((error) => {
				console.log(error)
			})
		}
	}
	MediaInfo({ format: 'object' }, (mediainfo) => {//format结果值的格式（选择：object，JSON，XML，HTML或text）
		fileinput.addEventListener('change', () => onChangeFile(mediainfo))
	})
}

看下拿到的东西够不够详细

3.用canvas给上传视频画个缩略图

没用插件之前我是通过先在页面创建video标签然后播放视频最后拿到视频的宽高、时长等信息，用了插件完全不需要了

		function drawVideoImage() {
			var videoUrl = window.URL.createObjectURL(file);
			var video = document.createElement('video');
			video.src = videoUrl;
			// 让视频自动播放来来获取宽高和缩略图
			video.autoplay = true;
			video.muted = true;
			$('#createDynamicMadal .video').html('');
			$('#createDynamicMadal .video').append(video);
			// 当video加载完成时获取的
			$('#createDynamicMadal .video video')[0].onloadedmetadata = function () {
				videoHeight = $(this).height();
				videoWidth = $(this).width();
			}
			$('#createDynamicMadal .video video')[0].play();
			var index = 0;
			$('#createDynamicMadal .video video')[0].ontimeupdate = function () {
				var time = Math.floor(this.duration);
				var canvas = document.createElement('canvas');
				canvas.width = videoWidth;
				canvas.height = videoHeight;
				var context = canvas.getContext('2d');
				context.fillStyle = '#000';
				context.drawImage(this, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
				var src = canvas.toDataURL('image/jpeg');
				// 将视频的缩略图渲染到页面中
				if (src != 'data:,') {
					var dynamicImg = new Image();
					dynamicImg.src = src;
					$(dynamicImg).attr('index-video', '1');
					// 将压缩的后的图片渲染到页面中
					$('.upload-video').before(`<div class="upload-item upload-items upload-video-img" style="display:inline-block;margin-right:5px;"><img src="${src}" index-video='2'><i class="iconfont icon-guanbishixin delete-img"></i><div class="edit_cover">编辑封面</div></div>`)
					thumbnailImg = dataURLtoFile(src, 'thumbnailImg.jpeg');
					duration = time;
					this.ontimeupdate = null;
					$('#file-upload').val('');
					// 隐藏选择视频框
					$('.upload-video').hide();
					$('#loading').hide();
					$('#loading .loading-item .loading-text').text('');
					// 清空创造的video标签，避免造成性能浪费以及报错
					$('#createDynamicMadal .video').html('');
					// 加载完成后销毁url，节省性能
					window.URL.revokeObjectURL(videoUrl);
				}
			}
		}