近期做了一個(gè)關(guān)于在線文件管理的項(xiàng)目，類似網(wǎng)盤(pán)，基本功能包含用戶、消息、項(xiàng)目、分享、文件提取、收藏、回收站等主要功能，領(lǐng)挖還有一些office、壓縮包、圖片、文本、音頻和視頻的預(yù)覽功能。
音頻我使用的是APlayer，視頻使用的是DPlayer，為了做個(gè)兼容，視頻還有html5中的video標(biāo)簽類型的預(yù)覽，由于原生的video標(biāo)簽添加了controls屬性后，右下角的 …點(diǎn)擊后 會(huì)出現(xiàn)‘下載’ ，‘播放速度’，‘畫(huà)中畫(huà)’ 的功能選項(xiàng)，但是由于有只讀權(quán)限的問(wè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)然頁(yè)面中也可以右鍵‘另存為’ 也需要做處理，使用oncontextmenu事件，禁用鼠標(biāo)右鍵的菜單
oncontextmenu事件禁用右鍵菜單
document.oncontextmenu = function(){
event.returnValue = false;
}// 或者直接返回整個(gè)事件
document.oncontextmenu = function(){
return false;
}
拓展一下另外兩種鼠標(biāo)事件
onselectstart事件，禁止利用右鍵在網(wǎng)頁(yè)上選取內(nèi)容；
oncopy事件，禁止利用右鍵進(jìn)行復(fù)制。
都可以捕捉到事件進(jìn)行處理，如果你想單純的禁用掉，那可以直接在body或者div中 return false掉操作即可：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-516565.html
<body oncontextmenu = "return false" ></body>
<body onselectstart = "return false" ></body>
<body oncopy = "return false" ></body>
此外，針對(duì)需要還可以對(duì)video標(biāo)簽的其他按鈕進(jìn)行隱藏文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-516565.html
// 隱藏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中關(guān)于解決video標(biāo)簽禁止右鍵和下載視頻的辦法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
