css 音频标签最小播放按钮

qfe3c7zg 于 2023-03-05 发布在其他

关注(0)|答案(1)|浏览(153)

我想有一个极简主义的播放按钮，通过标签html5。我已经设法剥离播放按钮到最低限度，我想删除正确的一部分后，三个点，但我不知道如何做到这一点。我想剥离播放按钮的一部分所指示的红色箭头。我很好的三个点，让你改变速度，我只需要在点的权利的一部分是最小的/消失。

audio {
  width: 110px;
}

audio::-webkit-media-controls-volume-slider {
  display: none !important;
}

audio::-webkit-media-controls-timeline-container {
  display: none !important;
}

audio::-webkit-media-controls-time-remaining-display {
  display: none !important;
}

audio::-webkit-media-controls-timeline {
  display: none !important;
}

Text before the play button
<audio oncontextmenu="return false;" controls controlslist="nodownload" name="media">  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

css

来源：https://stackoverflow.com/questions/75604231/audio-tag-minimal-play-button

1条答案

按热度按时间

kulphzqa1#

元素很难达到它所需的最大宽度，即84px（因为两个期望的按钮每个是32px并且在音频元素的左/右侧上有10px的填充），很可能是因为按钮被加载，然后一些按钮被隐藏。您可以在加载时使用animation来解决宽度问题。请使其足够快，以使最终用户不会"t注意，如0.1s-下面的示例

audio {
  width: 110px;
  animation: audioWidth 0.1s forwards;
}

auto::-webkit-media-controls-panel {
  justify-content: center;
}

audio::-webkit-media-controls-volume-slider {
  display: none !important;
  min-width: 0;
}

audio::-webkit-media-controls-timeline-container {
  display: none !important;
  min-width: 0;
}

audio::-webkit-media-controls-time-remaining-display {
  display: none !important;
  min-width: 0;
}

audio::-webkit-media-controls-timeline {
  display: none !important;
  min-width: 0;
}

@keyframes audioWidth {
  from {
    width: 110px;
  }
  to {
    width: 84px;
  }
}

Text before the play button
<audio oncontextmenu="return false;" controls controlslist="nodownload" name="media">  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

赞(0）回复(0）举报 2023-03-05

我来回答

css 音频标签最小播放按钮

1条答案

相关问题

热门标签

最新问答