【发布时间】：2013-03-21 23:44:52
【问题描述】：
我正在使用 HTML5 媒体 API 并坚持使用它的静音属性。我有这个静音按钮，当我点击它时，我想用它来静音和取消静音特定视频的音频。问题是，只要我将其静音，它就可以工作，但我无法取消静音。类和标题值被正确设置为适当的值，但音量或图标图像没有变化。这是我的 jsfiddle 代码http://jsfiddle.net/7AS3C/1/ 的链接，当我将代码上传到 jsfiddle 时，不会发生 CSS 问题。如果有人帮助我使用 javascript，我将不胜感激。
<div id="mediaplayer">
<video id="media-video" controls>
<source src='http://video.webmfiles.org/big-buck-bunny_trailer.webm' type='video/webm' controls>
</video>
<div>
<div id="media-controls">
<progress id="progress-bar" min="0" max="100" value="0"></progress>
<button id='replay-button' class='replay' title='replay' onclick='replayMedia();'>Replay</button>
<button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'>Play</button>
<button id='stop-button' class='stop' title='stop' onclick='stopPlayer();'>Stop</button>
<button id='volume-inc-button' class='volume-plus' title='increase volume' onclick='changeVolume("+");'>Increase volume</button>
<button id='volume-dec-button' class='volume-minus' title='decrease volume' onclick='changeVolume("-");'>Decrease volume</button>
<button id='mute-btn' class='mute' title='mute' onclick='toggleMute();'>Mute</button>
</div>
</div>
</div>
这是css
.unmute {
width:45px;
height:48px;
background:url('mute.png');
background-position: 0px 0px;
}
.mute {
width:45px;
height:48px;
background:url('unmute.png');
background-position: 0px 0px;
}
这是我的 javascript
muteBtn = document.getElementById('mute-btn');
function toggleMute() {
if (player.muted = false) {
changeButtonType(muteBtn, 'mute');
player.muted = "true";
} else if (player.muted = true) {
changeButtonType(muteBtn, 'unmute');
player.muted = "false";
} else player.muted = "false";
}
function changeButtonType(buttonType, value) {
buttonType.title = value;
buttonType.innerHTML = value;
buttonType.className = value;
}
【问题讨论】：
-
您确定课程更改正确吗？听起来不像。有演示吗？
-
抱歉，我的电脑上有。如果有人没有答案，请尝试将其上传到 JSFiddle。此外，类名已正确更改，我也使用相同的功能来更改其他类的类名，它们工作得很好。
-
做一些日志记录 (
console.log()) 以确定changeButtonType()是否真的在静音和取消静音事件上被触发。 -
我已经完成了那个伙伴。那里一切都很好。我使用 chrome 检查是否还设置了类名和标题。它们实际上设置为正确的。
-
我将错误的字符串传递给函数......这就是问题所在。谢谢你们的帮助。
标签： javascript css html media