html网页中禁用右键下载视频的解决方法(iframe和video)

前言：

vidoe组件——禁用下载功能

有些官网上的视频是不允许下载的，为了防止视频被盗或者从事违法的活动。

因此我们在官网等敏感网站中使用video组件的时候，需要视频的禁用下载功能；在使用video组件来播放视频时，视频上会有操作按钮，按钮和右键中会有下载，可以通过下面的方法来解决简单的video防下载功能。

一、网上都是一些无效的方法

这些方法是无效的，大家不要再踩坑了：

无效方法01：只有 controlslist="nodownload"

说明：只隐藏了视频界面上的下载按钮，右键菜单里的[视频另存为]漏掉了

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Video TEST1</title> 
</head>
<body>
<video width="320" height="240" controls  controlslist="nodownload">
  <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。//(controlslist="nodownload"这个代码只能隐藏视频内的下载按钮，无法解决右键"视频另存为"下载)
</video>
</body>
</html>

无效的方法02：

说明：只隐藏了界面上的【向下箭头】的下载，播放控制栏里的下载还在。

就算加上播放控制栏里的下载限制，但是还有右键菜单里的“视频另存为”。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document Test2</title>
  <style type="text/css">
           video::-internal-media-controls-download-button {
                display:none;
            }
           video::-webkit-media-controls-enclosure {
                overflow:hidden;
            }
           video::-webkit-media-controls-panel {
                width: calc(100% + 30px);
            }
  </style>
</head>
<body>
<div>
    <video id="myVideo1" controls poster="image/4.jpg"  >
     <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
</video>
</div>
</body>
</html>

无效的方法03：

说明：在页面中加入“禁止右键事件的方法”，无效。

必须写入到子页面内才能禁止子页面的右键菜单，但问题是Iframe一般是动态引用的，无法修改子页面的内容。

<!DOCTYPE html>
<html>
<head> 
   <meta charset="utf-8"> 
   <title>Document Test3</title>
   <script type="text/jscript">
         $('#myiframe').bind('contextmenu', function(e) {
         return false;
         }); 
   </script>
</head>
<body>

<video width="320" height="240" controls>
  <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。   //在页面中加入“禁止右键事件的方法”，无效。
</video>

 <iframe id="myiframe" src="https://www.runoob.com/try/demo_source/movie.mp4" width="328" height="273"></iframe>

<script>
     document.oncontextmenu = function(){
               return false;
      }
</script>
</body>
</html>

无效的方法04：

说明：同无效的方法03，只对iframe框架外面的右击有效，但是最重要的内部引用的PDF和视频图片依然可以右击。

<script type="text/jscript">
   // 禁用右键菜单，无需调用
   document.oncontextmenu = () => { return false }
</script>

二、<video>标签方案

方案01：

<!--  最简单的方案： 控件禁用右键菜单 + 视频上禁用[下载]按钮
       解决 在视频上点右键 弹出的[视频另存为]下载视频菜单问题。
  缺点：部分浏览器还是有右键菜单。   -->

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>隐藏Video的播放控制栏下载和右键下载(01)</title> 
</head>
<body>

<video oncontextmenu="return false" width="320" height="240" controls controlslist="nodownload" >
  <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>

</body>
</html>

<!-- 核心代码： oncontextmenu="return false"禁用控件的右键菜单；  controlslist="nodownload"隐藏视频内的下载按钮  -->
<video oncontextmenu="return false"  controls controlslist="nodownload" >

02. 方法01优化版

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>隐藏Video的播放控制栏下载和右键下载和界面下载(02)</title>
  <style type="text/css">
           video::-internal-media-controls-download-button {
                display:none;
            }
           video::-webkit-media-controls-enclosure {
                overflow:hidden;
            }
           video::-webkit-media-controls-panel {
                width: calc(100% + 30px);
            }
  </style>
</head>
<body>
<div>
    <video id="MyVideo1" poster="image/4.jpg" oncontextmenu="return false" controls controlsList="nodownload">
       <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
    </video>
</div>

</body>
</html>

<!--  优化01
   1、CSS禁用界面上的下载 
   2、<Video controlsList="nodownload">禁用 播放控制栏┇ 里的下载；
   2、禁用<Video>的右键菜单；
-->

方案02：通过设置<video>的css样式来实现禁用下载功能

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title> </title> 
</head>
<body>

