用户上传视频，获取到时长后截取16张图片，然后加载时间要在3到5秒之内

Question

<template>
    <div>
        <video id="video" ref="video" controls="controls" @timeupdate="cutImg" @loadeddata="onloadeddata">
        </video>
      
            <div ref="slider" class="box" id="box"></div>
      
        <input type="file" id="file" @change="onInputFileChange()">
    </div>
</template>

<script>

    export default {
        data() {
            return {
                totalCount: 36,//展示写的固定时间
                index: 0,
                time: '',
                oImg:'',
            }
        },
        methods: {
            //获取上传视频文件
            onInputFileChange() {
                var file = document.getElementById('file').files[0];
                console.log(file)
                var url = URL.createObjectURL(file);
                console.log(url);
                document.getElementById('video').src = url;
                setTimeout(() => {
                    this.time = document.getElementById('video').duration;
                    var hour = parseInt((this.time) / 3600);
                    var minute = parseInt((this.time % 3600) / 60);
                    var second = Math.ceil((this.time % 60))
                    console.log(this.time)
                }, 800)
            },

            cutImg() {
                if (this.index >= this.totalCount) {
                    this.getImg()
                    return;    
                }
                console.log("cutImg", this.index);
                console.log(Date.now());
                let video = this.$refs.video;
                let canvas = document.createElement("canvas");
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
                let img = document.createElement("img");   
                img.onload = () => {
                    this.$refs.slider.appendChild(img);
                    this.index += 2.25;
                }
                img.src = canvas.toDataURL();
            },
            onloadeddata() {
                let video = this.$refs.video;
                console.log(video)
                video.currentTime = 0;
                
            },
            //获取添加的照片
            getImg(){
                this.oImg = document.getElementById('box').getElementsByTagName('img');
                console.log(this.oImg);
            }

        },
        watch: {
            index() {
                console.log(this.index)
                let video = this.$refs.video;
                video.currentTime = 0 + this.index / 1;
                console.log(video.currentTime)
            }
        }
    };
</script>

<style scoped>
    

 
</style>

代码是参考大佬写的，原文链接如下
https://segmentfault.com/q/10...

Answer 1

有什么问题吗？

代码看上去没问题

1. input获取文件blob
2. 然后生成blobUrl
3. 没有监听video的事件，而是用了setTimeout
4. 每次时间跳动的时候触发canvas截图，转成了png的base64
   这里感觉可以使用jpg，会小一点。