HTML5中video標(biāo)簽禁止右鍵和下載視頻的問題解決
我要評論近期做了一個(gè)關(guān)于在線文件管理的項(xiàng)目，類似網(wǎng)盤，基本功能包含用戶、消息、項(xiàng)目、分享、文件提取、收藏、回收站等主要功能，領(lǐng)挖還有一些office、壓縮包、圖片、文本、音頻和視頻的預(yù)覽功能。
音頻我使用的是APlayer，視頻使用的是DPlayer，為了做個(gè)兼容，視頻還有html5中的video標(biāo)簽類型的預(yù)覽，由于原生的video標(biāo)簽添加了controls屬性后，右下角的 …點(diǎn)擊后 會出現(xiàn)‘下載’ ，‘播放速度’，‘畫中畫’ 的功能選項(xiàng)，但是由于有只讀權(quán)限的問題，需要關(guān)閉掉‘下載功能，摸索了半天解決了
增加 controlsList=“nodownload” 屬性
<video controlsList="nodownload" >
也可以詳細(xì)指定
<video ref="video" controls :poster="videoInfo.poster" controlslist="nofullscreen nodownload noremoteplayback" > <source :src="videoSrc" type="video/mp4" />
當(dāng)然頁面中也可以右鍵‘另存為’ 也需要做處理，使用oncontextmenu事件，禁用鼠標(biāo)右鍵的菜單
oncontextmenu事件禁用右鍵菜單
document.oncontextmenu = function(){
event.returnValue = false;
}// 或者直接返回整個(gè)事件
document.oncontextmenu = function(){
return false;
}拓展一下另外兩種鼠標(biāo)事件
onselectstart事件，禁止利用右鍵在網(wǎng)頁上選取內(nèi)容；
oncopy事件，禁止利用右鍵進(jìn)行復(fù)制。
都可以捕捉到事件進(jìn)行處理，如果你想單純的禁用掉，那可以直接在body或者div中 return false掉操作即可：
<body oncontextmenu = "return false" ></body> <body onselectstart = "return false" ></body> <body oncopy = "return false" ></body>
此外，針對需要還可以對video標(biāo)簽的其他按鈕進(jìn)行隱藏
// 隱藏video標(biāo)簽 音量按鈕
video::-webkit-media-controls-mute-button {
display: none !important;
}
// 隱藏video標(biāo)簽 當(dāng)前按鈕
video::-webkit-media-controls-current-time-display {
display: none !important;
}
// 隱藏video標(biāo)簽 總時(shí)間
video::-webkit-media-controls-time-remaining-display {
display: none !important;
}
// 隱藏video標(biāo)簽 fullscreen按鈕
video::-webkit-media-controls-fullscreen-button {
display: none !important;
}到此這篇關(guān)于HTML5中video標(biāo)簽禁止右鍵和下載視頻的問題解決的文章就介紹到這了,更多相關(guān)HTML5 video禁止右鍵內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
html5 video標(biāo)簽controlslist的具體使用
HTML5 提供了內(nèi)置的視頻播放控件，其中 video controlslist 是其中一個(gè)很有用的屬性，本文主要介紹了html5 video標(biāo)簽controlslist的具體使用，具有一定的參考價(jià)值，感興趣2024-02-27
在html5頁面中嵌入視頻的時(shí)候頁面中只顯示聲音卻不顯示圖像，本文主要介紹了HTML5 video播放有聲音無圖像的解決方法，具有一定的參考價(jià)值，感興趣的可以了解一下2024-02-21解決html5中的video標(biāo)簽ios系統(tǒng)中無法播放使用的問題
這篇文章主要介紹了解決html5中的video標(biāo)簽ios系統(tǒng)中無法播放使用的問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-10HTML5 video循環(huán)播放多個(gè)視頻的方法步驟
這篇文章主要介紹了HTML5 video循環(huán)播放多個(gè)視頻的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來2020-08-06html5 video全屏播放/自動播放的實(shí)現(xiàn)示例
這篇文章主要介紹了html5 video全屏播放/自動播放的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來2020-08-06HTML5 video進(jìn)入全屏和退出全屏的實(shí)現(xiàn)方法
這篇文章主要介紹了HTML5 video進(jìn)入全屏和退出全屏的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編2020-07-28
html5用video標(biāo)簽流式加載的實(shí)現(xiàn)
這篇文章主要介紹了html5用video標(biāo)簽流式加載的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-05-20html5視頻媒體標(biāo)簽video的使用方法及完整參數(shù)說明詳解
這篇文章主要介紹了html5視頻媒體標(biāo)簽video的使用方法及完整參數(shù)說明詳解,需要的朋友可以參考下2019-09-27
