How to trigger the html5 video tag download event from javascript/angular

user_5691018 0
Viewed 1123

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.) enter image description here

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

angular html5-video javascript
2 Answers
user_102597290

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.

user_61694360
Related