该问题最关键的一步是将后端传回来的流,转化成视频,并播放。
1、从服务器请求数据流到前端
2、新建一个临时文件,将数据流写入这个文件里面,并自定义路径+命名。
- const fs = wx.getFileSystemManager(); //获取全局唯一的文件管理器
- fs.writeFile({ })
-
3、可以将该文件保存到相册(这一步也可以不保存)
- wx.saveVideoToPhotosAlbum({ // 新开页面打开文档
- filePath: wx.env.USER_DATA_PATH + "/myvideo.mp4", //拿上面存入的文件路径
- success: function (res) {
-
- }
- })
4、直接用video播放这个临时文件路径即可。
直接上代码:
- <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"
- })
- }
- });
- },
- });