將這個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>