7

Hi I have video tag of HTML5, I want to give a "Download" button to user, where User can able to click and download that video. I know user can download video by right click on browsers, but i want to give this feature on my button.

I am using simple code

$('submit').click(function() {
    window.location.href = 'myvideo.mp4';
});

but it redirect me to video url not shows download popup that i want.

Thanks

Rohit
  • 135
  • 1
  • 2
  • 8
  • 3
    You can use the download attribute but it is not supported in all browsers. If you want to ensure download everywhere, you have to set the right headers serverside. – pvg Dec 09 '15 at 07:15

3 Answers3

4

HTML5 browsers now allow you to add the download attribute to <a> tags to achieve this in your DOM. You cannot do this in pure javascript.

Source: https://stackoverflow.com/a/6794432/5203655

If however, you have access to the server response, then in PHP you could do something like

<?php
header('Content-type: application/octet-stream');
readfile('myvideo.mp4');
Meghan
  • 1,215
  • 11
  • 17
  • Note: the `download` attribute only works for same origin URLs. This means it won't work for a download of a video file hosted elsewhere. – Sam Weaver Jun 23 '21 at 16:29
4

You can use this: 

$('submit').click(function() {
  $('<a/>',{
     "href":"The/video/src/path",
    "download":"video.mp4",
    id:"videoDownloadLink"
  }).appendTo(document.body);
  $('#videoDownloadLink').get(0).click().remove();

});
Jai
  • 74,255
  • 12
  • 74
  • 103
-1

Based on Meghans answer:

header("Content-disposition: attachment; filename=" . basename($filename) .'"');
header('Content-type: application/octet-stream');
readfile($filename);`

Thanks, @Meghan. I copied and changed your code.

Krzysztof Atłasik
  • 21,985
  • 6
  • 54
  • 76
Chirag Arora
  • 357
  • 3
  • 13