vue,uniapp,js获取视频第一帧图片作为封面图

vue,uniapp,js获取视频第一帧图片作为封面图

需求：后端返回http视频线上地址数组，将视频的第一帧作为封面图展示，通过列表渲染页面，如下图

1、获取视频列表，这里需要Promise函数处理异步问题，跟据具体业务逻辑来处理

// 获取设备的视频列表function getVideoList() {return new Promise((resolve, reject) => {mui.ajax('你的接口地址', {data: {  // 你接口的参数code: pu_id,date: '2021-08-26'},dataType: 'json',type: 'get',success: function(data) {videoList = data.dataresolve(videoList)}})})}

2.通过在script中创建video,canvas,标签进行对视频的处理

// 视频截图封面图function getVideoCanvas() {var videoCanList = [] // 因为后端返回的视频数组，这里先定义一个空数组videoList.forEach((item, index) => {  // for循环获取到的视频数组// 因为是循环处理，这里定义一个promise函数var promise = new Promise((reslove, reject) => {// 在缓存中创建video标签var video = ateElement("VIDEO")// 通过setAttribute给video dom元素添加自动播放的属性，因为视频播放才        能获取封面图video.setAttribute('autoplay', 'autoplay')// 再添加一个静音的属性，否则自动播放会有声音video.setAttribute('muted', 'muted')// 上面我们只是创建了video标签，视频播放需要内部的source的标签，scr为 播放源video.innerHTML = '<source src=' + item + ' type="audio/mp4">'// 再创建canvas画布标签var canvas = ateElement('canvas');var ctx = Context('2d');// video注册canplay自动播放事件video.addEventListener('canplay', function() {// 创建画布的宽高属性节点，就是图片的大小，单位PXvar anw = ateAttribute("width");deValue = 500;var anh = ateAttribute("height");deValue = 300;canvas.setAttributeNode(anw);canvas.setAttributeNode(anh);// 画布渲染ctx.drawImage(video, 0, 0, 500, 300);// 生成图片var base64 = DataURL('image/png') // 这就是封面图片的base64编码// 视频结束播放的事件video.pause()console.log(base64) // 可打印看是不是base64编码图片curDateList.unshift({ // 这里是我自己的数据处理模块type: 'video',videoUrl: item,img: base64})reslove(base64)  // promise函数成功的回调}, false)})videoCanList.push(promise) // 这里将每一次promise函数成功回调的结果push进一开始定义的空数组})// 通过Promise.all方法等待上面的循环结束这里再执行业务逻辑Promise.all(videoCanList).then(res=>{console.log(videoCanList) // 这里就是每一张视频的封面图console.log(curDateList)})}

获取到视频的封面图就已经完成一大半了，注意需要跨域的视频可能会污染画布不生效，有更好的方法可以留言