js上传视频并截取缩略图

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
<input type="file" name="myfiles" id="myfiles" onchange="uploadVideo('myfiles',this)">
<div id="videoarea"></div>
<div id="imgarea"><img src=""></div>
</body>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
function uploadVideo(field,that) {
    var file = that.files[0];        
    //视频截图
    windowURL = window.URL || window.webkitURL;
    videoURL = windowURL.createObjectURL(file);
    $('#videoarea').html('<video src="' + videoURL + '" controls="controls"></video>');
    //

    var formdata = new FormData();
    formdata.append(field, file);
    XHR = new XMLHttpRequest();
    XHR.open('POST', 'baidu.addvideos?field='+field, true);
    XHR.onreadystatechange = function() {
            if (XHR.readyState == 4) {
                if (XHR.responseText.indexOf('|') >= 0) {
                    //####
                    //####
                    //####

                    //视频截图
                    var scale = 0.25,
                        video = $('#videoarea').find('video')[0],
                        canvas = document.createElement("canvas"),
                        canvasFill = canvas.getContext('2d');
                    canvas.width = video.videoWidth * scale;
                    canvas.height = video.videoHeight * scale;
                    canvasFill.drawImage(video, 0, 0, canvas.width, canvas.height);
                    var src = canvas.toDataURL("image/jpeg");
                    $('#imgarea').attr('src',src);//图片展示
                    //
                }
            }
        };
        XHR.send(formdata);
}
</script>
</html>
吃水不忘挖井人：
js实现视频上传截取缩略图
js上传视频并截取缩略图

猜你喜欢