<div style="text-align:center;">
     <button onclick="playPause()">播放/暂停</button> 
     <button onclick="makeBig()">大</button>
    <button onclick="makeNormal()">中</button>
    <button onclick="makeSmall()">小</button>
    <br /> 
<video id="MyVideo1" width="920" height="700">
  <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
   Your browser does not support video Label.
</video>

<script type="text/javascript">
  var myVideo=document.getElementById("MyVideo1");
  $('#MyVideo1').bind('contextmenu',function() { return false; });
  function playPause()
  { 
  if (myVideo.paused) 
    myVideo.play(); 
  else 
    myVideo.pause(); 
  } 
  
  function makeBig()
  { 
  myVideo.width=560; 
  } 
  
  function makeSmall()
  { 
  myVideo.width=320; 
  } 
  
  function makeNormal()
  { 
  myVideo.width=420; 
  } 
  </script> 
  
 </body> 
 </html>

<!--  说明：还是一些小问题：
   1、在部分浏览器中，禁用右键下载功能可能无法生效；
   2、 ；
   3、 ；
-->

三、iframe框架方案：

301. iframe最佳禁用视频下载方案

<!--  说明：还是有2个bug：
   1、预览pdf文档的话，鼠标只能放到滚动条上才能滚动，用户体验不好；
   2、播放视频的话，播放控制功能(暂停、全屏、播放进度等)全部隐藏了。
   3、禁止右键显示菜单的代码可能是无效的。
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .pdf-wrap{
      width: 920px;
      height: 700px;
      position: relative;
    }
    .pdf-wrap .mark {
      position: absolute;
      top: 0;
      left: 0;
      right: 10px;
      bottom: 0px;
    }
  </style>
</head>
<body>
  <div class="pdf-wrap">
    <div class="mark"></div>
    <iframe src="http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf#toolbar=0" width="100%" height="100%"></iframe>
  </div>
  <script>
    document.oncontextmenu = function(){
      return false;
    } //禁止右键显示菜单
  </script>
</body>
</html>

302.iframe禁用视频下载方案2

<!-- 未解决视频控制栏下载按钮隐藏问题  -->
<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <title>Document</title> 
</head>
<script type="text/javascript">
      document.oncontextmenu = function(){     
          return false;
      } 
 </script>    
<body>
<iframe id="ifm" width="320" height="240" marginwidth ="0" marginheight="0"  src="https://www.runoob.com/try/demo_source/movie.mp4"></iframe>
</body>
<script type="text/javascript">
    var iframe = document.getElementById('ifm');
    iframe.onload=function(){
        iframe.contentWindow.document.oncontextmenu=function(){return false;};
        iframe.contentWindow.document.onselectstart=function(){return false;};
   };
</script>
</html>

其他扩展说明:

1) 隐藏video的下载按钮

　　1. 在Chrome58以上的版本中使用 video元素的 controlsList API :https://googlechrome.github.io/samples/media/controlslist.html 代码如下：

　　2. 在Chrome58以下的版本中使用css去控制，简单来说就是将下载按钮挤出可见范围，这样就可以变相的认为按钮被隐藏了，代码如下：

video::-webkit-media-controls {
    overflow: hidden !important;
}
video::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

2) controlslist属性(只有3个配置项)

controlslist=“nodownload nofullscreen noremoteplayback”;

controlslist 取值如下,设定多个时中间用空格间隔即可：

nodownload：取消播放控制栏的[更多]中的[下载]功能;

nofullscreen：取消[全屏]功能;

noremoteplayback：取消[远程播放视频]功能；

controlslist=“nodownload” disablePictureInPicture：播放控制栏的┇展开后弹窗中的两个选项全部取消后,更多(┇)按钮自动消失了。

[画中画]按钮：

<video 
  controls
  controlslist="nodownload" //去除[下载]按钮；controlslist属性有3个配置项(没有更多了)
  disablePictureInPicture  //隐藏[画中画]按钮
></video>

posted @ 2023-05-24 18:48 亟待! 阅读(314) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

亟待!

html网页中禁用右键下载视频的解决方法(iframe和video)

html网页中禁用右键下载视频的解决方法(iframe和video)

一、网上都是一些无效的方法

二、<video>标签方案

三、iframe框架方案：

其他扩展说明:

1) 隐藏video的下载按钮

2) controlslist属性(只有3个配置项)

公告