How can I make a video file available for download? - html

Question

I am trying to offer a download option of videos on my site.
I have direct links (which have .mp4/.webm ending) available for download (they are not hosted on my server if that matters).
This is what I tried:
<a href="http://stream.flowplayer.org/bauhaus/624x260.webm" download>Download</a>
It only works on chrome, in FireFox it will just open the video on the browser itself.

Answer 1

You need a wrapper script which sets the Content-Type Content-Disposition headers appropriately, and outputs the file you want to serve.
In PHP this would be done like this:
Filename: 624x260.php
<?php
// We'll be outputting a webm video
header('Content-type: video/webm');
// It will be called downloaded.webm
header('Content-Disposition: attachment; filename="download.webm"');
readfile('624x260.webm');
?>
You would then link to the PHP file instead, as follows:
Download

Answer 2

if you happen to have an apache server where you can edit the .htaccess file, add this line.
AddType application/octet-stream .webm
If you wish to not do this, you could do this through php as well.
PHP Code:
<?php
$file = $_GET['file'];
header ("Content-type: octet/stream");
header ("Content-disposition: attachment; filename=".$file.";");
header("Content-Length: ".filesize($file));
readfile($file);
exit;
?>
HTML Code:
Download the mp3

Answer 3

HTML5 adds the download attribute, which you have there in your example, but is empty. Add a value to the download attribute and hey presto.
ie change download to download="624x260.webm" in your a tag.
http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download
For non-HTML5 compliant browsers, the most straightforward way would be to accompany the links with a direction to 'right click to download'. This would cover the majority of cases and browsers.
An overview of a couple of techniques here, I realise you can't zip the files.
http://webdesign.about.com/od/beginningtutorials/ht/download_link.htm
There are multitude more involved ways to do this, including modifying the web server config, but not everyone has the access / know-how to do that.

Answer 4

Note: The download attribute is supported in Chrome 14+ and Firefox 20+.
As an alternative for other browsers, you can use jQuery plugin from here
http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/4
OR
http://jqueryfiledownload.apphb.com/
You can make it downloadable like
Download
$(document).on("click", "a.download", function () {
$.fileDownload($(this).prop('href'))
.done(function () { alert('File download a success!'); })
.fail(function () { alert('File download failed!'); });
return false;
});