该问题最关键的一步是将后端传回来的流,转化成视频,并播放。
1、从服务器请求数据流到前端
2、新建一个临时文件,将数据流写入这个文件里面,并自定义路径+命名。
const fs = wx.getFileSystemManager(); //获取全局唯一的文件管理器
fs.writeFile({ })
3、可以将该文件保存到相册(这一步也可以不保存)
wx.saveVideoToPhotosAlbum({ // 新开页面打开文档
filePath: wx.env.USER_DATA_PATH + "/myvideo.mp4", //拿上面存入的文件路径
success: function (res) {
}
})
4、直接用video播放这个临时文件路径即可。文章来源:https://www.toymoban.com/news/detail-740908.html
直接上代码:文章来源地址https://www.toymoban.com/news/detail-740908.html
<video :src="src"></video>
uni.request({
url: 服务器地址,
method: 'GET',
responseType: 'arraybuffer',
header: {
Authorization: 'Bearer ' + user.DEFAULT_USER.access_token
},
success: res => {
const fs = wx.getFileSystemManager();
//获取全局唯一的文件管理器
fs.writeFile({ // 写文件
filePath: wx.env.USER_DATA_PATH + "/myvideo.mp4",
// 指定临时文件存入的路径,后面字符串自定义
data: res.data,
encoding: "binary", //二进制流文件必须是 binary
success(res) {
console.log('写入成功', res)
this.src = wx.env.USER_DATA_PATH + "/myvideo.mp4"
})
}
});
},
});
到了这里,关于uniapp 将流转化为视频并播放 微信小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!