Does browser cache blob src? - javascript

I'm using videoJS to play my videos which are hosted on Brightcove. I just give it a videoId and it automatically fetches the src which I guess gets translated into a blob src like src="blob:https://crap.crap".
However, it seems like when I remove the <video> component then put it back, the video gets refetched from the source and I'm not sure if the browser cached it or not. Does anyone know if it's possible to manually cache a blob src?
edit: It is streamed via this protocol

Related

Get video direct url or file using blob:https://example

So I am working on a service to universally download videos, I search for the
<video src="https://example.com/image/example"></video>
tag and get the src url in order to download the video. The problem rises when there is a 'blob:' in front of the url. That link points to no video source and I have no knowledge on how to retrieve the video.
Anything could be helpful, Thanks!
Most of the time, when a video as its src pointing to a blobURI (blob://..), it is not a Blob that is at the other end of the URI, but a MediaSource.
You won't be able to retrieve the source of this data from your extension from this blobURI alone.
You'd have to check where the ArrayBuffers that do populate this MediaSource are coming from, but this is a way too broad subject for here.

Streaming a video file from firebase storage using Javascript

I have worked with images, they seem to do well when you use the downloadURL() to embed them in html tags,but the video doesn't work.
I tried using the video and iframe tag in html but it doesn't work. From what I understand, is that incoming file is not a video but a general file, it downloads with ".mp4 extension. Please suggest what should I do. I am working on a small time project where users can upload videos and watch other user's video.
Use downloaded Url to play video in chat.
In this code, i have passed a video URI to which I want to get the downloadable URL and then set the source of the video element.
Note:- Remember to put the controls property to video tag.
this.storage.refFromURL(videoUri).getMetadata().then(function(metadata) {
console.log('metadata',metadata.downloadURLs[0]);
vidElement.src = metadata.downloadURLs[0];
});

Use local files with MediaSource

I am trying to build a local video player in nwjs (node-webkit). I was able to play the local files by adding their path as the video element's src attribute, but now I want to make use of MediaSource and ,probably necessary, URL.createObjectUrl().
The problem is I haven't found any documentation that allowed me to achieve this, during my tests I am unable to append a new source to MediaSource as the local file. I tried direct paths and XHR requests, the closest I have been was with the XHR request of the file but I cannot convert the xhr.response into a usable item for my purpose, such as a objecturl.
For some reason just changing the src attribute directly each time a new video is selected causes the memory usage to grow constantly, which is why I would like to try doing this via the MediaSource api.
Since there's a lack of such information I would appreciate if anyone could help.
I was able to discover how this could be done, first there needs to be a mediasource object with which you use URL.createObjectUrl to link to the video.src, and then you create a buffer on it. It is to that buffer that is appended the media which is loaded via XMLHttpRequest with the Content-type set as an arraybuffer.
Careful with big files, if you don't segment them and load everything at once it will eat your ram and even crash your application.

Is it possible to preload and cache video files without adding them to the DOM?

I'm working on a game that involves trigging one of 30 small video files depending on what result you get. As the videos need to play immediately after the user interacts, ideally I'd like to have the videos preloaded and ready to go.
I've added PreloadJS, queued up all of the assets I need.
Looking at the Network tab in inspector, I can see all 20mb of videos transferring on the loading screen.
However, when it comes time to play the clips, it seems to be re-downloading them rather than playing them from memory...
I thought that once the files were downloaded, they'd just stay in the browser cache, and once I tried to load a file with the same src, it would pull it from the pool of downloaded assets, but this doesn't seem to be the case...
Any idea how I can keep the downloaded files in memory without adding 30 video players to the page?
Thanks!
Ger
You could try to load the entire file into memory using Blob and Object-URL. This way the non-attached video element can play directly via the object-URL.
If it's a good strategy in regard to system resources is of course something you need to decide yourself.
Load through XHR as blob
Create Object URL: var url = (URL || webkitURL).createObjectURL(blob);
The video is now in memory, so when you need to play it, set it as source for the video element and you should be ready to go:
var video = document.createElement("video");
video.oncanplay = ...; // attach to DOM, invoke play() etc.
video.src = url; // set the object URL
An object-URL is kept in memory during the life-cycle of a page. You can manually revoke it this way if needed:
(URL || webkitURL).revokeObjectURL(url);

testing blob urls

I'm using the Window.URL.createObjectURL function to generate a blob url for a local video file, which I then use to set the source of a <video> element. This loads the video when the URL is first constructed, and everything works well. But when the web page is reloaded, the generated URL is no longer valid -- the browser automatically revokes the generated URL.
My question: Is there a way to determine if this Blob URL has actually been revoked? In other words, how do I determine if I can still use this Blob url using javascript, jquery, or whatever options are out there?
I came up with a simple solution, which works... albeit, probably isn't ideal.
Basically, I take the url, set the <video> src to that url, and then attach a jquery error event handler to it. If the error event is called (which it is, if the blob url has been revoked) I then prompt the user to reselect their video file.

Categories