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

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

   移动端h5中利用video标签展示第一帧内容为空缺，所以手动添加第一帧图片用来展示
  handleVideoPosterFun 生成视频的第一帧，并添加到video标签上

1. function handleVideoPosterFun(videos) {
2.   // 创建一个 Promise 数组来跟踪每个视频的处理状态
3.   const promises = Array.from(videos).map((video, index) => {
4.     return new Promise((resolve, reject) => {
5.       // 创建一个新的video元素
6.       const tempVideo = document.createElement('video');
7.       tempVideo.src = video.querySelector('source').src;
8.       tempVideo.crossOrigin = 'anonymous'; // 处理跨域问题
10.       // 等待视频元数据加载完成
11.       tempVideo.addEventListener('loadeddata', function () {
12.         // 确保视频能够播放
13.         tempVideo.currentTime = 0.1; // 确保当前时间稍微超出0秒
14.         tempVideo.addEventListener('seeked', function () {
15.           // 创建一个canvas元素
16.           const canvas = document.createElement('canvas');
17.           canvas.width = tempVideo.videoWidth;
18.           canvas.height = tempVideo.videoHeight;
20.           // 将视频的第一帧绘制到canvas上
21.           const ctx = canvas.getContext('2d');
22.           ctx.drawImage(tempVideo, 0, 0, canvas.width, canvas.height);
24.           // 将canvas内容转换为数据URL，并设置为poster属性
25.           const dataURL = canvas.toDataURL('image/png');
26.           video.setAttribute('poster', dataURL);
28.           resolve(); // 处理完成，解析Promise
29.         });
31.         // 触发seek事件
32.         tempVideo.currentTime = 0.1;
33.       });
35.       tempVideo.addEventListener('error', reject);
36.       tempVideo.load();
37.     });
38.   });
40.   // 返回一个Promise，等待所有视频处理完成
41.   return Promise.all(promises);
42. }

复制代码

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

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

复制代码

获取值

1. let a = await setVideoPosterFromFirstFrame(res.content)

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。