如何删除HTML5音频标签中的下载选项?

polkgigr  于 2023-11-15  发布在  HTML5
关注(0)|答案(5)|浏览(359)

我正在维护的网站上使用HTML5 audio标签。我注意到audio标签中嵌入了一个下载图标。如何删除该选项?我希望仅读取(播放)音频。是否有方法在不使用JavaScript或jQuery的情况下做到这一点?我还不知道这两种方法。

unhi4e5o

unhi4e5o1#

要从UI中删除下载选项,请添加controlsList=“nodownload”属性

  1. <audio
  2. controls
  3. controlsList="nodownload">
  4. </audio>

字符串

zysjyyx4

zysjyyx42#

试试这个可能对你有帮助。这不是最好的方法,但我认为它会解决你的问题。

  1. audio::-webkit-media-controls-enclosure {
  2. overflow:hidden;
  3. }
  4. audio::-webkit-media-controls-panel {
  5. width: calc(100% + 30px); /* Adjust as needed */
  6. }

字符串

bgibtngc

bgibtngc3#

audio元素界面上没有任何东西只控制下载按钮。有controls属性,这是一个布尔属性,只是显示或隐藏音频UI上的所有控件。

b09cbbtk

b09cbbtk4#

这是我用来获得所需结果的函数。希望它能帮助你.

  1. function disable_audio_download() {
  2. ?>
  3. <script>
  4. document.querySelectorAll('.wp-block-audio audio').forEach(function(audio) {
  5. audio.setAttribute('controlsList', 'nodownload');
  6. });
  7. </script>
  8. <?php

字符串
} add_action('wp_footer','disable_audio_download');

klsxnrf1

klsxnrf15#

只需将controlsList="nodownload"添加到controls的正上方,如下所示:

  1. <audio
  2. id="audio-element"
  3. controlsList="nodownload"
  4. controls
  5. className="w-full rounded-lg p-2 bg-gray-200 border border-gray-400"
  6. >
  7. <source
  8. src={`http://localhost:3000/api/audiobook/stream/${audioBook?._id}`}
  9. type="audio/mpeg"
  10. />
  11. Your browser does not support the audio element.
  12. </audio>

字符串

相关问题