前端小知识(四)：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)