img,video标签禁用鼠标右键功能

场景描述：

       在网页中显示图片，当用户右键点击图片时，禁止用户右键操作。

 

这里会用到一个新属性，即 oncontextmenu。

例如：

<img
  src="图片地址"
  class="unselectable"
  draggable="false"
  oncontextmenu="return false"
/>
其中： 
  类名： .unselectable, 用于禁用鼠标选中
  draggable="false", 禁用拖拽
  oncontextmenu="return false", 禁用鼠标右键
  
.unselectable{
   -moz-user-select: -moz-none;
   -ms-user-select: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -o-user-select: none;
   user-select: none
}

video标签

<video
  autoplay
  width="600"
  height="400"
  controls
  id="myVideo"
  @contextmenu="contextmenu"
  controlslist="nodownload noremoteplayback noplaybackrate"
  disablePictureInPicture="true"
  disableRemotePlayback="true"
></video>
#禁用右键
@contextmenu="contextmenu"
contextmenu(e){
  return false;
}
#隐藏下载功能
在标签上添加 controlslist 属性值设置为 nodownload
#播放速度功能
在标签上添加 controlslist 属性值设置为 noplaybackrate
#远程播放功能
在标签上添加 controlslist 属性值设置为 noremoteplayback
在标签上添加 disableRemotePlayback="true"
#画中画功能
在标签上添加属性 disablePictureInPicture="true"

 

参考链接：

    https://blog.csdn.net/weixin_45066149/article/details/119520229