视频截图，如何能连续指定多帧截图？
需要做一个视频连续截图的功能，在视频已经加载好的情况下，已有几个关键时间点，点一个按钮把这个几个时间点的视频截图取出来。
最开始我直接设置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，我希望可以实现点一个按钮根据已有的时间点截多张图，谢谢同志们。。
已解决
悬赏分：80
- 解决时间 2021-11-26 17:41
点赞 0反对 0举报 0
收藏 0
分享 0
回答4
最佳
-
设置 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>支持 0 反对 0 举报2021-11-26 05:02
-
视频截图通常用 ffmpeg 在命令行截，不是在前端截的。
至于你的问题，<video> 边加载边播放，所以你跳转到特定时间，未必能立刻播放，所以你截图就是黑的。至于 nextTick()，只是跳转到下一个 event loop 而已，正常不会超过 20ms，根本不够。我记得 video 有一个事件，是加载量足够播放，你可以在那个时刻截图试试。
支持 0 反对 0 举报2021-11-26 08:01
