Media Player

Media Player with mouseover / mouseout that functions as muting and unmuting.

by Ken Watanabe

HTML

<video id="media_audio"  src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" autoplay="autoplay" type="video/webm" >
</video>

CSS

#media_audio { position:absolute; height:auto; width:400px; }

JavaScript

$(document).ready(function(){
    var backAudio = $('#media_audio');
    var muted = true;
    
    $('#media_audio').mouseover(function(){
        var video = $(this);
        if (!muted) {
            video.attr("disabled", "");
            backAudio.animate({volume: 0}, 1000, function () {
                muted = true;
            });
        }
        else {
            video.attr("disabled", "");
            backAudio.animate({volume: 1}, 1000, function () {
                muted = false;
            });
        }
    });
});