react使用video标签播放base64文件流
时间: 2023-08-19 20:24:56 浏览: 71
好的,您可以通过以下步骤在React中使用video标签播放base64文件流:
1. 将base64文件流转换为Blob对象。
```javascript
const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
const byteCharacters = atob(b64Data);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, { type: contentType });
return blob;
};
```
2. 将Blob对象转换为Object URL。
```javascript
const blob = b64toBlob(base64Data, 'video/mp4');
const url = URL.createObjectURL(blob);
```
3. 在video标签中使用Object URL。
```jsx
<video controls>
<source src={url} type="video/mp4" />
</video>
```
完整示例代码:
```jsx
import React from 'react';
const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
const byteCharacters = atob(b64Data);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, { type: contentType });
return blob;
};
const VideoPlayer = ({ base64Data }) => {
const blob = b64toBlob(base64Data, 'video/mp4');
const url = URL.createObjectURL(blob);
return (
<video controls>
<source src={url} type="video/mp4" />
</video>
);
};
export default VideoPlayer;
```
希望能够帮助到您!