明輝手游網(wǎng)中心：是一個免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML頁面原生VIDEO標(biāo)簽隱藏下載按鈕技巧

發(fā)表時間：2023-09-11 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這篇文章主要介紹了HTML頁面原生VIDEO標(biāo)簽隱藏下載按鈕功能，非常不錯，具有參考借鑒價值，需要的朋友參考下吧在寫web項(xiàng)目的時候，遇到簡介頁面有一個單獨(dú)的簡介視頻，只有這一個短短的視頻所以沒有使用任何video組件，所以運(yùn)用原生video標(biāo)簽就想解決問題。雖然簡介視頻是非付費(fèi)的，但也不希望會有...
這篇文章主要介紹了HTML頁面原生VIDEO標(biāo)簽隱藏下載按鈕功能，非常不錯，具有參考借鑒價值，需要的朋友參考下吧

在寫web項(xiàng)目的時候，遇到簡介頁面有一個單獨(dú)的簡介視頻，只有這一個短短的視頻所以沒有使用任何video組件，所以運(yùn)用原生video標(biāo)簽就想解決問題。

雖然簡介視頻是非付費(fèi)的，但也不希望會有下載按鈕或者可以視頻另存為，所以找到一個可以看上去沒有下載功能的方法，做一下筆記。

HTML頁面原生VIDEO標(biāo)簽隱藏下載按鈕功能

想要隱藏以上下載按鈕，三個樣式就可以了，不廢話直接貼代碼：

video::-internal-media-controls-download-button {
    display:none;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 50px); 
}

說白了就是把下載按鈕移動到視窗外面，但是這些CSS找了好久啊��！

HTML頁面原生VIDEO標(biāo)簽隱藏下載按鈕功能

這種方法并不能真正阻止視頻的下載，“有心”的用戶還是可以在緩存文件里找到加載過的視頻文件的，所以就像標(biāo)題寫的一樣，只是隱藏。

真正的阻止視頻的下載還是需要通過服務(wù)器端對視頻地址進(jìn)行加密驗(yàn)證。

相關(guān)推薦：

HTML5 video視頻字幕的使用和制作方法

HTML5觸摸事件實(shí)現(xiàn)移動端簡易進(jìn)度條的實(shí)現(xiàn)方法


以上就是HTML頁面原生VIDEO標(biāo)簽隱藏下載按鈕功能的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。