微信 H5 video的loadeddata函数内使用canvas截取video的第一帧 内容为空

Question

在video元素的loadeddata回调函数内使用canvas截取video的第一帧，代码如下：

const canvas = document.createElement('canvas')
canvas.width = video.videoWidth * 2
canvas.height = video.videoHeight * 2
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
const img = new Image()
img.setAttribute('id', 'posterImg')
img.setAttribute('crossOrigin', 'anonymous')
img.src = canvas.toDataURL('image/png')
img.style.width = '100%'
img.style.height = '100%'
img.style.verticalAlign = 'top'
videoWrap.appendChild(img)

在浏览器中可以正常截取第一帧画面
在微信的H5内生成的img使用PC调试时看到的是透明的图，没有内容，如下截图：

请问怎么破？

Answer 1

我是 设置了 preload属性 就可以获取到了

Answer 2

反正我最后是用video.currentTime = 1配合setTimeout和Promise勉强处理了，不过截取的图好像就是第一秒结束的瞬时帧而不是第一帧了。