时间戳

首页 > 解决方案 > 为什么两个视频元素不能共享一个 blob url？

html5-video - 为什么两个视频元素不能共享一个 blob url？

问题描述

我正在开发 Firefox 扩展程序，我希望能够加载我创建并插入页面的视频元素，并使用与在 Odysee 页面上播放的主视频相同的内容加载它。Odysee 页面中视频的 src url 是一个 Blob，类似于：blob:https://odysee.com/0f30d1d7-af80-9243-9ea1-52c5492ead50

我已经尝试通过简单地使用：

myVideoPlayer.src = odyseeVideoPlayer.src;

但它不起作用，在我的播放器上出现“没有找到支持格式和 MIME 类型的视频”错误。

从我对使用 blob url 所做的研究中，我了解到 Blob 实际上只是一个对象，其中包含存储在浏览器内存中的视频（在本例中）的原始数据。（我有点困惑，因为 blob url 包含一个带有域的 http 协议，但从我所读到的，这并没有改变 blob 存储在本地的事实。）

我不明白为什么使用相同 src url 的两个视频元素不会同时播放该文件，因为似乎 url 指向内存中的同一个 Blob。我已经搜索并阅读了许多关于将 blob 用于视频元素 src 的 SO 和 SE 问题，但没有人回答这个问题。

标签： html5-videoblob

解决方案

“对于 blob url 包含带有域的 HTTP 协议这一事实，我有点困惑，但从研究来看，这并没有改变 blob 存储在本地的事实”

对于上述问题...

我看了一下这个视频，其中包含一个视频 src 作为 blob url。

当您查看 dev-tools 网络面板时，您会看到对 blob url 的响应不是二进制数据，而是 javascript。

这是一个自动执行的 js 函数，看起来像，用于设置hls 视频流。

当您点击播放按钮时，您还可以看到以下请求：

https://watchman.na-backend.odysee.com/reports/playback

使用以下（示例）有效负载：

{
    device: "web"
    duration: 866
    player: "eu-p1"
    position: 1000
    protocol: "hls"
    rebuf_count: 0
    rebuf_duration: 0
    rel_position: 0
    url: "@LittleApostate#5/trust-the-experts,-even-though-the#1"
    user_id: "213731445"
}

这也表明，视频是 hls 流。

您可以使用videojs（一个 js 视频播放器）和 hls 看到相同的行为。

代码未缩小的示例页面。

推荐阅读