如何淡入和淡出视频中添加的控件，如默认控件

<div id="video-container">
  <video id="video" src="your-video.mp4"></video>
  <div id="controls">
    <!-- 默认控件 -->
    <button id="play-button">播放</button>
    <div id="progress-bar"></div>
    <!-- 其他控件 -->
  </div>
</div>

#controls {
  opacity: 0; /* 初始透明度为0 */
  transition: opacity 0.5s; /* 过渡效果持续时间为0.5秒 */
}

#controls.show {
  opacity: 1; /* 淡入效果，透明度为1 */
}

var video = document.getElementById('video');
var controls = document.getElementById('controls');

video.addEventListener('play', function() {
  controls.classList.add('show'); // 添加show类名，触发淡入效果
});

video.addEventListener('pause', function() {
  controls.classList.remove('show'); // 移除show类名，触发淡出效果
});

video.addEventListener('ended', function() {
  controls.classList.remove('show'); // 视频结束时同样触发淡出效果
});