video标签获取视频第一帧
video标签获取视频第一帧
·
// 获取视屏第一帧
getFirstImg() {
const homeVideo = document.getElementById('upload_video')
const canvas = document.createElement('canvas')
canvas.width = homeVideo.videoWidth
canvas.height = homeVideo.videoHeight
canvas.getContext('2d').drawImage(homeVideo, 0, 0, canvas.width, canvas.height)
const firstFrame = canvas.toDataURL('image/png', 1) // 第一帧图片url
return this.dataURLtoFile(firstFrame, '第一帧')
},
dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, { type: mime })
},
注意: 视频未加载完全获取第一帧会获取到黑色图片!!
解决方法: 调整代码顺序或者延时器!!
video标签无法解析后端返回不带后缀的url(Android和iOS是否都存在暂未确定)
更多推荐
已为社区贡献1条内容
所有评论(0)