无锡网站建设:video视频如何禁止右键保存

【导读】很多时候给网站添加视频是非常增彩的一波操作,而辛苦制作的视频不想被太多人下载,影响网站负载能力怎么办?那么就需要禁止右键保存视频。

   很多时候给网站添加视频是非常增彩的一波操作,而辛苦制作的视频不想被太多人下载,影响网站负载能力怎么办?那么就需要禁止右键保存视频。

  【最简单粗暴的解决方法】

  1、在网页head部分添加如下代码

  <script type="text/javascript">

  //禁止ctrl复制

  document.onkeydown=function(){

  if((event.ctrlKey) && (window.event.keycode==67)){

  event.returnValue=false;

  alert("啊哦,不好意思,网页禁止复制!");

  }

  }

  document.onmousedown=function(){

  if(event.button==2){

  event.returnValue=false;

  alert("出于版权考虑,网站禁止下载!");

  }

  }

  </script>

video视频如何禁止右键保存


  2、隐藏video的控件

  <style>

  video {

  max-width: 70%;

  height: auto;

  }

  video::-webkit-media-controls,

  video::-moz-media-controls,

  video::-webkit-media-controls-enclosure{

  display:none !important;

  }

  video::-webkit-media-controls-panel,

  video::-webkit-media-controls-panel-container,

  video::-webkit-media-controls-start-playback-button {

  display:none !important;

  -webkit-appearance: none;

  }

  </style>

  【方法二】H5 Video 去除 下载按钮 禁用右键

  <style type="text/css">

  video::-webkit-media-controls-enclosure {

  overflow:hidden;

  }

  video::-webkit-media-controls-panel {

  width: calc(100% + 30px);

  }

  </style>

  //去除右键事件

  $("video").live("contextmenu",function(){//取消右键事件

  return false;});

  在使用HTML5做播放器的时候,很多人都觉得直接右键另存很不双,这里我们可以选择区域屏蔽右键,找到video标签,本身我们有下载功能,但是在video区域内,点击右键可以将“视频另存为”,来下载视频,为了屏蔽“视频另存为”,可以在js中加入以下代码:

  $('#myVideo').bind('contextmenu',function() { return false; });

  其中myVideo为video标签的id,这样就可以屏蔽video标签区域的右键功能,但是不能做到真正的屏蔽。要知道,最笨的方法人家也可以录屏把你的视频保存下来。所以,网页内部要实现防止人下载您的video视频只能是针对一些不太懂网页技术的用户。


本文链接:http://mkapps.cn/news/website/263.html

如无特别说明©本站内容均为原创,转载请标注来源:无锡做网站公司http://mkapps.cn


    匿名评论
  • 评论
人参与,条评论
 您阅读这篇文章共花了: 

分享这篇文章吧!

相关文章