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

 

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>
复制代码

 

?
1
2
<!-- 核心代码： 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
4
5
<!--  说明：还是一些小问题：
   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   代码如下：

 　　　　<video controls controlsList="nodownload"></video>

　　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 @   亟待!  阅读(1602)  评论(0)  编辑  收藏  举报
相关博文：
·  html屏蔽右键、禁止复制与禁止查看源代码的几种方法
·  如何禁止谷歌浏览器chrome自动更新？
·  用HTML5 video标签插入视频，在谷歌浏览器上播放视频时，右下角显示的下载按钮怎么去掉
·  右键视频不让下载？
·  HTML5 video controlslist All In One
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
历史上的今天：
2021-05-24 公司企业的网站备案工信部短信验证失败怎么办？证件不是营业执照,而是身份证号
欢迎这位怪蜀黍来到《html网页中禁用右键下载视频的解决方法(iframe和video) - 亟待! - 博客园》
点击右上角即可分享
微信分享提示
AI IDE Trae