如何從 javascript/angular 觸發 html5 視頻標簽下載事件

Question

我們目前正在使用 HTML5 video標簽在我們的網站上顯示視頻，如果用戶想保留以供將來使用，應該能夠下載該視頻。 HTML5 video標簽提供了下載視頻的默認選項（在圖像中用黑色邊框標記），但是，我們需要提供額外的控制來讓用戶進行下載（在圖像中用紅色邊框標記）。

有沒有辦法觸發 html5 視頻用於從 javascript/angular 進行下載的事件？

Answer 1

您可以使用 file-saver 模塊下載 blob 文件npm-file saver 模塊

Answer 2

經過一番研究，我找到了一個解決方案，但需要創建一個鏈接而不是按鈕才能使其工作。 您只需要在該鏈接中指向您的視頻資源，在新選項卡/窗口中打開它並為其添加download屬性：

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

您也可以嘗試創建此鏈接並在下載按鈕上的 onclick function 中以編程方式打開它：

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);
}

希望對您的問題有所幫助。