Why can't a blob url be shared by two video elements?

Question

I am working on a Firefox extension, where I want to be able to load a video element I create and insert into the page, and load it with the same content as the main video which plays on an Odysee page. The src url for the video in the Odysee page is a Blob, something like: blob:https://odysee.com/0f30d1d7-af80-9243-9ea1-52c5492ead50

I have attempted this by simply using:

myVideoPlayer.src = odyseeVideoPlayer.src;

but it doesn't work, getting a "No video with supported format and MIME type found" error on my player.

From the research I have done on using blob urls, I have understood that a Blob is actually just an object containing the raw data for the video (in this case,) which is stored within the browser's memory. (I am a bit confused regarding the fact that the blob url contains an http protocol with a domain, but from what I have read, this doesn't change the fact that the blob is stored locally.)

I am not understanding why two video elements using the same src url won't both play that file, as it seems that the url is pointing to the same Blob in memory. I have searched and read many SO and SE questions regarding using blobs for video element src, but none have answered this question.

_"I am working on a Firefox extension"_ Never tried that so you tell me: In your code, is it possible for you to read a text file's contents into a variable (_eg:_ of type **String** or type **Buffer Array**)? — VC.One, Aug 19 '21 at 08:05
@VC.One FF extensions are sandboxed, so you are limited to what you can an cannot access on the page (see more detailed explanation in my comments under your answer.) But to give a complete answer, _technically_, it should be possible to use Native Messaging (a FF extension API) to download the script using an external app and read it into the extension's content script, but this is very clumsy and requires the user to install additional software, which many users are not going to do, so it is something I avoid. — KevinHJ, Aug 20 '21 at 11:28
...and really I am perplexed as to why I cannot do something as simple as myVideoPlayer.src = odyseeVideoPlayer.src. This works if src is a contentUrl (eg points to a video stream,) but why does it not work if src is a blob? Intuitively it seems there shouldn't be a difference. — KevinHJ, Aug 20 '21 at 11:30

score 2 · Answer 1 · edited Aug 18 '21 at 16:10

"I am a bit confused regarding the fact that the blob url contains an HTTP protocol with a domain, but from research, this doesn't change the fact that the blob is stored locally"

Regarding the above problem...

I take a look into this video which contains a video src as blob url.

When you take a look into the dev-tools network panel, you will see, that the response for the blob url is not binary data, instead it is javascript.

This is a self-executing js function and it look like, that is used to setup a hls video stream.

When you hit the play button, you can see also following request:

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

with following (example) payload:

{
    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"
}

Which also indicates, that the video is a hls stream.

You can see the same behavior with videojs(a js video player) and hls.

An example page where the code is not minified.

Thank you. It is not clear to me in your answer why with 2 different video players on the same page cannot both play the same content if their src attributes are the same. One will play it, but the other will not. — KevinHJ, Aug 17 '21 at 12:34
Looking over your answer again, I am guessing you are addressing my comment, "I am a bit confused regarding the fact that the blob url contains an http protocol with a domain" — KevinHJ, Aug 17 '21 at 12:40

score 1 · Answer 2 · answered Aug 19 '21 at 09:12

...The src url for the video in the Odysee page is a Blob, something like:
blob:https://odysee.com/0f30d1d7-af80-9243-9ea1-52c5492ead50

I have attempted this by simply using:
myVideoPlayer.src = odyseeVideoPlayer.src;
but it doesn't work, getting a "No video with supported format and MIME type found" error on my player.

The only working video stream link I found is on the page's source code itself (eg: not as blob object). The URL is located at "contentUrl" section. The solution is to read that information and then use for the .src of a video element.

For example: https://odysee.com/@MovieGasm:d/the-vault-official-trailer-2-(2021):d

You can see...

"contentUrl": "https://odysee.com/$/stream/the-vault-official-trailer-2-(2021)/df2442ea839b5d0b98728a663a255121c92cd228

So the code of using that contentURL in a video element "src"...

//# using same url as "odyseeVideoPlayer.src;"...
myVideoPlayer.src = "https://odysee.com/$/stream/the-vault-official-trailer-2-(2021)/df2442ea839b5d0b98728a663a255121c92cd228";

PS:
As you can see in source-code they put the contentURL inside a <script type="application/ld+json"> Unfortunately it does not have an element id so you cannot read it by using this method or similar Answer on S.O.

Solution:
If you can find a way to access that data block, then use it or else you'll have to read page URL into some String variable and use String functions to extract required text.

Useful information, however this still does not answer my question: "am not understanding why two video elements using the same src url won't both play that file, as it seems that the url is pointing to the same Blob in memory." If I could use this solution that would be well, but in FF extensions, content scripts are not able to access the page's JS, on the DOM elements and their properties and attributes. So AFAICT, there isn't a way for me to access contentUrl. — KevinHJ, Aug 20 '21 at 10:51
I can actually get a reference to the script elements in the content script, but can do little more than that, as I am blocked from even reading textContent or innerHTML of the script element. I understand that it is important in extensions to sandbox the JS for security reasons. So while your answer is useful say from the browser's Developer Tools, I am unable to implement it using a browser extension. Thus the whole point of my question being how to load my player using the blob that the original video player, as all I have access to is video.src property. — KevinHJ, Aug 20 '21 at 11:08
In my first comment: "but in FF extensions, content scripts are not able to access the page's JS, on the DOM elements and their properties and attributes." should be "but in FF extensions, content scripts are not able to access the page's JS, __only__ the DOM elements and their properties and attributes." — KevinHJ, Aug 20 '21 at 11:15

Why can't a blob url be shared by two video elements?

2 Answers2