1. What is video coding?

Now the mainstream video encoding is H.264, corresponding to the input format of AVC

H.264/AVC is a video coding and compression standard developed in 2003. It concentrates the advantages of previous standards, and absorbs the experience accumulated in the development of previous standards. The simple design makes it easier to promote than MPEG4. H.264 creates new compression technologies such as multi-reference frames, multi-block types, integer transformation, intra-frame prediction, etc., and uses finer motion vectors (1/4, 1/8) and a new generation of loop filter, which greatly improves the compression performance and makes the system more perfect. You can have a good look if you are interested in further understanding

Through trainBaike.baidu.com/item/%E8%A7…

2. Obtain basic video information

  • The file information we get from the system object E through input is limited, and there is nothing we want.

  • Introduce the plugin mediainfo.js

This is an excellent JavaScript port for MediaInfoLib that runs directly in a browser or node.js. It uses Emscripten to compile from C ++ source code.

Demo address: mediainfo.js.org/

Making address github.com/buzz/mediai…

Look at his magic, use is very simple can directly use CDN

<script type="text/javascript" src="https://unpkg.com/mediainfo.js/dist/mediainfo.min.js"></script>
Copy the code
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" Indicates H264
				if (result.media.track[1].Format ! ="AVC") {
					
				}
			}).catch((error) = > {
				console.log(error)
			})
		}
	}
	MediaInfo({ format: 'object' }, (mediainfo) = > {//format Format of the result value (select object, JSON, XML, HTML or text)
		fileinput.addEventListener('change'.() = > onChangeFile(mediainfo))
	})
}


Copy the code

Let’s see if we have enough detail

3. Use Canvas to draw a thumbnail for your uploaded video

Before using plug-ins, I created a video TAB on the page, played the video, and finally got the video’s width, height, duration and other information, which was completely unnecessary

		function drawVideoImage() {
			var videoUrl = window.URL.createObjectURL(file);
			var video = document.createElement('video');
			video.src = videoUrl;
			// Let the video play automatically to get the width, height and thumbnail
			video.autoplay = true;
			video.muted = true;
			$('#createDynamicMadal .video').html(' ');
			$('#createDynamicMadal .video').append(video);
			// When the video has finished loading
			$('#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');
				// Render the thumbnail of the video to the page
				if(src ! ='data:,') {
					var dynamicImg = new Image();
					dynamicImg.src = src;
					$(dynamicImg).attr('index-video'.'1');
					// Render the compressed image to the page
					$('.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'>< div class="edit_cover"> </div></div> ')
					thumbnailImg = dataURLtoFile(src, 'thumbnailImg.jpeg');
					duration = time;
					this.ontimeupdate = null;
					$('#file-upload').val(' ');
					// Hide the selected video box
					$('.upload-video').hide();
					$('#loading').hide();
					$('#loading .loading-item .loading-text').text(' ');
					// Clear the created video tag to avoid performance waste and error reporting
					$('#createDynamicMadal .video').html(' ');
					// Destroy the URL after loading to save performance
					window.URL.revokeObjectURL(videoUrl); }}}Copy the code

PS: CDN with version number loading will be much faster, compared to not a fraction of the speed

Not adding the version number is also likely to lead to jam, load failure and many other problems

< script type = "text/javascript" SRC = "https://unpkg.com/[email protected]/dist/mediainfo.min.js" > < / script >