CSS not changing when changing class name

Sepz

New Member
I am working with the HTML5 media API and stuck at it's mute property. I have this mute button that i want to use to mute and unmute the audio for the particular video whenever i click it. The problem is that it works whenever i mute it but I cannot unmute it. The classes and title values get properly set to the appropriate values but there is no change in the volume or the icon image. Here is a link to my jsfiddle code http://jsfiddle.net/7AS3C/1/ The CSS problem doesn't occur when i uploaded the code to jsfiddle. Would really appreciate it if someone helped me out with the javascript. \[code\]<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="http://stackoverflow.com/questions/15551560/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>\[/code\]Here is the css\[code\].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;}\[/code\]Here is my javascript \[code\]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;}\[/code\]
 
Back
Top