反转静音/取消静音功能这个特定的 html5 视频播放器

Question

我想知道你们是否可以帮我反转这个 html5 视频播放器的静音/取消静音功能。基本上功能很简单：在播放视频时，它是静音的。当此人将鼠标悬停在视频上时，音频会取消静音。当玩家鼠标离开视频时，它会再次静音。请记住，我确实希望淡入淡出效果仍然有效。

我已经做到了这一点，但我不知道如何反转静音/取消静音功能。下面是代码。对于现场演示，这里是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>

提前谢谢你！

Answer 1

像这样？正如您现在在 JsFiddle 上所拥有的那样，音频会立即开始播放。

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

请为此使用hover()。您在问题中描述的内容使此功能的使用比mouseover() 和mouseout() 更好。

jQuery 和 DOM

由于视频是为autoplay设置的，所以必须为视频设置初始音量。

您需要直接在 DOM 元素上设置音量。 volume 属性不是属性，所以不能这样设置：

backAudio.attr('volume', 0);

相反，您必须打开 jQuery 元素并设置 volume 属性：

• jQuery方式：

  backAudio.get(0).volume = 0; 
  

• 纯 JavaScript

  backAudio[0].volume = 0;
  

解决方案

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