how i pass url from javascript to html and download it

Question

I have developed a website that uses YouTube URL. This website only uses HTML5, CSS and JavaScript. I got the URL of YouTube video as a variable, and now I want to pass it to the HTML page, where it pass to a button. When people click on that button, the video will download. How can I do that? The following is my code:

<!DOCTYPE html>
<html>
<head>
<title>Search Header</title>

</head>
<body>
<section>

  <input class="downloadmp4" type="submit" value="  Download  MP4   ">

</section>

<script type="text/javascript">

var dow =  'https://www.youtube.com/watch?v=' + foo;

var foo = getParameterByName('id');
    //alert(foo);
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  function getParameterByName(name, url)
    {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }

  });
        </script>
</body>
</html>

The variable is dow. That is the complete URL of YouTube video. Now I want to pass it to the "Download MP4 button". How is it possible?

When the ID is passed to that, I also want that when people click on that button, then automatically the video will start downloading.

Two things are there: one is to pass that ID and second when ID is passed then, how it start download?

score 2 · Answer 1 · answered Jul 14 '16 at 16:44

2

Try something like this. I gave your link an id="download_link.

<a href="#" id="download_link" class="downloadmp4">Download MP4 </a>

The used setAttribute to set the href of the link to your dow.

<script type="text/javascript">

    var dow =  'https://www.youtube.com/watch?v=' + foo;
    var link = document.getElementById("download_link");
    link.setAttribute("href", dow);
    // The rest of your code ...

answered Jul 14 '16 at 16:44

Michael Hommé

1,696
1
14
18

Forgot to mention that I had to comment out the `window.onload` function and the bottom `});` to get it to work. The error was `GetDivElement()` is undefined, which it is in the code you've posted. So try commenting those out and if it still doesn't work, post the error you're seeing. – Michael Hommé Jul 14 '16 at 16:52
could you please write the code for input button, for downloading, as i wrote function Download(url) { document.getElementById('dow').src = url; }; – Malik Nabeel Jul 14 '16 at 17:05

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

See this: How to change the href for a hyperlink using jQuery,

If you have more than one the download mp4 button, each for a diferent video, you will have to do something to identify the button.

Other way could be the button call a javascript function and on that function you could use the

window.location

In order to open a new window and do the download.

There is also another way as you may see on this link

Happy coding :)

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 14 '16 at 16:54

NFRiaCowboy

153
1
9

Its not working, neither Id pass nor it start download, can you help, like i use button, to download the video, what will be the code, if i use button, and the id pass to the button, when button clicks, its start downloading, ? is it possible ? – Malik Nabeel Jul 14 '16 at 17:03

Tayyab Kazmi · Answer 3 · 2016-07-15T14:08:14.543

Where is the action handler for the button, i mean how would it react to a "Click Event".

If you have answers to all of the above then the answer to your query would be:

<!DOCTYPE html>
<html>
<head>
<title>Search Header</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<section>

  <input class="downloadmp4" id = "dbtn type="submit" value="  Download  MP4   ">

</section>

<script type="text/javascript">

var dow =  'https://www.youtube.com/watch?v=' + foo;

var foo = getParameterByName('id');
    //alert(foo);
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  function getParameterByName(name, url)
    {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }

  });

  $( "dbtn").click(function( event ) {
  //Use dow and pass it to your API as you like inside this function....
});
</scr
        </script>
</body>
</html>

i just have the button and that URL, which i want to pass that button, when button clicks, it automatically start download from that URL, ... this is the requirement. — Malik Nabeel, Jul 15 '16 at 12:59
`$( "dbtn").click(function( event ) { //Use dow and pass it to your API as you like inside this function.... function downloadURI(uri, name) { var link = document.createElement("dow"); link.download = dow; link.href = uri; link.click(); } });` As i am passing the variable dow in the jquery function, but it s not working. — Malik Nabeel, Jul 15 '16 at 13:17

score 0 · Answer 4 · answered Jul 15 '16 at 15:04

0

In your HTML, make a hidden element...

   <p id = "hiddenid" hidden>This paragraph should be hidden.</p>

Then, update the element with JS

    document.getElementById("p1").innerHTML = urlvar;

Then you can access the element in HTML.

answered Jul 15 '16 at 15:04

objectively C

960
9
25

how i pass url from javascript to html and download it

4 Answers4