2

I am developing a web app and having a url like(this is fake):

http://10.100.100.10:1000/a/b/c/000.mp4?a=1&b=2

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.

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.

<template>
    <div @click="mao">abc</div>
<template>

<script>
    methods: {
        mao: function(){
            const vm = this;
            const url = "/a/b/c/000.mp4?a=1&b=2";
            this.axios({
                url,
                method: "GET",
                responseType: "blob"
            })
            .then(res => {
                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 => {
                document.body.removeChild(link);
            })
        }
    }
</script>
krave
  • 1,629
  • 4
  • 17
  • 36
  • When you put `const url` in browser's address bar does it play a video (as if it's a direct link to some mp4 file)? – VC.One Aug 01 '19 at 05:38

1 Answers1

-1

Just curious, any reason why download the whole file (and download to where? inside the client OS?) instead of streaming the source instead?

I have updated this post with a sample for streaming MP4.

<!DOCTYPE html> 
<html> 
<body> 

<video width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

</body> 
</html>
Norman
  • 387
  • 2
  • 11
  • Right now download to client OS. Downloading is not my purpose but where as far as I can get. I hope to streaming the source but I don't know how to achieve it for video tag. – krave Aug 01 '19 at 04:45
  • Since streaming is your ideal solution, you can try it with the HTML5 video tag. I have updated my post so you can take a look there. – Norman Aug 02 '19 at 01:22
  • @Norman I tried this, but doesn't work. Could you help me out on my question here: https://stackoverflow.com/questions/62291888/how-to-stream-mp4-videos-from-django-3-to-vue-js – Soubriquet Jun 10 '20 at 18:35