Question

到目前为止，我已经找到了如何检测音频元素是否暂停，我可以在下面使用此功能（顺便提一下，请告诉我 aud_play_pause 的功能在哪里？我可以在那里了解更多）

function aud_play_pause()

但是，我不知道如何检测视频是否静音，我只有下面的代码。通过 detection ，我的意思是这段代码可以自行运行而不会发生任何点击等事件。

 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()将事件处理程序绑定到视频事件。函数 checkMuteStatus 使用您提供的代码并添加一些调试输出行。在绑定事件处理程序之前，它还使用$(document).ready()等待DOM加载。要阅读有关事件委派的更多信息，请参阅有关该主题的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检测视频是否静音？

1 个答案: