uni-app从后端返回的mp4链接视频截取一帧为封面

一、需求：

后端返回包含视频链接的数组对象，格式如下：

[{url: 'xxxxx.mp4',},{url: 'xxxxx.mp4',},{url: 'xxxxx.mp4',},
]

从上面的mp4视频中截取一帧设置为封面，如下图，下面的封面图从视频中截取而来。

二、代码实现：

<script>export default {onLoad() this.getViedoList();},data() {return{videoLists:[], // 获取到的视频列表数组posterList: [] ,// 视频封面图数组}},methods: {getViedoList(){this.$uniReq({url:"doc/api/doc's/@freevideo",method:"GET",}).then((re)=>this.videoLists = rethis.createPoster();}).catch((err)=>{console.log(err);})}createPoster() { // 截取封面 封装函数var videoCanList = []this.videoLists.forEach((item,index) => {var promise = new Promise((reslove, reject) => {// 在缓存中创建video标签var video = document.createElement("VIDEO")// 通过setAttribute给video dom元素添加自动播放的属性，因为视频播放才能获取封面图video.currentTime = 1; // 截取视频的第1秒video.setAttribute('crossOrigin', 'anonymous');video.setAttribute('autoplay', 'autoplay')// 再添加一个静音的属性，否则自动播放会有声音video.setAttribute('muted', 'muted')// 上面我们只是创建了video标签，视频播放需要内部的source的标签，scr为播放源video.innerHTML = '<source src=' + item.url + ' 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()reslove(base64)  // promise函数成功的回调}, false)})videoCanList.push(promise)})Promise.all(videoCanList).then(res => {this.posterList = res})}}}
</script>

按照上面的代码，其中posterList就是对应的每一个视频的封面base64数组，一切看起来都挺好，在H5正常运行，但是在APP端使用，明显是不可以的，因为在app端，document为undefined，那么怎么弄呢，查阅了资料，发现使用renderjs即可以识别。

<view class='healthPromotion' :videoLists="videoLists" :change:videoLists="renderScript.createPoster"></view><script>export default {onLoad() this.getViedoList();},data() {return{videoLists:[], // 获取到的视频列表数组posterList: [] ,// 视频封面图数组}},methods: {getViedoList(){this.$uniReq({url:"doc/api/doc's/@freevideo",method:"GET",}).then((re)=>this.videoLists = re}).catch((err)=>{console.log(err);})},reciveMessage(val) {this.posterList = val}}}
</script><script module="renderScript" lang="renderjs">export default {methods: {createPoster(val) {var videoCanList = [],curDateList = []val.forEach((item,index) => {var promise = new Promise((reslove, reject) => {// 在缓存中创建video标签var video = document.createElement("VIDEO")// 通过setAttribute给video dom元素添加自动播放的属性，因为视频播放才能获取封面图video.currentTime = 5video.setAttribute('crossOrigin', 'anonymous');video.setAttribute('autoplay', 'autoplay')// 再添加一个静音的属性，否则自动播放会有声音video.setAttribute('muted', 'muted')// 上面我们只是创建了video标签，视频播放需要内部的source的标签，scr为播放源video.innerHTML = '<source src=' + item.url + ' 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()curDateList.unshift({ // 这里是我自己的数据处理模块type: 'video',videoUrl: item.url,img: base64})reslove(base64)  // promise函数成功的回调}, false)})videoCanList.push(promise)})Promise.all(videoCanList).then(res => {this.$ownerInstance.callMethod('reciveMessage', res)})},}}
</script>

1）当 videoLists变化时，通过 :change:videoLists="renderScript.createPoster"这一段代码， renderjs 中的createPoster被调用
2）renderjs给script传递数据 this.$ownerInstance.callMethod(‘reciveMessage’, res)，调用reciveMessage代码，给posterList 赋值

通过上面的方法完成renderjs与常规script的通信，这样就达到了开篇的需求图的封面列表，H5，APP端都可以生成封面图，亲测有效

uni-app从后端返回的mp4链接视频截取一帧为封面相关推荐

【Django】自定义存储后端返回完整图片的URL链接
我们在Django存储图片的时候,并不是直接存储图片,而是存储图片的唯一标识,再通过标识去获取图片,例如下面的模型类有一个image字段,字段类型是ImageField class SKUImage( ...
打开支付宝 html,如何处理支付宝支付后端返回的html代码
支付宝支付输入金额后发送ajax请求,后端返回的是一段html代码,如下: value='{"body":"\u652f\u4ed8\u5b9d\u5145\u503c& ...
支付宝html页面乱码,如何处理支付宝支付后端返回的html代码
支付宝支付输入金额后发送ajax请求,后端返回的是一段html代码,如下: value='{"body":"\u652f\u4ed8\u5b9d\u5145\u503c& ...
uni app页面传值
传值是很常见的知识点,刚开始接触uni app总会踩到很多传值的坑,不是这里传不过去,就是那边接收不到,以下是我遇到过的一些传值方式,实在不行,咱就一个一个试,总有一个能"干起". ...
vue 后端返回二进制流文件，前端如何实现下载？
目录 1. axios 请求二进制流文件导出文件 1.1 后台返回的二进制流: 1.2 使用: 1.3 需要注意以下几点: 2. 关于 arraybuffer 和 blob 2.1 ArrayBuff ...
解决后端返回数据中的大数字问题(使用第三方包json-bigint ）
JavaScript 能够准确表示的整数范围在-2^53到2^53之间(不含两个端点),超过这个范围,无法精确表示这个值,这使得 JavaScript 不适合进行科学和金融方面的精确计算. Math. ...
java服务端开发安全_后端开发：APP与后端交互的安全性
声明此文原创,未经允许,禁止转载,可以分享. 最近在做一个项目,是一个APP的后端开发.我需要完成后端框架的建立.数据库设计.后端代码的编写.在这里讲一下APP与后端交互的安全性. 没有AUTH的验 ...
微信小程序获取用户运动步数后端返回-41003
最近在做一个运动步数兑换的小程序,记录下自己遇到的一些问题:1.授权流程(需要获取用户信息的授权和获取运动步数的授权)2.在获取运动步数时后端一直返回-41003 一.授权流程由于微信的一些授权接口 ...
迅雷插件导致js获取后端返回结果报错问题
最近在调试公司一个项目,其中使用了js,在登录该系统时,页面不能正常跳转.但是我使用别的浏览器(调试使用的是谷歌浏览器)能够正常跳转.这就很奇怪,使用页面调试工具,获取到后端的返回结果如下图: < ...

uni-app从后端返回的mp4链接视频截取一帧为封面

一、需求：

二、代码实现：

uni-app从后端返回的mp4链接视频截取一帧为封面相关推荐

最新文章

热门文章