如何通过JavaScript检测视频是否静音？

Question

到目前为止我已经找到了如何检测音频元素是否暂停，我可以在下面使用这个函数（顺便告诉我 aud_play_pause 功能以及我可以从哪里了解更多）

function aud_play_pause()

但是，我不知道如何检测视频是否静音，我只有下面的代码。通过检测，我的意思是这段代码可以运行本身而无需任何事件，例如点击。

 if ( $("video").prop('muted') ) {
$("#m-v").removeClass('on').addClass('off');
 } else { 
$("#m-v").removeClass('off').addClass('on');
 };

或者这个，它们是一样的吗？

if (video.muted === true;) {    
$("#m-v").removeClass('on').addClass('off');
} else {
$("#m-v").removeClass('off').addClass('on');
 };

Answer 1

.prop() is a jQuery method. The html5 <video> tag does have a property muted. So the two code samples are checking the same property/attribute. Refer to this W3 page 获取所有事件和属性的列表。

在下面的示例中，我们在主题上使用 jQuery 的 .on() to bind event handlers to the video events. The function checkMuteStatus uses the code you provided and adds a few debugging output lines. It also uses $(document).ready() to wait until the DOM is loaded before binding the event handler. To read more about event delegation, refer to this jQuery page。

$(document).ready(function() {
  $('#video').on('play pause ended timeupdate volumechange', checkMuteStatus);  
});

function checkMuteStatus() {
  var video = $('video');
  var videoById = document.getElementById('video')
  $('#console').append('prop: ', video.prop('muted') ? 'true' : 'false', ' .muted: ', videoById.muted ? 'true' : 'false', '<br />');
  if ($("video").prop('muted')) {
    $("#m-v").removeClass('on').addClass('off');
  } else {
    $("#m-v").removeClass('off').addClass('on');
  };
}

#m-v.on {
  color: #f00;
}
#m-v.off {
  color: #0f0;
}
.float {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<video src="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.webm" controls="" id="video">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.webm">link to the video</a> instead.</p>
</video>
<div class="float">
  <div id="m-v" class="on">Mute Status</div>
  <div id="console"></div>
</div>

未知 aud_play_pause 的定义位置，但也许您正在查看类似 W3 audio example HTML/Elements/audio*

的内容

如何通过JavaScript检测视频是否静音？

How to detect whether a video is on mute via JavaScript?

html

javascript

jquery

html5-video