從視頻中截取首幀作爲封面圖 並展示出視頻及封面圖（canvas）

html

<p class="clearfix">
	<label>視頻文件：</label>
	<span>
		<video id="video" controls="controls" src="http://{{model.videoUrl}}">
			您的瀏覽器不支持 video 標籤。
		</video>
		<span>
		    <input id="file" type="file" value="" name="file" style="display: none;" οnchange="myFunction()"/>
		    <label style="width: 100%;" for="file">上傳視頻</label>
		</span>
	 </span>
</p>
<!--在網上查的是加上 crossorigin="anonymous" 就可以避免跨域的問題 但是我自己測試的還是不行 可能是我們後臺那邊沒有添加吧 有時間讓後臺在請求頭處加一下試試 如果可以的話在更新-->
<img id="img" crossorigin="anonymous" style="float: left;" src="../../img/aaa.png" />

js

$(function() {
	initialize();
})
var video, videoFM;
var scale = 0.8;
function initialize() {
	video = document.getElementById("video");
	video.addEventListener('loadeddata', capImage);
};

function capImage() {
	var canvas = document.createElement("canvas");
	canvas.width = video.videoWidth * scale;
	canvas.height = video.videoHeight * scale;
	canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
	var img = document.getElementById("img");
	img.src = canvas.toDataURL("image/png");
};
function getFileURL(file) {
	var getUrl = null;
	if(window.createObjectURL != undefined) { // basic
		getUrl = window.createObjectURL(file);
	} else if(window.webkitURL != undefined) { // webkit or chrome
		getUrl = window.webkitURL.createObjectURL(file);
	} else if(window.URL != undefined) { // mozilla(firefox)
		getUrl = window.URL.createObjectURL(file);
	}
	return getUrl;
}
function myFunction() {//點擊上傳視頻
	var videoFile = document.getElementById('file');
	var url = getFileURL(videoFile.files[0]); //把選擇的視頻文件 files[0]
	$('#video').prop('src', url)
	console.log(videoFile.files[0])
	initialize();
}

希望能夠幫助到更多的小夥伴們，圖片跨域的問題後面解決了的話會直接貼代碼，如果是後臺的話就要。。。。。。