complete code of mute button

[dannohd]

Hi, i'm having problems to make a button mute the bigvideo sound. I've seen other post here about it, but since i'm a noob, i don't get the complete picture. I have tried to use the codes i've have found here, but it doesn't work. I know it is me who is doing something wrong. can you please help me.

Thanks a lot. this is the code so far:

// initialize BigVideo $(function() { var BV = new $.BigVideo({useFlashForFirefox:false}); BV.init(); BV.show('videos/movie.mp4',{ambient:false, doLoop:true, altSource:'videos/movie.ogv'}); // To initially mute the volume BV.getPlayer().volume(0) $('.mute').addClass('muted'); // Use this to toggle $('.mute').toggle(function(){ BV.getPlayer().volume(1); $(this).removeClass('muted'); }, function() { BV.getPlayer().volume(0); $(this).addClass('muted');
}); });

<div id="volume"><a href="#" class="mute"></a></div>

---------------------------------------------------CSS--------------------------------------------------------- a.mute { display:table; width:25px; height:30px; float:left; background:url(../images/mute-on.png); background-position:0 0; } a.mute:hover{ display:table; width:25px; height:30px; float:left; background:url(../images/mute-on.png); background-position:2px 2px; }

volume {

position:fixed;
top:20px;
right:110px;
z-index: 999;

}

[Mattajames]

Did you fix this as I would like to know how this works also?

Matt

[jdkarate]

Anyone have an answer? This is also something that I would be interested in. I have seen the same code as mentioned above but I don't quite understand how to make the mute button work correctly.

[hubdotcom]

Working example

JS:

    $('.home-volume').toggle(function(){
         BV.getPlayer().volume(0);
         $(this).children('i').removeClass('fa-volume-up');
         $(this).children('i').addClass('fa-volume-off');
    }, function() {
         BV.getPlayer().volume(1);
         $(this).children('i').removeClass('fa-volume-off');
         $(this).children('i').addClass('fa-volume-up');
    });

HTML: <div class="home-volume"><i class="fa fa-fw fa-volume-up"></i>

CSS:

  .home-volume {
    color: white;
    position: fixed;
    bottom:0;
    padding-bottom: 10px;
    font-size: 40px;
    z-index: 10;
    text-align: center;
    width: 100%;
    display: none;
    cursor: pointer;
}
  .home-volume .fa-fw{

      text-align: left;
  }
  .home-volume .fa-fw:before{
    text-shadow: 0px 0px 1px #000;
  }