咨询服务类网站建设全国新冠疫情最新情况

需求分析

客户端中h5上传视频，视频封面默认首帧。

遇到问题：原生的video现象如下

• IOS会在加载好后显示首帧（没加载好显示黑屏，符合预期）
• Android加载好后默认封面为一个奇怪的占位图（不符合预期）

需求：显示首帧。

获得首帧

前端截取视频指定帧为封面的3种方法 - 知乎

已知视频url，获得首帧图：

  /*** 获取视频的封面图信息* @param url 视频地址* @param second 秒数*/async function getVideoBase64(url: string, second: number = 0) {const video = document.createElement('video');video.setAttribute('crossOrigin', 'anonymous'); // 处理跨域video.setAttribute('src', url);video.preload = 'metadata'; // 确保浏览器会预加载视频元数据video.muted = true;// 等待视频元数据加载完成await new Promise((resolve, reject) => {video.onloadedmetadata = resolve;video.onerror = reject;});if (second > 0) {video.currentTime = second;// 确保seeked事件触发后再进行截图await new Promise((resolve) => {video.onseeked = resolve;});}const canvas = document.createElement('canvas');const context = canvas.getContext('2d');if (!context) throw new Error('Failed to get canvas context');canvas.width = video.videoWidth;canvas.height = video.videoHeight;context.drawImage(video, 0, 0, canvas.width, canvas.height);const base64 = canvas.toDataURL('image/jpeg');return base64;}

经过尝试，currentTime 为0时获得的图为黑屏，这里设置为0.2

拿到首帧图：

然后就是常规逻辑：

把图存起来，盖在video上，记录video是否被点击。
点击过的视频不会显示首帧封面了，因此点击过就隐藏图片等。

在拿到首帧图前，可以让上传控件状态与上传时一致（即一直loading）。
让用户以为还在上传视频，实际上在解析封面。

其他方法

如果是阿里云OSS云服务器，可以视频地址后加：

?x-oss-process=video/snapshot,t_1000,m_fast

上传到阿里云oss的视频如何获取第一帧作为视频封面_阿里云oss获取第一帧-CSDN博客

还有一些其他复杂方法，经实践，没有上述方法获取首帧封面快：

【前端】上传视频，截取第一帧图片_前端获取视频第一帧图片-CSDN博客