小程序base64视频播放

·  阅读 22

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第8天,点击查看活动详情

小程序不能直接播放base64的视频文件,需要做一些其他操作:

video不支持base64文件

video的src支持视频资源地址,云文件ID。不支持base64 image.png

实现播放base64

实现思路如下:

1.先转成本地文件

const fs = wx.getFileSystemManager();

//将base64图片写入

fs.writeFile({

filePath: wx.env.USER_DATA_PATH + '/video.mp4',

data: base64,

encoding: 'base64',

success: (res) => {

//写入成功了的话,新的图片路径就能用了

console.log('getVideoSrc',wx.env.USER_DATA_PATH + '/video.mp4')

}

})
复制代码
wx.getFileSystemManager

文件管理器

FileSystemManager.writeFile(Object object) 写文件
fs.writeFile({

    filePath: wx.env.USER_DATA_PATH + '/video.mp4', // 要写入的文件路径 (本地路径)

data: base64,    // 文件base64

encoding: 'base64',    //    指定写入文件的字符编码 base64

success: (res) => {

// 写入成功可以通过设置的filePath读取到

}

})
复制代码
FileSystemManager.writeFileSync(string filePath, string|ArrayBuffer data, string encoding) 同步写文件
fs.writeFileSync({

    filePath: wx.env.USER_DATA_PATH + '/video.mp4', // 要写入的文件路径 (本地路径)

data: base64,    // 文件base64

encoding: 'base64',    //    指定写入文件的字符编码 base64

success: (res) => {

// 写入成功可以通过设置的filePath读取到

}

})
复制代码

image.png

image.png

2. 再读文件播放

fs.writeFile / fs.writeFileSync 设置的filePath即为转换后的本地文件路径,可设置在video的src直接播放

删除本地缓存文件

filePath为临时路径,建议转换后删除本地缓存


// 删除本地缓存文件

wx.getFileSystemManager()

fs.readdir(不知道的话可以遍历下本地文件)

fs.unlink (删除对应本地临时文件)
复制代码

wx.getFileSystemManager()

创建文件管理器

FileSystemManager.readdir(Object object)

读取目录内文件列表

image.png

FileSystemManager.readdirSync(string dirPath)

读取目录内文件列表的同步版本

image.png

FileSystemManager.unlink(Object object)

删除文件

image.png

FileSystemManager.unlinkSync(string filePath)

删除文件的同步版本

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改