js获取视频第一帧

代码

doctype html>


    
    
    
    Document







    function chooseVideo(e) {
        var file = e.files[0];
        var blob = new Blob([file]), // 文件转化成二进制文件
            url = URL.createObjectURL(blob); //转化成url

        //创建video标签
        var videoElement = document.createElement("video");
        videoElement.src = url
        videoElement.addEventListener("canplay", function() {
            var canvas = document.createElement("canvas");
            canvas.width = videoElement.videoWidth;
            canvas.height = videoElement.videoHeight;
            canvas.getContext("2d").drawImage(videoElement, 0, 0, canvas.width, canvas.height);
            var firstFrame = canvas.toDataURL("image/png") //第一帧图片url
            document.getElementById("firstV").src = firstFrame
        })
    }

只能转换.mp4文件 很多视频第一帧是黑屏，最好是交给后端处理