video标签设置controlsList="nodownload"后autoplay失效如何解决

需要实现video标签两个效果：

• 隐藏控件栏的下载按钮
• 保留自动播放功能
  实际使用controlsList="nodownload"属性后，下载按钮成功隐藏，但autoplay自动播放失效。
  原有实现代码：
  CSS部分：

video {
  width: 100%;
  height: 100%;
}

HTML部分：

<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls autoplay controlsList="nodownload"/>

controlsList="nodownload"本身和autoplay属性没有逻辑冲突，自动播放失效是现代浏览器的默认自动播放限制导致的：所有Chromium内核浏览器、Firefox、Safari都默认禁止非静音状态的音视频自动播放，只有满足以下任一条件时自动播放才会生效：

• 视频处于muted静音状态
• 用户已经和当前页面产生过点击、触摸等交互行为
  属性添加后出现的失效只是触发时机的巧合，不是两个属性互斥。

通用无依赖方案（推荐） #

直接给video标签添加muted静音属性，即可同时满足自动播放规则、保留隐藏下载按钮的效果，适配所有主流浏览器，不需要额外写JS。
修改后的HTML代码：

<video
  src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  controls
  autoplay
  muted
  controlsList="nodownload"
/>

原有CSS代码不需要调整，直接复用即可。如果需要用户手动打开声音，控件栏自带的音量按钮可以正常点击取消静音，不影响使用。

带声自动播放方案 #

如果要求视频加载后自动播放且默认有声音，不能依赖原生autoplay属性，需要等用户和页面产生首次交互后，手动调用视频的play()方法触发播放，该场景下controlsList="nodownload"的效果完全不受影响。
参考实现代码：

// 获取页面上的video元素
const video = document.querySelector('video')

const playOnFirstInteract = () => {
  // 手动触发播放
  video.play().catch(e => {
    // 捕获异常避免控制台报错
    console.warn('自动播放触发失败', e)
  })
  // 首次交互触发后移除监听，避免重复执行
  document.removeEventListener('click', playOnFirstInteract)
  document.removeEventListener('touchstart', playOnFirstInteract)
}
// 监听用户首次点击、触摸交互
document.addEventListener('click', playOnFirstInteract)
document.addEventListener('touchstart', playOnFirstInteract)

不要通过CSS穿透shadow DOM的方式强行隐藏原生控件里的下载按钮，不同浏览器、不同版本的原生控件内部结构差异极大，这种写法兼容性极差，很容易在部分环境下失效。controlsList是HTML标准定义的原生控件配置属性，是目前隐藏下载按钮最稳定的方案。

内容的提问来源于stack exchange，提问作者seriously