JS获取页面中video标签视频的封面和时长

从HTML中提取Video信息

javascript 复制代码
/**
 *  从html字符串中提取video标签
 *  入参: {String} htmlString
 *  出参:{Array} 数组
 */
function extractVideosFromHTML(htmlString) {
  const dom = new DOMParser().parseFromString(htmlString, 'text/html');

  const videos = Array.from(dom.querySelectorAll('video'));
  
  return videos.map(videoElement => videoElement.getAttribute('src'));
}

获取视频的第一帧作为视频封面

javascript 复制代码
/**
 * 获取视频的第一帧
 * 入参:视频文件的url地址
 * 返回第一帧图片 
 */
function getFirstVideoFrame(videoUrl) {
  return new Promise((resolve, reject) => {
    const videoElement = document.createElement('video');
    videoElement.crossOrigin = 'anonymous';
    videoElement.muted = true; // 可选,静音视频防止音频自动播放问题
    videoElement.style.display = 'none'; // 隐藏视频元素
    document.body.appendChild(videoElement); // 添加到DOM中以便加载

    videoElement.addEventListener('loadedmetadata', () => {
      // 设置canvas大小与视频一致
      const canvas = document.createElement('canvas');
      canvas.width = videoElement.videoWidth;
      canvas.height = videoElement.videoHeight;
      const ctx = canvas.getContext('2d');

      videoElement.addEventListener('seeked', async () => {
        // 移动到视频开始位置并绘制第一帧
        ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
        // 转换canvas内容为Data URL
        const imageData = canvas.toDataURL('image/jpeg'); // 或'image/png'
        // 清理DOM
        document.body.removeChild(videoElement);
        resolve(imageData)
        });
      }, { once: true });

      // 快速跳转至视频开始处
      videoElement.currentTime = 0;
    });

    videoElement.onerror = (error) => {
      reject(error); // 如果加载视频出错,返回Promise的reject值
    };

    videoElement.src = videoUrl;
  });
}

获取视频的播放时长

javascript 复制代码
/**
 *  获取视频的时长
 *  入参:视频文件,file对象
 *  返回: 视频时长,单位为 秒
 */
function getVideoDuration(file) {
  return new Promise((resolve, reject) => {        
    const fileReader = new FileReader();
    fileReader.onload = (event) => {
      const blob = new Blob([event.target.result], {type: file.type});
      const video = document.createElement('video');
      video.src = URL.createObjectURL(blob);
      video.onloadedmetadata = () => {
        resolve(video.duration);
        URL.revokeObjectURL(video.src);
        video.remove();
      };
      video.onerror = (err) => {
 		URL.revokeObjectURL(video.src);
 		video.remove()
 		reject(err)
      }
    };
    fileReader.readAsArrayBuffer(file);
  });
}
相关推荐
旧味清欢|20 分钟前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
车载小杜1 小时前
基于指针的线程池
开发语言·c++
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
沐知全栈开发1 小时前
Servlet 点击计数器
开发语言
m0Java门徒1 小时前
Java 递归全解析:从原理到优化的实战指南
java·开发语言
桃子酱紫君2 小时前
华为配置篇-BGP实验
开发语言·华为·php
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
shaoing2 小时前
MySQL 错误 报错:Table ‘performance_schema.session_variables’ Doesn’t Exist
java·开发语言·数据库
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
The Future is mine3 小时前
Python计算经纬度两点之间距离
开发语言·python