Mp4 Download causes browser to play file instead of download

Question

In my website I stream users mp4 content. I also allow users to download. However in Chrome it seems to automatically play the file in an internal player instead of downloading the file.

How do I force the browser to download the file instead.

Regards and thanks Craig

Answer 1

You have to use the HTTP header "Content-Disposition" and 'Content-Type: application/force-download' which will force browser to download the content instead of displaying it there.

Depending upon the server side language you are having the implementation differs. In case of

PHP:

    header('Content-Disposition: attachment; filename="'.$nameOfFile.'"');

will do the job for you.

Ofcourse to simplify and generalize this for all your files, you may need to write a method which will route a link to downloadable content.

The link you can show in the html will be like:

<a href="http://yoursite.com/downloadFile?id=1234">Click here to Download Hello.mp4</a>

And in the server side, you need a script which is being called on /downloadFile (depending on your routing), get the file by id and send it to user as an attachment.

<?php

 $fileId = $_POST['id'];

 // so for url http://yoursite.com/downloadFile?id=1234 will download file
 // /pathToVideoFolder/1234.mp4
 $filePath = "/pathToVideoFolder/".$fileId."mp4";
 $fileName = $fileId."mp4"; //or a name from database like getFilenameForID($id)
 //Assume that $filename and $filePath are correclty set.
header('Content-Description: File Transfer');
header('Content-Disposition: attachment; filename="'.$filename.'"');
header('Content-Type: application/force-download');
readfile($filePath);

Here 'Content-Type: application/force-download' will force the browser to show the download option no matter what's the default setting is for a mime-type.

No matter what your server side technology is, the headers to look out for are:

'Content-Description: File Transfer'
'Content-Type: application/force-download'
'Content-Disposition: attachment; filename="myfile.mp4"

Answer 2

Sounds like you are using a direct href to the mp4. If you are using any server side languages (i.e.asp.net, php, etc) language on your website you can force a download. In asp or .net you can use HttpHandlers with "content-disposition","attachment; filename=fname.ext" or return File() ActionResult in MVC. Let me know if you can use any server side code and I can provide some code.

Alternatively you can try the html5 download attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a?redirectlocale=en-US&redirectslug=HTML%2FElement%2Fa#attr-download

i.e. <a href="http://www.w3schools.com/images/myw3schoolsimage.jpg" download="downloadfilename">

Or, try javascript/jQuery. Here is a plugin: http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/