基于JS實現(xiàn)頁面視頻video標簽禁止下載(下載按鈕+右擊菜單)
項目需求:禁止用戶瀏覽頁面的時候下載頁面的視頻
解決:
網(wǎng)頁上下載視頻的方法有兩種
1、視頻自帶的下載按鈕
2、右擊頁面出現(xiàn)菜單中的“另存為”
對于1,因為后臺管理中使用的插件是是百度的Ueditor,所以按照Ueditor的配置修改即可去掉下載按鈕
在ueditor.all.js文件中加入框中代碼
case 'video': var ext = url.substr(url.lastIndexOf('.') + 1); if(ext == 'ogv') ext = 'ogg'; str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') + 'controlsList="nodownload" + width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' + '<source src="' + url + '" type="video/' + ext + '" /></video>'; break;
在ueditor.all.min.js文件中加入框中代碼
對于2,采用監(jiān)聽,在mounted中加入代碼,但是該方法會使得整個頁面在右擊的時候都禁止出現(xiàn)菜單,可以按照需求,修改添加的位置,以達到局部禁止右擊出現(xiàn)菜單的功能
window.addEventListener('contextmenu',function(e){ e.preventDefault(); },false)
到此這篇關(guān)于基于JS實現(xiàn)頁面視頻video標簽禁止下載(下載按鈕+右擊菜單)的文章就介紹到這了,更多相關(guān)js禁止下載視頻內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
node.js Web應(yīng)用框架Express入門指南
這篇文章主要介紹了node.js Web應(yīng)用框架Express入門指南,從安裝到各種技術(shù)的應(yīng)用,都進行了講解,是一篇不錯的Express入門教程,需要的朋友可以參考下2014-05-05javascript中動態(tài)加載js文件多種解決辦法總結(jié)
這篇文章主要介紹了javascript中動態(tài)加載js文件多種解決辦法,有需要的朋友可以參考一下2013-11-11動態(tài)加載圖片路徑 保持JavaScript控件的相對獨立性
根據(jù)新界面的要求,需要一部分圖片來增強日期控件的美觀性。考慮到既要實現(xiàn)加載圖表的目標,又要保持控件的獨立性以便將來的移植。2010-09-09uniapp添加操作日志的方法(uniapp、日志、文件、html5+)
近期一直在寫微信小程序,有一個問題一直沒有解決,就是在測試環(huán)境中調(diào)試代碼會打印很多日志,方便看到問題所在,這篇文章主要給大家介紹了關(guān)于uniapp添加操作日志(uniapp、日志、文件、html5+)的相關(guān)資料,需要的朋友可以參考下2023-11-11Javascript動態(tài)創(chuàng)建div的方法
這篇文章主要介紹了Javascript動態(tài)創(chuàng)建div的方法,是javascript節(jié)點操作的典型應(yīng)用,非常具有實用價值,需要的朋友可以參考下2015-02-02