<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <video :src="videoSrc" crossOrigin="anonymous" controls="controls" width="500" height="400" id="videofile"></video>
        <input type="file" name="" id="file" accept="video/*" value="上传视频" @change="getBigectURL">
        <div id="output"></div>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            videoSrc: ''
        },
        methods: {
            getBigectURL(event) {
                // console.log('getBigectURL', event)
                var current = event.target.files[0]
                var fileReader = new FileReader()
                fileReader.readAsDataURL(current)
                var that = this
                fileReader.onload = function(e) {
                    that.videoSrc = e.currentTarget.result
                    console.log(that.videoSrc,11111)
                    const width = 300
                    const height = 400
                    var video = document.getElementById("videofile")
                    console.log(video,66666)
                    video.currentTime = 5 //必须设置视频当前时长,要不然会黑屏
                    var output = document.getElementById("output");
                    // 创建画布准备截图
                    var canvas = document.createElement('canvas')
                        // 创建图片标签
                    var img = document.createElement("img");
                    // 获取视频的标签
                    video = document.getElementById('videofile')
                    video.setAttribute('crossOrigin', 'anonymous')
                        // 设置画布的宽高
                    canvas.width = video.clientWidth
                    canvas.height = video.clientHeight
                        // 图片绘制
                    video.onloadeddata = (() => {
                        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
                        var dataURL = canvas.toDataURL('image/jpeg')
                        // console.log(dataURL,"-----")
                        img.src = dataURL;
                        img.width = 400;
                        img.height = 300;
                        // 添加到output盒子里面
                        output.appendChild(img);

                        // console.log(img)
                    })
                }

            },
        }
    })
</script>

</html>