记录uni-app项目中遇到的一些问题。1、选择一个视频上传，播放展示：全屏播放：1.在非H5端过高在AndroidAPP中，由于是原生组件，所以它的level是高于普通前端组件，覆盖其需求使用、，但介于的开始和结束标签之间。可以使用这些标签实现自定义播放按钮、删除按钮。但是在显示选中的视频时，会弹出一个选择框（比如picker），这些标签不能用来实现比更高的级别。实现方法：显示时使用view，播放时使用全屏播放。html部分js部分mounted(){//#ifdefAPP-PLUS||H5this.videoContext=uni.createVideoContext('fullScreenVideo')//#endif//#ifdefMP-WEIXINthis.videoContext=uni.createVideoContext('fullScreenVideo',this)//#endif},beforeDestroy(){clearTimeout(this.timer)this.timer=null},methods:{toPlayVideo(url){this.videoUrl=url//.split('?')[0]this.timer=setTimeout(()=>{//#ifdefAPP-PLUS||H5this.videoContext=uni.createVideoContext('fullScreenVideo')//#endif//#ifdefMP-WEIXINthis.videoContext=uni.createVideoContext('fullScreenVideo',this)//#endif//微信开发工具不行，需要测试this.videoContext.requestFullScreen({direction:0})this.videoContext.play()},100)},fullscreenchange(e){if(!e.detail.fullScreen){this.videoContext.stop()this.videoUrl=false}},onVideoError(err){console.log('播放视频失败：',err)},deleteFile(file,index){uni.showModal({title:'Prompt',content:'Areyousureyouwanttodeletethisitem?',success:res=>{if(res.confirm){this.$emit('delete-item',{file,索引})}}})},}2.获取视频封面并显示在视频视图中。要用一张图片作为视频的封面，可以使用视频的第一帧获取视频的封面，使用renderjs通过canvas实现。html部分js部分video-poster.jsconstmixinVideo={方法：{getVideoPoster(url){returnnewPromise(function(resolve,reject){letvideo=document.createElement('video')video.setAttribute('crossOrigin','anonymous')//处理跨域，H5需要后台支持，request视频资源响应bid需要访问-Control-Allow-Origin视频o.setAttribute('src',url)video.setAttribute('width',400)video.setAttribute('height',400)video.setAttribute('preload','auto')//uni.chooseVideo选择视频，使用手机拍摄的视频时，地址为相对地址，如_doc/uniapp_temp_1650594368317/camera/1650594390147.mp4//可以播放，但是loadeddata还没有执行，会触发error事件，andthevideotoloadfailed//应该先转换为本地地址video.addEventListener('loadeddata',function(){console.log('视频第一帧加载完毕')letcanvas=document.createElement('canvas')letwidth=video.width//画布的大小和图片一样letheight=video.heightcanvas.width=widthcanvas.height=heightcanvas.getContext('2d').drawImage(video,0,0,width,height)//绘制画布constdataURL=canvas.toDataURL('image/jpeg')//转换为base64console.log('getVideoPoster-dataURL',dataURL.slice(0,16))resolve(dataURL)})video.addEventListener('error',err=>{console.log('Videoloadingfailed',err)reject(err)})})},asyncgetAllPoster(newVal,oldVal,owner,instance){console.log('executegetAllPoster')//在renderjs中，监控的属性视频是一个数组，存放选中的视频信息//删除，或者updateVideos更新后（长度不变）if(newVal.length<=oldVal.length)return//有默认值或者添加constnewList=[]for(constitemofnewVal){//获取视频封面不重复if(item.posterUrl!==undefined){newList.push({...item})continue}try{leturl=item.url//拍摄视频：_doc/uniapp_temp_1650594368317/camera/1650594390147.mp4//网络视频：https:////本地视频：file://if(!item.url.includes('file://')&&!item.url.includes('https://')){//将本地URL路径转换为平台的绝对路径//如果输入的url是“_doc/a.png”：//转换后的Android平台路径为“/storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/a.png”;//#ifdefAPP-VUEurl='file://'+plus.io.convertLocalFileSystemURL(item.url)//#endif}constdataUrl=awaitthis.getVideoPoster(url)newList.push({...item,posterUrl:dataUrl})}catch(err){newList.push({...item})}}this.$ownerInstance.callMethod('updateVideos',newList)}}}exportdefaultmixinVideo
uni-app项目中如何使用canvas获取视频封面相关文章
