前端小知识(四)：video视频获取第一帧作为展示

video视频获取第一帧作为展示

移动端h5中使用video标签展示第一帧内容为空白，所以手动添加第一帧图片用来展示

handleVideoPosterFun 生成视频的第一帧，并添加到video标签上

function handleVideoPosterFun(videos) {   // 创建一个 Promise 数组来跟踪每个视频的处理状态   const promises = Array.from(videos).map((video, index) => {     return new Promise((resolve, reject) => {       // 创建一个新的video元素       const tempVideo = document.createElement('video');       tempVideo.src = video.querySelector('source').src;       tempVideo.crossOrigin = 'anonymous'; // 处理跨域问题        // 等待视频元数据加载完成       tempVideo.addEventListener('loadeddata', function () {         // 确保视频能够播放         tempVideo.currentTime = 0.1; // 确保当前时间稍微超出0秒         tempVideo.addEventListener('seeked', function () {           // 创建一个canvas元素           const canvas = document.createElement('canvas');           canvas.width = tempVideo.videoWidth;           canvas.height = tempVideo.videoHeight;            // 将视频的第一帧绘制到canvas上           const ctx = canvas.getContext('2d');           ctx.drawImage(tempVideo, 0, 0, canvas.width, canvas.height);            // 将canvas内容转换为数据URL，并设置为poster属性           const dataURL = canvas.toDataURL('image/png');           video.setAttribute('poster', dataURL);            resolve(); // 处理完成，解析Promise         });          // 触发seek事件         tempVideo.currentTime = 0.1;       });        tempVideo.addEventListener('error', reject);       tempVideo.load();     });   });    // 返回一个Promise，等待所有视频处理完成   return Promise.all(promises); } 

此处例子是把富文本中的video添加上poster，然后在移动端中展示
此处返回的内容是一个promise 对象

async function setVideoPosterFromFirstFrame(htmlString) {   // 创建一个临时的DOM元素   const parser = new DOMParser();   const doc = parser.parseFromString(htmlString, 'text/html');    // 获取所有的video标签   const videos = doc.querySelectorAll('video');    // 检查是否有video标签   if (videos.length === 0) {     console.log('No video tags found');     return htmlString; // 如果没有video标签，返回原始字符串   }   try {     await handleVideoPosterFun(videos); // 等待所有视频处理完成   } catch (error) {     console.error('Error processing video posters:', error);   }    // 返回处理后的HTML字符串   return doc.body.innerHTML; } 

获取值

let a = await setVideoPosterFromFirstFrame(res.content)