如何截取視頻第一幀（含跨域問題）

首選創建一個視頻標籤 

<video src="" name='VideoWay' id="video" controls="controls" ></video>

創建一個截取視頻圖片的方法 

    function initialize() {
        var scale = 0.8;
        var video = document.getElementById("video");;
        video.addEventListener('loadeddata', function () {
            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); // getContext:設置畫布環境；drawImage:畫畫
            var url = canvas.toDataURL("image/png", 1.0);//圖片base64格式
            $("#picimg").attr("src", url)
        });
    }

上面的方法就可以視頻截取第一幀了，但是如果是跨域的視頻將會出現問題，爲了解決跨域問題我們需要這樣做

<!--給video加上屬性 crossorigin="anonymous"解決跨域問題-->
<video src="" crossorigin="anonymous" name='VideoWay' id="video" controls="controls"></video>

如果出現截圖爲白圖問題，可以參照一下方法

    function initialize() {
        var scale = 0.8;
        var video = document.getElementById("video");;
        video.addEventListener('loadeddata', function () {
            setTimeout(function () {
                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); // getContext:設置畫布環境；drawImage:畫畫
                var url = canvas.toDataURL("image/png", 1.0);
                $("#picimg").attr("src", url)
            }, 500);
        }); 
    }