video视频根据已有时间点连续截图的问题

Question

视频截图，如何能连续指定多帧截图？

需要做一个视频连续截图的功能，在视频已经加载好的情况下，已有几个关键时间点，点一个按钮把这个几个时间点的视频截图取出来。

最开始我直接设置currentTime，然后调用截图方法，发现视频还没动，就截图了。
然后我把截图方法放进里this.$nextTick里，结果还是一样的。
之后我就想在视频设置完时间的回调里写方法，设置timeupdate，结果是多次设置currentTime，只有最后一次触发回调方法。

    aaa () {
      this.imgList = []
      let video = this.$refs.video
      console.log(Date.now())
      let fun = (a) => {
        console.log(a)
        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.src = canvas.toDataURL()
        this.imgList.push(img)
        this.$refs.slider.appendChild(img)
        console.log(img)
      }
      // video.addEventListener('timeupdate', fun)
      video.ontimeupdate = fun
      // video.cutImg = fun
      for (let i = 0; i < 20; i++) {
        video.currentTime = 2.9 + i / 10
        // this.$nextTick(_ => {
        //   video.cutImg()
        // })
      }
      // video.removeEventListener('timeupdate', fun)
      // video.ontimeupdate = ''
      console.log(this.imgList)
      console.log(Date.now())
    }

框架用的vue，我希望可以实现点一个按钮根据已有的时间点截多张图，谢谢同志们。。

Answer 1

设置 currentTime 的时间间隔太短了。

<template>
  <div>
    <video
      src="./xxx.mp4"
      ref="video"
      controls="controls"
      @timeupdate="cutImg"
      @loadeddata="onloadeddata"
    ></video>
    <div ref="slider"></div>
  </div>
</template>

<script>
export default {
  methods: {
    cutImg(){
      console.log("cutImg");
      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);
      }
      img.src = canvas.toDataURL();
    },
    onloadeddata() {
      console.log("onloadeddata");
      let video = this.$refs.video;
      let intervalTime = 500;//自行调整时间，实验500ms合适
      for (let i = 0; i < 20; i++) {
        setTimeout(()=>{
          console.log("set currentTime", Date.now());
          video.currentTime = 2.9 + i / 10;
        }, intervalTime * i);
      }
    }
  }
};
</script>

Answer 2

不知道你想用在什么地方，一般网站上展示的那种处理都是预先在后台处理好的，服务器上都只是调用这些资源而已。

Answer 3

视频截图通常用 ffmpeg 在命令行截，不是在前端截的。

至于你的问题，<video> 边加载边播放，所以你跳转到特定时间，未必能立刻播放，所以你截图就是黑的。至于 nextTick()，只是跳转到下一个 event loop 而已，正常不会超过 20ms，根本不够。我记得 video 有一个事件，是加载量足够播放，你可以在那个时刻截图试试。

Answer 4

有没有那种按视频时间分16张截图，但是加载时间比较长要将近10秒，可以3到5秒内处理完吗