如何从 javascript/angular 触发 html5 视频标签下载事件

Question

We are currently using the HTML5 video tag to show a video on our site, which the user should be able to download if they want to keep it for future use. The HTML5 video tag provides a default option to download the video (marked by a black border in the image), however, we are required to provide additional control to let the user do the download (marked by a red border in the image.)

Is there a way to trigger the event that html5 video uses to do the download from javascript/angular?

Answer 1

you can use file-saver module to download a blob file npm-file saver module

Answer 2

After a little research I've found a solution, but it is needed to create a link instead of button to make it work. You just need to point to your video resource in that link, open it in new tab/window and add download attribute to it:

<a href="https://example.com/link-to-res.mp4" target="_blank" download>dl link</a>

You can also try to create this link and open it programmatically inside onclick function on your download button:

clickFunction() {
    const a = document.createElement('a');
    a.href = "https://example.com/link-to-res.mp4";
    a.download = "";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

Hope that will help out with your problem.