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

在寫web項(xiàng)目的時(shí)候,遇到簡介頁面有一個(gè)單獨(dú)的簡介視頻,只有這一個(gè)短短的視頻所以沒有使用任何video組件,所以運(yùn)用原生video標(biāo)簽就想解決問題。
雖然簡介視頻是非付費(fèi)的,但也不希望會(huì)有下載按鈕或者可以視頻另存為,所以找到一個(gè)可以看上去沒有下載功能的方法,做一下筆記。
想要隱藏以上下載按鈕,三個(gè)樣式就可以了,不廢話直接貼代碼:
video::-internal-media-controls-download-button { display:none; } video::-webkit-media-controls-enclosure { overflow:hidden; } video::-webkit-media-controls-panel { width: calc(100% + 50px); }
說白了就是把下載按鈕移動(dòng)到視窗外面,但是這些CSS找了好久?。?!
這種方法并不能真正阻止視頻的下載,“有心”的用戶還是可以在緩存文件里找到加載過的視頻文件的,所以就像標(biāo)題寫的一樣,只是隱藏。
真正的阻止視頻的下載還是需要通過服務(wù)器端對(duì)視頻地址進(jìn)行加密驗(yàn)證。
總結(jié)
以上所述是小編給大家介紹的HTML頁面原生VIDEO標(biāo)簽隱藏下載按鈕功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
HTML5的Video標(biāo)簽有部分MP4無法播放的問題解析(多圖)
解決html5中video標(biāo)簽無法播放mp4問題的辦法
HTML5的video標(biāo)簽的瀏覽器兼容性增強(qiáng)方案分享
HTML5 video標(biāo)簽(播放器)學(xué)習(xí)筆記(二):播放控制
HTML5 video標(biāo)簽(播放器)學(xué)習(xí)筆記(一):使用入門
HTML5 Video標(biāo)簽的屬性、方法和事件匯總介紹
html5 video標(biāo)簽屏蔽右鍵視頻另存為的js代碼
html5視頻媒體標(biāo)簽video的使用方法及完整參數(shù)說明詳解