网站后台怎么做友情链接,建设一个直播网站,鲜花网站建设文档,小程序推广方案文章目录 解决获取视频第一帧黑屏问题核心代码 解决获取视频第一帧黑屏问题
废话不多说#xff0c;直接上代码#xff1a;
script setup
const status ref(请点击“添加视频”按钮添加视频)
const videoElement ref(document.createElement(video))
const curren… 文章目录 解决获取视频第一帧黑屏问题核心代码 解决获取视频第一帧黑屏问题
废话不多说直接上代码
script setup
const status ref(请点击“添加视频”按钮添加视频)
const videoElement ref(document.createElement(video))
const currentImageSource ref(null)async function getImageByVideo() {videoElement.value.src https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webmvideoElement.value.crossOrigin anonymous // 处理跨域videoElement.value.preload metadatavideoElement.value.muted truevideoElement.value.playsInline truestatus.value 视频加载中...// 解决封面黑屏问题await new Promise((resolve) {videoElement.value.addEventListener(loadeddata, resolve, { once: true })})// 设置当前时间确保获取有效帧videoElement.value.currentTime 0.01// 等待视频跳转到指定时间await new Promise((resolve) {videoElement.value.addEventListener(seeked, resolve, { once: true })})// 获取视频帧作为封面const canvas document.createElement(canvas)canvas.width videoElement.value.videoWidthcanvas.height videoElement.value.videoHeightconst ctx canvas.getContext(2d)ctx.drawImage(videoElement.value, 0, 0, canvas.width, canvas.height)// 创建封面图像const img new Image()img.src canvas.toDataURL(image/jpeg)img.onload () {currentImageSource.value img}
}
/script核心代码 // 解决封面黑屏问题await new Promise((resolve) {videoElement.value.addEventListener(loadeddata, resolve, { once: true })})// 设置当前时间确保获取有效帧videoElement.value.currentTime 0.01// 等待视频跳转到指定时间await new Promise((resolve) {videoElement.value.addEventListener(seeked, resolve, { once: true })})
