uniapp中后端返回流 前端分片播放视频 详细代码实现
时间: 2024-09-25 11:14:32 浏览: 8
在uniApp中,处理后端返回的流数据并分片播放视频通常涉及到使用FileReader API来读取数据流,并结合Video组件或者HTML5 Video标签。这里是一个简单的示例代码:
```javascript
// 假设你在uniService上有一个接口getVideoStream,它返回一个Blob对象
async function getVideoStream() {
const response = await uni.request({
url: 'your-video-api-url', // 替换为实际的后端API地址
method: 'GET',
responseType: 'stream'
});
// 创建一个FileReader实例
const reader = new FileReader();
// 设置FileReader的readAsDataURL方法,用于读取数据流为data URL
reader.onload = async (e) => {
const dataUrl = e.target.result;
// 将data URL拆分为多个小块,例如每5MB分一块
const chunkSize = 5 * 1024 * 1024; // 5MB
const chunks = splitDataUrlIntoChunks(dataUrl, chunkSize);
// 分别创建video元素并设置src属性为每个chunk
for (let i = 0; i < chunks.length; i++) {
const videoElement = document.createElement('video');
videoElement.src = `data:${chunks[i]}`;
videoElement.play();
// 添加到页面或者其他容器中
document.body.appendChild(videoElement);
}
};
// 开始读取
reader.readAsDataURL(response.data);
}
function splitDataUrlIntoChunks(url, size) {
const base64Reg = /^data:image\/\w+;base64,/;
const typeEndIndex = url.indexOf(',');
if (typeEndIndex === -1) throw new Error("Invalid data URL");
let start = 0;
const chunks = [];
while (start < typeEndIndex + size) {
const end = Math.min(start + size, typeEndIndex);
chunks.push(url.slice(base64Reg.lastIndex, end));
start = end;
}
return chunks;
}
```