video标签 增加自定义按钮跟随controls 控制隐藏及显示

如果你想在`<video>`标签的默认控件旁边添加自定义按钮，并且可以控制其随着`controls`属性的启用或禁用而显示或隐藏，你可以这样做：

首先，在HTML中创建自定义按钮并将其放置在`<video>`下方：

<button id="custom-control-show">显示更多</button>
<video id="custom-video" controls></video>

然后，使用CSS将按钮初始状态设为隐藏：

#custom-control-show {
  display: none;
}

接下来，通过JavaScript监听`controls`属性变化，当`controls`属性为`true`时，显示按钮；反之，隐藏按钮：

document.getElementById('custom-video').addEventListener('change', function() {
  const customControl = document.getElementById('custom-control-show');
  this.controls ? customControl.style.display = 'block' : customControl.style.display = 'none';
});

当你点击自定义的“显示更多”按钮时，可以编写更复杂的逻辑来触发特定的动作，如播放、暂停、跳转等。