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.
Related
I'm using howler.js to play audio on my website, but because I am downloading audio through direct links there are differing load times depending on the length of the audio. I was wondering if there was a way to see how much of the file has been downloaded and display it to the user so that they know an approximate time it would take for it to finish loading. An example of how I am downloading audio is shown below.
lvlHowlWEB[eps] = new Howl({
src:["https://dl.dropboxusercontent.com/s/hb7gw9zqvdptdzq/Potat2k18.mp3?dl=0"],
html5: false,
});
(Note: Audio will not begin playback until after it has loaded completely. I am just looking to see if there's a way to view how much longer it will take to be completely downloaded)
Any help would be appreciated!
You could consider using a ServiceWorker to intercept the HTTP requests and show progress updates as they download. https://fetch-progress.anthum.com/
Alternatively, you could use fetch() and show download progress, then convert the downloaded data into a Blob for URL.createObjectURL(), which could then be used for Howler's src property.
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
I'm using the HTML5 audio control to play an mp3 file that is streaming from the server:
<audio id="audio" controls="controls" src="">
</audio>
And I am setting the src of that audio control dynamically, when a user clicks a button:
$('#myBtn').on('click', function (e) {
var audio = document.getElementById('audio');
audio.src = "/api/audio/f56i4gi8lh";
audio.load();
});
The audio is playing fine, but I also want to show the file name in a label when the audio starts streaming. The problem is that before I start streaming the audio from that url, I only know the file id and not the file name. That file name is contained in the header of the response (the response from /api/audio/f56i4gi8lh.
I can see the file name in the header using my F12 tools when I debug:
Is there a way to extract that filename from the header into a javascript variable using javascript or jQuery (while setting the src of the audio control)?
I would think it would be something along these lines:
$('#myBtn').on('click', function (e) {
var audio = document.getElementById('audio');
audio.src = "/api/audio/f56i4gi8lh";
audio.load(function(response) {
var name = response.Header.filename;
});
});
But I cannot find any documentation on anything like this.
You can, but there's unfortunately nothing easy about it.
First off, your server configuration is going to have to properly support CORS for the domain on which your page is.
Next, you'll have to switch to using MediaSource Extensions so that you can request the media yourself with the Fetch API and intercept the response headers. https://developer.mozilla.org/en-US/docs/Web/API/MediaSource
As an alternative, you could look into using Web Workers to handle the fetching. I haven't tried this myself so I don't have any specific advice, but it's my understanding you can do this and continue using the regular audio tag src like you are in your existing code.
Another (albeit less desirable) alternative is to make a separate HEAD request with the Fetch API. This isn't great because this separate request may have a different response than your first request. But, it is a possibility for you.
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];
});
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.