首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >HTML 5:没有进度条的音频控件?

HTML 5:没有进度条的音频控件?
EN

Stack Overflow用户
提问于 2015-01-20 18:08:37
回答 1查看 2.9K关注 0票数 1

我正在尝试用html 5构建一个反应灵敏的音频流播放器。我已经实现了闪存的后备解决方案,以保持x浏览器兼容,但我遇到了麻烦,当涉及到设计播放器。

html 5音频播放器的一个标准示例是:

代码语言:javascript
运行
复制
<audio id="audio" preload="auto" controls style="width:100%;">

我喜欢html 5音频播放器的标准控件在这样编码时的外观,但是由于我的播放器只用于直播,所以我不想有标准的进度条,只想播放/暂停、音量和静音。

是否有可能以某种方式使音频标签的进度条功能失效?到目前为止,我找到的唯一解决方案是对html中的每个按钮进行编码并使用css对其进行样式设置。这将花费更多的时间。

我感谢你的每一个暗示,最好的问候,

塞巴斯蒂安

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-01-20 19:43:14

使用以下代码:希望对您运行良好

代码语言:javascript
运行
复制
<html>
<body>
<audio id="player" src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"></audio>
<div>
	<button onclick="document.getElementById('player').play()">
    <img src="http://icons.iconarchive.com/icons/icons-land/play-stop-pause/48/Play-Normal-icon.png"/>
    </button>

	<button onclick="document.getElementById('player').pause()">
    <img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-8/48/Pause-icon.png"/>
    </button>

	<button onclick="document.getElementById('player').volume+=0.1">
    <img src="https://cdn2.iconfinder.com/data/icons/perfect-flat-icons-2/48/Volume_sound_audio_speaker_music_off_high.png"/>
    </button>

	<button onclick="document.getElementById('player').volume-=0.1">
    <img src="https://cdn2.iconfinder.com/data/icons/perfect-flat-icons-2/48/Volume_down_arrow_download_up.png"/>
    </button>
</div> 
</body>
</html>

如果您想添加背景等,请在<div>上添加样式。

跳它会为你的目的工作

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28052257

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档