如何截取视频第一帧（含跨域问题）

首选创建一个视频标签 

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