HTML5 video controlslist All In One

controlslist="nodownload" 属性, 禁用视频播放器的下载选项

<div class="video-wapper">
  <video controls="" controlslist="nodownload" class="video" src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4"></video>
</div>

`HTMLMediaElement.controlsList`

The controlsList property of the HTMLMediaElement interface returns a DOMTokenList that helps the user agent select what controls to show on the media element whenever the user agent shows its own set of controls.
The DOMTokenList takes one or more of three possible values: nodownload, nofullscreen, and noremoteplayback.

71.58% support ✅

https://caniuse.com/?search=controlslist


<div class="video-wapper">
  <h2>默认，不使用 controlslist</h2>
  <video
     controls
     src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
  </video>
</div>

<div class="video-wapper">
  <h2>controlslist="nodownload" 单个值</h2>
  <video
     controls
     controlslist="nodownload"
     src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
  </video>
</div>

<div class="video-wapper">
  <h2>controlslist="nofullscreen" 单个值</h2>
  <video
     controls
     controlslist="nofullscreen"
     src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
  </video>
</div>

<div class="video-wapper">
  <h2>controlslist="nodownload,nofullscreen,noremoteplayback" 多个值,逗号分隔 ❌</h2>
  <video
     controls
     controlslist="nodownload,nofullscreen,noremoteplayback"
     src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
  </video>
</div>

<div class="video-wapper">
  <h2>controlslist="nodownload nofullscreen noremoteplayback" 多个值， 空格分隔 ✅</h2>
  <video
     controls
     controlslist="nodownload nofullscreen noremoteplayback"
     src="https://cdn.xgqfrms.xyz/HTML5/video/controlslist.mp4">
  </video>
</div>

https://googlechrome.github.io/samples/media/controlslist.html
https://storage.googleapis.com/media-session/caminandes/short.mp4#t=80

demo

破解 js 禁用浏览器 debugger 功能

https://xiaochen1024.com/series/6196129fc1553b002e57bef5

首先在一个空白页面，打开 Chrome devtools, 选择单独窗口 模式

dock into a separate window

禁用 controlslist="nodownload" 属性

<div class="videoWapper">
  <video controls="" controlslist="nodownload" class="video" src="https://mpvideo.qpic.cn/0bc3qiaa4aaaauaeiemdarqvbawdb2baadqa.f10002.mp4"></video>
</div>

<div class="videoWapper">
  <video controls="" class="video" src="https://mpvideo.qpic.cn/0bc3qiaa4aaaauaeiemdarqvbawdb2baadqa.f10002.mp4"></video>
</div>