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);
  });
}
相关推荐
小曲曲35 分钟前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
Theodore_10223 小时前
4 设计模式原则之接口隔离原则
java·开发语言·设计模式·java-ee·接口隔离原则·javaee
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
----云烟----5 小时前
QT中QString类的各种使用
开发语言·qt
lsx2024065 小时前
SQL SELECT 语句:基础与进阶应用
开发语言