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

时间：2021-07-28 15:08:16

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

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

2.获取视频的基本信息

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

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

  • 引入插件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))

	})

}

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

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

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);

				}

			}

		}

相关文章