原生 audio, video 标签 controls 的修改

最近项目中有个录音回放功能，播放控件只需要：显示时间；播放暂停；拖动进度；静音。心想这不原生 audio 标签直接拿下？然鹅世事难料，就有了后面的心路历程

阅读本文大概需要 5 分钟（本文没什么技术含量，可当作工具文章对待）

1. 问题产生

使用原生 audio 标签

    <audio controls autoplay/>

controls: 显示播放控件。如果不设置，看不到 audio标签
autoplay: 设置音频后自动播放

一切顺利，但右侧出现了一个点点点的按钮，这三个点怎么隐藏呢？网上搜方案搜的我肝肠寸断

2. 先上总结

网上都能搜得到，这里做一个汇总

功能	对应代码
禁用全屏	`controlslist="nofullscreen"`
隐藏倍速播放	`controlslist="noplaybackrate"`
隐藏下载	`controlslist="nodownload"`
隐藏远程播放	`controlslist="noremoteplayback"`
隐藏画中画	`disablePictureInPicture="true"`
隐藏右键	`oncontextmenu="return false"`
👇样式修改，大家自己玩👇	备注：`-internal`开头的样式这样改不了！
隐藏全屏按钮	`<style>video::-webkit-media-controls-fullscreen-button{display:none;}</style>`
隐藏播放按钮	`<style>video::-webkit-media-controls-play-button{display:none;}</style>`
隐藏音量调节	`<style>video::-webkit-media-controls-volume-control-container{display:none;}</style>`
隐藏进度条	`<style>video::-webkit-media-controls-timeline{display:none;}</style>`

样式 display:none 只是举例子，样式大家可以自行定义

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>little video</title>
</head>
<body>
  <video 
      src="https://vjs.zencdn.net/v/oceans.mp4" controls autoplay
      controlslist="nofullscreen nodownload noplaybackrate noremoteplayback"
      disablePictureInPicture="true"
      oncontextmenu="return false"
  ></video>
</body>
<style>
    video::-webkit-media-controls-fullscreen-button{display:none;}
    video::-webkit-media-controls-play-button{display:none;}
    video::-webkit-media-controls-volume-control-container{display:none;}
    video::-webkit-media-controls-timeline{display:none;}
</style>
</html>

3. 细节补充

3.1 官方的 controlslist

官网搜到的 controlslist 的用法：

The controlslist attribute, when specified, helps the user agent select what controls to show on the media element whenever the user agent shows its own set of controls. Its value must be an unordered set of unique space-separated tokens that are ASCII case-insensitive. The allowed values are nodownload, nofullscreen, and noremoteplayback.

nodownload
nofullscreen
noremoteplayback

当我们使用 video 标签的时候，才会用到这三个功能。也就是这时候，可以通过 controlslist 将他们隐藏

（其实并没有上面提到的 noplaybackrate，这条是野路子，CSDN搜到的）

3.2，修改 controls 的修改样式

隐藏嘛，还不就是一个 display: none 的事儿，直接 F12 走起。

但你会发现，虽然 controls 上有很多元素，但是 F12 中只能看到一个 audio 标签，其他的啥也没有。这里我们需要一个“黑科技”

4. 为什么一定要用原生 audio

因为功能很简单，我又有点“洁癖”

所以始终觉得没必要自己写播放UI，监听 audio 的回调事件
也不想引入第三方的库（例如 VideoJs，videojs 自定义 controls 很方便）