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);
  });
}
相关推荐
新中地GIS开发老师33 分钟前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang41 分钟前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。41 分钟前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
李白的故乡41 分钟前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_1 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含1 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
Lucis__1 小时前
再探类&对象——C++入门进阶
开发语言·c++
007php0071 小时前
某大厂跳动面试:计算机网络相关问题解析与总结
java·开发语言·学习·计算机网络·mysql·面试·职场和发展
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue