音频标签下载菜单未在正确的位置显示

时间:2019-06-28 18:08:24

标签: html

我正在通过php在应用程序中放置音频标签,并且该元素的dowload按钮不显示在屏幕上,有时直到它聚焦于网站的一部分并向下滚动为止

查看示例The dropdow menu is on the side of the element

<audio controls>
    <source src="https://storage-gw-br-01.voximplant.com/br06-records/2019/06/26/ZTdiZjk0YmYwNTkzZmMwOWY2NDI0ZGRlOTA2MTI1MjcvaHR0cDovL3d3dy1ici0wNi0xNDcudm94aW1wbGFudC5jb206ODA4MC9yZWNvcmRzLzIwMTkvMDYvMjYvMDdmZDc2NWM3OTViNjgzOC4xNTYxNTcxOTE1LjI5MDU5ODUubXAz?record_id=33759311">
</audio>

我可以控制此菜单吗?

1 个答案:

答案 0 :(得分:0)

最好的方法是,您可以禁用自动生成的下载按钮,并通过在音频控件后附加锚标记并将其样式设置为下载按钮来创建自己的标记。您可以通过以下代码隐藏自动生成的按钮并提供自己的下载按钮:

<audio controls controlsList="nodownload">
  <source src="https://storage-gw-br-01.voximplant.com/br06-records/2019/06/26/ZTdiZjk0YmYwNTkzZmMwOWY2NDI0ZGRlOTA2MTI1MjcvaHR0cDovL3d3dy1ici0wNi0xNDcudm94aW1wbGFudC5jb206ODA4MC9yZWNvcmRzLzIwMTkvMDYvMjYvMDdmZDc2NWM3OTViNjgzOC4xNTYxNTcxOTE1LjI5MDU5ODUubXAz?record_id=33759311" type="audio/mpeg">
</audio>
<!-- **Adding your own download button using anchor tag** -->
<a href="--Bind your video path here via php and angular js--" download>--Place download icon here like <i class="fa fa-download"></i>--</a>

这将解决您的下载上下文菜单问题