javascript截取視頻第一幀

<input type="file" id="upload-ipt" @change="chooseVideo" accept="video/*" />
<div id="box" style="display:none"></div>

chooseVideo(e) {
    var that = this;
    var obj_file = document.getElementById("upload-ipt");
    var file = obj_file.files[0];
    var blob = new Blob([file]), // 文件轉化成二進制文件
          url = URL.createObjectURL(blob); //轉化成url
    var $video = $('<div><video controls src="' + url + '"></video></div><div> </div>');
    $("#in-box").html($video);
    var videoElement = $("video")[0];
    videoElement.addEventListener("canplay", function(_event) {
        var canvas = document.createElement("canvas");
        canvas.width = videoElement.videoWidth;
        canvas.height = videoElement.videoHeight;
        canvas.getContext("2d").drawImage(videoElement, 0, 0, canvas.width, canvas.height); 
        console.log(canvas.toDataURL("image/png")); //第一幀圖片url
    })
}