如何提取网页 Blob 的视频？步骤如下：获取 Blob创建 URL.createObjectURL()创建视频元素添加视频到 DOM播放视频

如何提取网页 Blob 的视频

网页 Blob 是包含网页数据的二进制大对象，其中可能包含视频文件。以下是提取 Blob 中视频的步骤：

步骤 1：获取 Blob

首先，需要获取包含视频文件的 Blob。可以通过以下方法获取 Blob：

• 使用 fetch() API 发出 HTTP 请求。
• 使用 FileReader 读取本地文件。
• 从另一个 JavaScript 对象接收 Blob（例如，从 XMLHttpRequest）。

步骤 2：创建 URL.createObjectURL()

获取 Blob 后，使用 URL.createObjectURL() 创建一个临时 URL，用于引用 Blob 中的数据。此 URL 将用于创建视频元素。

示例：

const blobURL = URL.createObjectURL(blob);

步骤 3：创建视频元素

使用 createObjectURL() 创建的 URL 创建一个视频元素，用于播放视频。

示例：

const video = document.createElement('video');
video.src = blobURL;

步骤 4：添加视频到 DOM

将创建的视频元素添加到 DOM 中，以便在页面上显示。

示例：

document.body.appendChild(video);

步骤 5：播放视频

调用 play() 方法播放视频。

示例：

video.play();

注意：

• 创建的 createObjectURL() URL 是临时 URL，在页面关闭或 Blob 被销毁时将失效。
• Blob 中的视频文件必须是受支持的视频格式，例如 MP4、WebM 或 Ogg。