CODEWITHSUNDEEP
javascriptcsshtmlmedia
Bazinga777
Bazinga777

Reputation: 5281

CSS not changing when changing class name

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. 

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

Here is the 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;
}

Here is my 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;
}

Upvotes: 1

Views: 1184

Answers (1)

jagzviruz
jagzviruz

Reputation: 1513

The conditional logic is assigning instead of comparing 

if (player.muted = false) {

should be 

if (player.muted === false) {

and 

player.muted = "true";

should be 

player.muted = true;

Same holds for the false block

Upvotes: 3

Related Questions