Downloading an mp4 file using javascript - javascript

How do I allow users to download mp4 files from a different server that isn't owened by me? No approach I've come across has worked so far. Here's what I've tried:
The download attribute for a tags: Download - not working for me (as in - the attribute doesn't have an effect. Tested in Google Chrome)
Place a hidden <iframe> on the page - doesn't work either since I can't change the MIME-type, the video simply gets played back
Download using ajax - not a good solution as well, since this loads the entire file into the user's RAM. Some videofiles are 1GB+.
Is there any other method? Thanks!

Related

How to Download a Webpage

I'm trying to download a webpage from Instagram for offline use.
The result looks like plain HTML.
Any suggestion on how to download a webpage from Instagram so I could access it offline? but with the original site design.
Thanks.
I tried to Ctrl+S and save it as "Webpage, Complete", but the result is the webpage without any design.
I checked that the CSS files were downloaded, and saw them so they're not missing.
I also verified that the HTML file is referring to the correct location of the CSS files (and javascript), and it does.
Tried Chrome and Firefox
Windows 11.

Download enormous Base64 in Javascript

I have a Javascript widget that creates .wav files. After running it, a Base64 representation of the file is generated, so that the user can play it in the browser. To download it, I then put the Base64 as the href of an element with the download attribute and programatically click it.
This all works fine and relatively quick for small files. However, if my Base64 exceeds about 2^21 characters in length (only 16 seconds of audio!), I get no download window to open.
Is there any other way I can get the download to work with files this large, without having to first upload the files elsewhere?
Edit: I'm using the latest version of Chrome. Firefox doesn't seem to have this issue.

JavaScript downloader

I want to allow a web site users to be able to download files from my site, but with the help of a client-side downloader with an ability to continue an interrupted download.
For example, I want to sent a person a file with a size of 30+ Meg. I want the user to have the best downloading experience, so I can't afford him downloading 25 Meg and then getting the download dropped due to the network problems on his side.
Therefore, I want to have a javascript downloader rendered on a download page, that will show the actual client-side file delivery, and when it is downloaded, to give an ability to a user to save the file.
Or is it not possible due to the fact that javascript won't be able to open a save file dialog and save to a file system?
I'm afraid that is not possible with JavaScript and that's why:
To continue downloading from the certain point you should send to the server the position number to start downloading from. And as JavaScript has no access to local file system, you can't get that position.
UPD: it seems that I was too hurrying with the reply.
The file size can be gotten using the HTML5 File API and after getting the file size you can pass it to the server which should support the partial downloading.
But anyway, after downloading another part of the file you should sew two pieces together in some way; standard web browser dialog will only suggest to overwrite the file.
UPD2: to work with files in some Internet Explorers you can use FileSystemObject:
var fso;
fso = new ActiveXObject("Scripting.FileSystemObject");
I'd look into making a plugin or extension. Like those DownloadThemAll extensions for firefox and Google chrome. Another alternative would be to use Flash, either alone or integrating it with javascript like hinted here: http://www.communitymx.com/content/article.cfm?cid=0922A

HTML5 / JavaScript: open text file, load into textarea / save textarea content to text file

I want to do two things in my browser:
Load a text file into a textarea (has to be choosen via dialog box)
Save the content of a textarea into a text file (has to be choosen via dialog box again)
Load a video file and grab the file path to use it with a video player (1)
I've been looking around for a while on the internet. There are some solutions for IE only via ActiveXObjects, which I can't use (IE, seriously?). HTML5 file API has limited usability because I can't access the selected file's path.
I also found save dialogs for textareas, but they ignored line breaks for some strange reason and I don't know how to fix that, if possible at all.
So here are my requirements and options:
Support for FF and Chrome
JavaScript, HTML5 (and PHP, if it has to be)
possibly Silverlight, but I'm not very familiar with it and may only copy and paste :-/
it has to work on Mac as well
There is a dirty hack that gets the job done without resorting to Flash or Silverlight, or using a server, and it works in most browsers:
var uriContent = "data:application/octet-stream," + encodeURIComponent(fileContentsAsString);
window.open(uriContent, 'Save Your File');
JS runs in a sandbox. That means: no access to files on the filesystem. HTML5 file API is the first „native” (as in not flash nor activex) attempt to grant limited access to the users file system.
The File API is HTML that would allow you to access data, after which you can manipulate binary blobs in JavaScript, but as written this is not possible in pure JS and HTML based on your requirements.
The big blocker is "saving to a text file." The only way I've been able to do this is by opening up an iFrame that calls a server side language (such as PHP) to set the content type in the header to a type that prompts a download.
Flash and Silverlight are "client" technologies that run outside of the sandbox, which sounds like your only option at this point.
My ideas:
Load a text file: Use a normal HTML upload form (if you want to script, maybe submit it via AJAX)
Save a text file: Use a textarea and upon submitting, create the file server-side and then offer it to download. (As mentioned before, client-side scripts do not have access to the computer's file system)
Load a video file: Is the video on the server already? Otherwise will need an upload just like the text file. Then use a flash plugin to play the file from the server (the URI should be known to you then)
All of these are relatively simple to achieve using PHP. Line breaks from a textarea stay as \n in PHP.
Tutorials: Form handling in PHP, File upload in PHP
Edit: Since PHP runs server-side you should not run into a lot of problems because of browser diversity. Alternatively, you can do all of these in Flash or Silverlight as well, although from my point of view that takes more learning and is less comfortable for the user.

Is it possible to initiate a download prompt in the browser for recognized MIME types using only JavaScript (client-side approach)?

I would like to allow the user to directly download a file with a single click. There is however a problem when it comes to known MIME types like HTML, audio, video, etc. Ideally, I would like to trigger a download prompt for audio/video files. Ultimately, I would like to do it for HTML documents too. The main idea is to make it easy for users to download files without asking them to navigate into the context menu.
I think for example to people that are not really comfortable with a computer and its main functions. These people will surely prefer a better way than "save as".
The reason why I am looking for a JavaScript solution is that the PHP approach only works if you are in a web site context. Whenever you are inside a plugin or injected script context (i.e. developing a plugin for Firefox, Chrome or Safari), you may want to avoid asking for a server-side response.
I tried to achieve this with window.open() and document.execCommand("saveAs",.... It does work, although it is glitchy and fails for huge files.
Then, I tried Downloadify which does not work in every situations.
Is there a pure JavaScript, no Ajax way to trigger a download prompt so the user can directly download a file using a simple left click?
There is a new download attribute in HTML5 that you can annote links with. It indicates to the browser that the resource should be downloaded rather than navigated to. Right now, it only works in Chrome, but it is part of the HTML spec and will hopefully be adopted by other browser soon.
Demo: http://html5-demos.appspot.com/static/a.download.html
More info: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download
If someone reaches this question now the best solution is
<a href="example" download target="_blank">
If the browser supports the HTML5 attribute download will start the download of the file, otherwise (in case of Internet Explorer and old browsers) the link will open another tab window with the file to download.
You can use <a href="example" download>. This is HTML5 and it works with Chrome, Firefox and Edge (but not with Internet Explorer, not even modern versions).

Categories

Resources