<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--<video id="mediaplayer" class="mute" src="https://www.w3schools.com/tags/movie.mp4" autoplay="autoplay" volume="0" controls ></video>-->
<video width="320" height="240" controls autoplay id="mediaplayer" volume="0" class="mute">
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4" >
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
$(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;
});
}
});
});
