Embedding a video that is stored on a pod

When I upload a video to my pod and try to embed it with the standard html <video> I get an error message like:


or a player that neither has the video metadata nor plays anything (Chrome & Safari)

you can try it out by logging in with your pod when visiting: Projektor Web App

I am reading the video as an ArrayBuffer from an <input type=file> and uploading it to the pod via:

overwriteFile(
  podURL,
  new Blob([data as string], { type: file.type }),
  { contentType: file.type, fetch: session.fetch }
)

and then im embedding it like this:

<video
  controls
  crossOrigin="use-credentials"
  preload="metadata"
>
  <source src={post.link} type={mime.lookup(post.link)} />
  Sorry, your browser doesn't support embedded videos.
</video>

It looks like the request to get the video is asking for a Content-Type matching video/*. Can you confirm that when uploading, file.type matches this expectation ?

Yep can confirm that for a .mp4 it sends the correct video/mp4 type during creation and when embedding

Yes, this is entirely expected, as the <source> is request / loaded without sending any authentication / authorization related headers. It’s the same issue as with <img>.

We do have a workaround, which is to fetch the entire video as a Blob, store that entirely in the JavaScript VMs memory, then convert it to a URL.createObjectUrl, but it is less than ideal: solid-ui-react/index.tsx at v2.8.0 · inrupt/solid-ui-react · GitHub (I don’t recommend using that)

1 Like

I also had a quick look at @NoelDeMartin’s Media Kraken, which I thought allowed playback of movies, in case he had a fancy way to do this, but unfortunately he does not, because he doesn’t do playback from what I can tell.

Yeah, Media Kraken does not play video. However, in the new app I’m working on, I allow uploading images, and I had to resort to using the URL.createObjectUrl trick. I don’t know of a better way :confused: I’m also doing it because PODs don’t return caching headers, so images would be downloaded on every refresh otherwise. But I’m not sure if it’s common to cache videos in the same way. I guess it depends on the use-case.

Just chiming in that Penny is doing it the same way, and I don’t think a better way (i.e. streaming without having to wait for the full video to be downloaded) is possible at this time…

Would it be possible to intercept the unauthenticated request from the <video> with a service worker and then add the headers? It seems possible for Google Drive audios, according to this SO answer: html - Send custom HTTP request header with HTML5 audio tag - Stack Overflow

EDIT: I just saw that a comment said “How does this work with the audio tag? It doesn’t seem to be firing a fetch event.”, so maybe the answer is not accurate :confused:

Thank you for these insights, I think I’ve found my solution using xhr request to fetch the blob and display some progress to the viewer in the meantime. That makes projektor play videos now Yeeey :smiley: