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