在前端开发中，使用 HTML5 的 <video> 元素播放视频，通常我们会使用一个固定的视频 URL 作为 src 属性的值。然而，有时我们需要处理动态生成的视频数据，或者需要对视频数据进行一些客户端处理后再播放，这时 Blob 就派上用场了。
Blob（Binary Large Object）代表不可变的原始二进制数据，可以理解为一个包含二进制数据的小文件。我们可以使用 Blob 来存储视频数据，然后通过 URL.createObjectURL() 方法创建一个临时的 URL，并将这个 URL 赋值给 <video> 元素的 src 属性，从而实现视频播放。
以下是使用 Blob 在 HTML5 <video> 元素中播放视频的关键点：
- 创建 Blob 对象： 可以使用
Blob()构造函数创建一个 Blob 对象。通常情况下，视频数据会以ArrayBuffer或TypedArray的形式存在，我们可以将这些数据作为参数传递给Blob()构造函数。例如：
const videoData = new Uint8Array([/* 视频数据 */]);
const blob = new Blob([videoData], { type: 'video/mp4' }); // 指定 MIME 类型
- 创建 URL： 使用
URL.createObjectURL(blob)方法创建一个指向 Blob 数据的临时 URL。
const videoUrl = URL.createObjectURL(blob);
- 设置
<video>元素的src属性： 将生成的 URL 赋值给<video>元素的src属性。
const videoElement = document.getElementById('myVideo');
videoElement.src = videoUrl;
- 释放 URL： 当视频播放完毕或不再需要时，应该使用
URL.revokeObjectURL(videoUrl)方法释放掉创建的 URL，以避免内存泄漏。 这很重要，尤其是在处理大量视频数据时。
videoElement.onended = () => {
URL.revokeObjectURL(videoUrl);
};
使用场景：
- 动态生成视频： 例如，通过 Canvas 绘制动画，然后将每一帧转换为图像数据，最终合并成视频 Blob 进行播放。
- 客户端视频处理： 例如，在客户端对视频进行裁剪、添加水印等操作后，将处理后的视频数据转换为 Blob 播放。
- WebRTC 视频流： WebRTC 获取的媒体流可以通过
MediaRecorderAPI 录制成 Blob，然后进行播放或上传。 - 文件上传预览： 在用户上传视频文件之前，可以使用 FileReader API 将文件读取为 Blob，然后在客户端进行预览。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Video Blob Example</title>
</head>
<body>
<video id="myVideo" controls></video>
<script>
fetch('video.mp4') // 假设 video.mp4 是你的视频文件
.then(response => response.arrayBuffer())
.then(data => {
const blob = new Blob([data], { type: 'video/mp4' });
const url = URL.createObjectURL(blob);
const video = document.getElementById('myVideo');
video.src = url;
video.onended = () => URL.revokeObjectURL(url);
});
</script>
</body>
</html>
总结：
使用 Blob 播放视频为前端开发者提供了更大的灵活性，尤其是在处理动态视频数据和客户端视频处理方面。记住要及时释放创建的 URL 对象，以避免内存泄漏。
希望以上解释能够帮助你理解 HTML5 video Blob 的使用。
标签：视频,const,URL,blob,video,Blob,HTML5 From： https://www.cnblogs.com/ai888/p/18583279