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

问题描述 投票:1回答:2

[我正在尝试使用html 5构建一个响应式音频流播放器。我已经实现了一种后备解决方案,可以通过闪存来保持与x浏览器的兼容性,但是在设计播放器样式时遇到了麻烦。

HTML 5音频播放器的标准示例为:

<audio id="audio" preload="auto" controls style="width:100%;">

我喜欢以这种方式进行编码时html 5音频播放器的标准控件的外观,但是由于我的播放器仅用于现场直播,因此我不想拥有标准的进度条,只是播放/暂停,音量和静音。

是否有可能以某种方式停用音频标签的进度条功能?到目前为止,我发现的唯一解决方案是用html编写每个按钮并使用CSS设置样式。这将花费更多时间。

我很感谢每一个提示,最诚挚的问候,

塞巴斯蒂安

html audio html5-audio
2个回答
0
投票

使用以下代码:希望对您有用

<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
投票

此答案实际上并不起作用-它同时显示播放和暂停按钮,而不是在播放时将播放替换为暂停。音量相同。奇怪。

仍在寻找解决方案,这很令人沮丧,因为每个具有编码技术知识的人都没有以直观的方式进行编码的常识。

© www.soinside.com 2019 - 2024. All rights reserved.