javascript - 如何通过 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()是一个 jQuery 方法。 html5 <video> 标签确实有一个属性 muted .所以这两个代码示例正在检查相同的属性/属性。引用this W3 page获取所有事件和属性的列表。

在下面的示例中，我们使用 jQuery 的 .on()将事件处理程序绑定(bind)到视频事件。 checkMuteStatus 函数使用您提供的代码并添加了一些调试输出行。它还使用 $(document).ready()在绑定(bind)事件处理程序之前等待 DOM 加载完毕。要了解有关事件委托(delegate)的更多信息，请参阅 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 的内容*