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

user_2179138 0
Viewed 336

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.

html5-video blob
2 Answers

"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.

user_63500160

...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.

user_20577090
Related