原生video 禁用鼠标右键另存为及下载

随笔写

已于 2024-08-14 17:50:17 修改

阅读量9

点赞数

文章标签：计算机外设 html5

于 2024-08-14 17:49:33 首次发布

原文链接：https://blog.csdn.net/kirinlau/article/details/129688431

版权

原生的video标签添加了controls属性后，工具控制栏 … 会现 下载，播放速度，画中画 的功能选项。再次如果不想要下载功能（需求：因为src视频流只支持播放，不支持下载。另外去做下载功能），废话不多说直接上代码。

video标签中增加 controlsList=“nodownload”

<video controlsList="nodownload" >

也可以添加其他属性鼠标右键另存为禁用等

<video
   ref="video"
   controls
   :poster="videoInfo.poster"
   controlslist="nofullscreen nodownload noremoteplayback"
  >
 <source :src="videoSrc" type="video/mp4" />

当然页面中也可以右键‘另存为’ 也需要做处理，使用oncontextmenu事件，禁用鼠标右键的菜单
oncontextmenu事件禁用右键菜单

document.oncontextmenu = function(){
    event.returnValue = false;
}// 或者直接返回整个事件
document.oncontextmenu = function(){
    return false;
}

拓展一下另外两种鼠标事件
onselectstart事件，禁止利用右键在网页上选取内容；
oncopy事件，禁止利用右键进行复制。
都可以捕捉到事件进行处理，如果你想单纯的禁用掉，那可以直接在body或者div中 return false掉操作即可：

<body oncontextmenu = "return false" ></body>
<body onselectstart = "return false" ></body>
<body oncopy = "return false" ></body>

此外，针对需要还可以对video标签的其他按钮进行隐藏

  // 隐藏video标签 音量按钮
  video::-webkit-media-controls-mute-button {
    display: none !important;
  }
  // 隐藏video标签 当前按钮
  video::-webkit-media-controls-current-time-display {
    display: none !important;
  }
  // 隐藏video标签 总时间
  video::-webkit-media-controls-time-remaining-display {
    display: none !important;
  }
  // 隐藏video标签 fullscreen按钮
  video::-webkit-media-controls-fullscreen-button {
    display: none !important;
  }

随笔写

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生video 禁用鼠标右键另存为及下载

再次如果不想要下载功能（需求：因为src视频流只支持播放，不支持下载。另外去做下载功能），废话不多说直接上代码。当然页面中也可以右键‘另存为’ 也需要做处理，使用oncontextmenu事件，禁用鼠标右键的菜单。原生的video标签添加了controls属性后，工具控制栏 …onselectstart事件，禁止利用右键在网页上选取内容；此外，针对需要还可以对video标签的其他按钮进行隐藏。也可以添加其他属性鼠标右键另存为禁用等。oncopy事件，禁止利用右键进行复制。
复制链接

扫一扫