HTML5:音频控件没有进度条?
HTML 5: audio controls without progress bar?
我正在尝试使用 html 5 构建响应式音频流播放器。我已经实现了闪存的后备解决方案以保持与 x 浏览器兼容,但当它出现时我遇到了麻烦为播放器设置样式。
html5 音频播放器的标准示例是:
<audio id="audio" preload="auto" controls style="width:100%;">
我喜欢 html 5 音频播放器的标准控件以这种方式编码时的外观,但由于我的播放器将仅用于直播,我不希望有标准进度条, 只是 play/pause, 音量和静音。
是否可以以某种方式停用音频标签的进度条功能?到目前为止,我找到的唯一解决方案是对 html 中的每个按钮进行编码,并使用 css 对其进行样式设置。这将花费更多的时间。
感谢您的每一个提示,最诚挚的问候,
塞巴斯蒂安
使用以下代码:希望对你有用
<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>
上添加样式
希望它能达到你的目的
我正在尝试使用 html 5 构建响应式音频流播放器。我已经实现了闪存的后备解决方案以保持与 x 浏览器兼容,但当它出现时我遇到了麻烦为播放器设置样式。
html5 音频播放器的标准示例是:
<audio id="audio" preload="auto" controls style="width:100%;">
我喜欢 html 5 音频播放器的标准控件以这种方式编码时的外观,但由于我的播放器将仅用于直播,我不希望有标准进度条, 只是 play/pause, 音量和静音。
是否可以以某种方式停用音频标签的进度条功能?到目前为止,我找到的唯一解决方案是对 html 中的每个按钮进行编码,并使用 css 对其进行样式设置。这将花费更多的时间。
感谢您的每一个提示,最诚挚的问候,
塞巴斯蒂安
使用以下代码:希望对你有用
<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>
上添加样式
希望它能达到你的目的