视频缩略图生成

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频缩略图生成</title>
</head>
<body>

<div id="message"></div>
<input type="file" accept="video/*"/>
<video id="video" controls hidden ></video>
<button id="btn1">读取信息</button>
<canvas id="cv" width="1450" height="950"></canvas>
<script src="main.js"></script>
</body>
</html>

JavaScript

String.prototype.toHHMMSS = function () {
    var sec_num = parseInt(this, 10);
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    return hours+':'+minutes+':'+seconds;
}

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}


var tempfile;
(function localFileVideoPlayer() {
    'use strict'
    var URL = window.URL || window.webkitURL
    var displayMessage = function (message, isError) {
        var element = document.querySelector('#message')
        element.innerHTML = message
        element.className = isError ? 'error' : 'info'
    }
    var playSelectedFile = function (event) {
        tempfile = this.files[0]
        var type = tempfile.type
        var videoNode = document.querySelector('video')
        var fileURL = URL.createObjectURL(tempfile)
        videoNode.src = fileURL
    }

    var showFileInfo =async function(event){
        var videoNode = document.querySelector('video')
        var filename='文件名： ' + tempfile.name
        var filesize="大小： " +  (tempfile.size/1024/1024).toFixed(2) + "MB"
        var filetype="格式： " + tempfile.type
        var filepixel="分辨率：" + 	videoNode.videoWidth + "x" + 	videoNode.videoHeight
        var fileduration="时长： " + videoNode.duration.toString().toHHMMSS()
        //alert(str);
        var duration=videoNode.duration
        var canvas=document.getElementById('cv');
        var ctx=canvas.getContext('2d');
        ctx.clearRect(0,0,canvas.width,canvas.height)
        ctx.fillStyle="#EEEEEE";
        ctx.fillRect(0,0,canvas.width,canvas.height);
        //ctx.drawImage(img, 0, 0, 400, 400);
        ctx.font = 'bold 11px 微软雅黑';
        ctx.lineWidth = 3;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'white';
  ...