How can I make a video file available for download?

Question

I am trying to suggest an option to upload videos to my site. I have direct links (ending in .mp4 / .webm) 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 works only on chrome, in FireFox it just opens the video in the browser itself.

Answer 1

You need a shell script that appropriately sets the Content-Type Content-Disposition headers and displays the file you want to serve.

In PHP, this will be done as follows:

File Name: 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'); ?> 

Instead, you reference the PHP file as follows:

 <a href="624x260.php">Download</a> 

Answer 2

HTML5 adds the download attribute that you have in your example but is empty. Add a value to the download and hey presto attributes.

ie change Download to Download = "624x260.webm" in your tag.

http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download

For non-HTML5 compatible browsers, the easiest way would be to follow the right-click links to download. This will cover most cases and browsers.

An overview of several methods here, I understand you cannot zip files.

http://webdesign.about.com/od/beginningtutorials/ht/download_link.htm

There are many ways to attract this user, including changing the configuration of the web server, but not everyone has access / know-how to do this.

Answer 3

Note. Download attribute supported in Chrome 14+ and Firefox 20+.

As an alternative to other browsers, you can use the jQuery plugin 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, for example

 <a href="http://video.webmfiles.org/elephants-dream.webm" class="download" target="_blank">Download</a> $(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; }); 

Answer 4

if you have an Apache server where you can edit the .htaccess file, add this line.

 AddType application/octet-stream .webm 

If you do not want to do this, you can do this with 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:

 <a href="direct_download.php?file=fineline.mp3">Download the mp3</a>