前端小知识(四)：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)
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]