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];
});
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 am developing a video player application, which plays video videos (.mp4) from the local filesystem using node.js and electron (therefore I am using chromium's html5 video player).
Playing video videos larger than 2GB seems to be a problem with my current approach.
I used to read the local video files using fs.readFileSync and pass that Blob to the video player, like in this code:
this.videoNode = document.querySelector('video');
const file: Buffer = fs.readFileSync(video.previewFilePath);
this.fileURL = URL.createObjectURL(new Blob([file]));
this.videoNode.src = this.fileURL;
This does work for video files smaller that 2GB. Files larger than 2GB trigger the following error:
ERROR RangeError [ERR_FS_FILE_TOO_LARGE]: File size (2164262704) is greater than possible Buffer: 2147483647 bytes
at tryCreateBuffer (fs.js:328)
at Object.readFileSync (fs.js:364)
at Object.fs.readFileSync (electron/js2c/asar.js:597)
I believe the solution is to pass a ReadStream to the html5 video player using fs.readStream(). Unfortunately I cannot find any documentation on how to pass this stream to the video player.
As the topic says you are using electron and from the above comments it is clear that you are avoiding a server. It seems that if you are just creating an offline video player then you are just making things complex. Why are you creating a buffer and then creating a new url? You can achieve this by simply getting the video path and using it as src attribute of video object.
Your code should look like this-
var path="path/to/video.mp4"; //you can get it by simple input tag with type=file or using electron dialogs
this.videoNode = document.querySelector('video');//it should be a video element in your html
this.videoNode.src=path;
this.videoNode.oncanplay=()=>{
//do something...
}
This will handle complete file and you dont need to disable webPreference given that videoNode is the video element in html file.
You can take a look at this open source media player project made using electron-
https://github.com/HemantKumar01/ElectronMediaPlayer
Disclaimer: i am the owner of the above project and everyone is invited to contribute to it
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.
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'm creating an iphone webapp in dashcode for the first time and I can not figure out the code for embedding a video into the webapp.I have an html file and have a few pages it switches between but I need to create a function in javascript so when I click a button that it will pull up a video I in quicktime. Any sample code or thoughts? If anyone could give me some samplecode I would appreciate it
You could try something like this (completely untested):
function showVideo(vidFile) {
var vidElem=document.createElement("video");
vidElem.setAttribute("src", vidFile);
vidElem.play();
}
And then invoke it like this:
showVideo("your_movie_file.mov");
create your .html file
embed the following code :
<video src="your_movie_file.mov" controls="controls">
your browser does not support the video tag
<video>
upload your file to your webserver.
test your files. (make sure your movie file in your webserver too...