CSS-听觉媒体

在 web 开发中，我们通常会使用音频和视频来增强用户体验。HTML 提供了 <audio> 和 <video> 标签来实现音频和视频的播放，但仅凭 HTML 标签无法对音频和视频进行样式、控制和自定义，在这时 CSS 就发挥了作用。

控制音频和视频

使用 CSS 可以自定义 <audio> 和 <video> 元素的样式，同时还可以通过 CSS 来控制音频和视频的播放。

/* 控制播放按钮 */
audio::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-start-playback-button {
  display: none;
}

/* 自定义播放按钮 */
.play-button {
  background-color: #f00;
  color: #fff;
  padding: 5px 10px;
  cursor: pointer;
}

/* 控制播放 */
.playing audio,
.playing video {
  animation-play-state: running;
}

/* 暂停播放 */
.paused audio,
.paused video {
  animation-play-state: paused;
}

自定义播放界面

通过 CSS，我们可以自定义音频和视频的播放界面，实现个性化定制。

/* 改变播放条的颜色 */
audio::-webkit-media-controls-timeline,
video::-webkit-media-controls-timeline {
  background-color: #f00;
}

/* 隐藏音量控制和全屏按钮 */
audio::-webkit-media-controls-volume-slider-container,
video::-webkit-media-controls-fullscreen-button {
  display: none;
}

/* 自定义进度条 */
.progress-bar {
  position: relative;
  width: 100%;
  height: 10px;
  background-color: #ccc;
}

.progress-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #f00;
  animation: progress-bar 5s linear infinite;
}

@keyframes progress-bar {
  100% {
    transform: translateX(50%);
  }
}

总结

CSS 可以为音频和视频的播放提供更加个性化的体验，同时也可以提高用户参与度。当然，使用 CSS 自定义播放界面的时候，也需要注意浏览器兼容性问题。