Download video tag

Question

I need to have a video download button, I have no idea how I can do this.

<video id="videoDownloadLink" style="max-height:320px;" width="100%" controls>
    <source src="<?=$video?>" type="video/mp4">
</video>


<button onclick="myFunction()" id="submit"> Downdload </button>

And to download I’m trying with download js but it’s not working, someone knows a better way to download the video

function myFunction() {         
    var x=new XMLHttpRequest();
    x.open("GET", "<?=$video?>", true);
    x.responseType = 'blob';
    x.onload=function(e){download(x.response, "dlBinAjax.mp4, video/mp4" ); }
    x.send();
}   

It is possible to have the programming of this button, in another button created by me?

Answer 1

I managed to solve

<a style="background-color: #8890A6; color: #fff; cursor: pointer; border-radius: 5px; text-align: center; padding: 5px;" href="download.php?nome=<?=$dado['profileInfo']['firstName']?>&sobrenome=<?=$dado['profileInfo']['lastName']?>&video=<?=$video?>" target="_blank">Download </a>

download php.

<?
    $actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
    $links = explode("&video=", $actual_link);

    $nome=$_GET['nome'];
    $sobrenome=$_GET['sobrenome'];


    //$file_url = "https://d28je5hezfy7mw.cloudfront.net/dev/videos/pitches/full/ee8b25e4-8abf-4699-a321-eca104eee67c?Expires=1573671424&Signature=ncqYk~rEV9MhOKnjGTELqyW52wt11gqmJ3z55jv5zGc84bowBAFtoPbgvONlJn5uWk~r2fC1QEZVkoYRDkRBzNJXN-caAotY1cTTTMaUA4DFFp6sVe0akeKdJs-mfy0o~UN1jwM3IxNunNiXsrH~EkJuJJFf2TOICsHAv3LDO0rlAbMzF7w~CPqAx3M5P-cMLZOOm6gT6Kg9NwEUaGdKMYrTWHPx-S~DROPBHLZ7Ahj9w6urqEEpSWmgDcerHJlZBKgwir9ttWl7evklBc~xIZA4q6imNgOx0mC~vvghtyQQSnQGB7mm~ImCJmShvhKfKiv9adSrkCcP4CYC9eHHig__&Key-Pair-Id=APKAJNVL777XIHTPI2BA";
    $file_url = $links[1];
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename="'.basename($nome." ".$sobrenome).'.mp4');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file_url));
    header("Content-Type: video/mp4");
    flush(); // Flush system output buffer
    readfile($file_url);

?>

Answer 2

In this way it worked as requested. There is a new feature, the

download

that allows you to download any type of file.

Concept( How it works ): download

<a class="site-btn sb-light" href="teste/The 30-Second Video.mp4" target="_blank" download>Download</a>

I hope it helped!

MD