title: How to use axios(or fetch) to download a mp4 file and feed it to <video> tag as src attribute value?
body: <p>I am developing a web app and having a url like(this is fake):</p>
  
  <p><a href="http://10.100.100.10:1000/a/b/c/000.mp4?a=1&amp;b=2" rel="nofollow noreferrer">http://10.100.100.10:1000/a/b/c/000.mp4?a=1&amp;b=2</a></p>
  
  <p>And my progress is that when I click abc in the page, browser will download the file or bring up windows player to play the video.
  But when I assign ObjectUrl to  tag, it just doesn't work.</p>
  
  <p>Here is my code to download mp4 file.
  It is based on vue and axiox, but they are not limitation.
  PS: I use webpack devServer.proxy to solve cors problem but I don't think that's a problem.</p>
  
  <pre><code>&lt;template&gt;
      &lt;div @click="mao"&gt;abc&lt;/div&gt;
  &lt;template&gt;
  
  &lt;script&gt;
      methods: {
          mao: function(){
              const vm = this;
              const url = "/a/b/c/000.mp4?a=1&amp;b=2";
              this.axios({
                  url,
                  method: "GET",
                  responseType: "blob"
              })
              .then(res =&gt; {
                  const filename = "111.mp4";
                  const url = URL.createObjectURL(new Blob([res.data]));
                  const link = document.createElement("a");
                  link.href = url;
                  link.setAttribute("download", filename);
                  link.setAttribute("id", "tmp");
                  document.body.appendChild(link);
                  link.click();
                  return link;
              })
              .then(link =&gt; {
                  document.body.removeChild(link);
              })
          }
      }
  &lt;/script&gt;
  </code></pre>