Inverting the mute / unmute function this particular html5 video player

Question

Im wondering if you all can help me Invert the mute / unmute function for this html5 video player. Basically the function is simple: While the video is playing, it is muted. When the person overs their mouse on the video the audio unmutes. When the players mouse leaves the video, it mutes again. Please keep in mind that I do want the fade effect to still function.

I've gotten this far, but I have no idea how to invert the mute / unmute function. Below is the code. For live-demo purposes, here is the JSFiddle

 $(document).ready(function() { var backAudio = $('#mediaplayer'); var muted = false; $('.mute').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; }); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <video id="mediaplayer" class="mute" src="http://www18.online-convert.com/download-file/b7124f78114fba6bb5137d36b5429e6e/converted-14cf4fb1.mp4" autoplay="autoplay" volume="0"> </video> 

Thank you in advance!

Answer 1

Like this? As you have it now on the JsFiddle, the audio begins playing immediately.

$(document).ready(function(){
var backAudio = $('#mediaplayer');
var muted = true;
backAudio[0].volume = 0;

 $('.mute').hover(function(){
     var video = $(this);
     if (muted) {
         video.attr("disabled", "");
         backAudio.animate({volume: 1}, 1000, function () {
             muted = false;
         });
     }
     else {
         video.attr("disabled", "");
         backAudio.animate({volume: 0}, 1000, function () {
             muted = true;
         });
     }
 }); <!-- END | mute -->
}); <!-- END | mediaplayer -->

http://jsfiddle.net/fdpxw6rm/

Answer 2

Please use hover() for this. What you have described in your question makes the use of this function better than mouseover() and mouseout() .

jQuery & the DOM

Since the video is set for autoplay , you must set the initial volume for the video.

You need to set the volume directly on the DOM element. The volume property is not an attribute, so it cannot be set like:

backAudio.attr('volume', 0);

Instead, you must unwrap the jQuery element and set the volume property:

• jQuery way:

   backAudio.get(0).volume = 0; 

• Plain JavaScript

   backAudio[0].volume = 0; 

Solution

 $(document).ready(function () { var backAudio = $('#mediaplayer'); var mutedOverlay = $('#muted-wrapper'); backAudio[0].volume = 0; mutedOverlay.show(); $('.mute').hover(function () { var video = $(this); video.attr("disabled", ""); backAudio.animate({ volume: 1 }, 1000, function () { mutedOverlay.hide(); }); }, function () { var video = $(this); video.attr("disabled", ""); backAudio.animate({ volume: 0 }, 1000, function () { mutedOverlay.show(); }); }); }); // NOTE: This is not used, but could be helpful to you in the future. function isPlaying(videoEL) { if (videoEL.currentTime > 0) { return !(videoEL.paused || videoEL.ended); } return false; } 

 #container { width: 480px; height: 360px; position: relative; } #mediaplayer, #muted-wrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #muted-wrapper { display: table; z-index: 10; color: #FFFFFF; font-weight: bold; font-size: 64px; background-color: rgba(0,0,0,.7); text-shadow: 1px 1px 1px #000000; } #muted-text { display: table-cell; text-align: center; vertical-align: middle; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div id="container" class="mute"> <video id="mediaplayer" autoplay="autoplay" volume="0" src="http://www18.online-convert.com/download-file/b7124f78114fba6bb5137d36b5429e6e/converted-14cf4fb1.mp4"></video> <div id="muted-wrapper"> <div id="muted-text">Muted</div> </div> </div>