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

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

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

<code>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)