admin 管理员组文章数量: 887017
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 = document.createElement("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 = document.createElement('canvas');var ctx = canvas.getContext('2d');// video注册canplay自动播放事件video.addEventListener('canplay', function() {// 创建画布的宽高属性节点，就是图片的大小，单位PXvar anw = document.createAttribute("width");anw.nodeValue = 500;var anh = document.createAttribute("height");anh.nodeValue = 300;canvas.setAttributeNode(anw);canvas.setAttributeNode(anh);// 画布渲染ctx.drawImage(video, 0, 0, 500, 300);// 生成图片var base64 = canvas.toDataURL('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)})}获取到视频的封面图就已经完成一大半了，注意需要跨域的视频可能会污染画布不生效，有更好的方法可以留言
本文标签： Vue uniapp js获取视频第一帧图片作为封面图
版权声明：本文标题：vue,uniapp,js获取视频第一帧图片作为封面图 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1730876788h1399350.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论