vue项目中利用后端接口返回的视频地址获取第一帧作为数据封面展示

1:利用转成base64进行获取封面

javascript 复制代码
//封装函数 
 getVideoBase64(url) {
            return new Promise(function (resolve, reject) {
                let dataURL = "";
                let video = document.createElement("video");
                video.setAttribute("crossOrigin", "anonymous"); //处理跨域
                video.setAttribute("src", url);
                video.setAttribute("width", 400);
                video.setAttribute("height", 240);
                video.setAttribute("preload", "auto");
                video.setAttribute('crossOrigin', 'anonymous');
                video.addEventListener("loadeddata", function () {
                    let canvas = document.createElement("canvas"),
                        width = video.width, //canvas的尺寸和图片一样
                        height = video.height;
                    canvas.width = width;
                    canvas.height = height;
                    canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
                    dataURL = canvas.toDataURL("image/jpeg"); //转换为base64
                    resolve(dataURL);
                });
            })
        },




//使用该函数
       if (res.data.data.clipList) {  //数据
          setTimeout(() => {
            //item.videoUrl  视频地址    item.coverUrl  图片地址
            res.data.data.clipList.forEach((item, index) => {
              this.getVideoBase64(item.videoUrl).then((data) => {
                item.coverUrl = data
              });
            });
          }, 1000);
        }

2:利用canvas来获取视频第一帧作为封面

javascript 复制代码
    //转换第一帧
    cutPicture(item) {
      let video = document.createElement("video");
      video.style = 'position:fixed; top: 9999px;left:9999px;z-index:-9999'
      video.preload = 'metadata'
      video.currentTime = 1   //截取的视频第一秒作为图片
      video.src = item.videoUrl
      video.setAttribute('crossOrigin', 'anonymous');
      video.width = 113
      video.height = 75
      document.body.appendChild(video)
      video.onloadeddata = function () {
        let canvas = document.createElement('canvas')
        canvas.width = 113
        canvas.height = 75
        canvas.getContext('2d').drawImage(video, 0, 0, video.clientWidth, video.clientHeight)
        var oGrayImg = canvas.toDataURL('image/jpeg');
        item.videoUrl = oGrayImg
        this.remove()
      }
      return item
    },
相关推荐
MThinker几秒前
02-Media-8-uvc_with_csc.py 使用硬件解码的USB摄像头(UVC)捕获视频并显示的程序
音视频·智能硬件·micropython·canmv·k230
向阳花开_miemie8 分钟前
Android音频学习(十八)——混音流程
学习·音视频
小桥风满袖31 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心32 分钟前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~35 分钟前
CSS3的新特性
前端·javascript·css3
IT_陈寒41 分钟前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询1 小时前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang1 小时前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼1 小时前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试