Question

你好，我的脚本有问题，我有视频，我想在鼠标悬停时播放视频的声音，并在鼠标悬停时将其静音我尝试了此脚本，但不起作用他为我返回了这个错误

未捕获的TypeError：无法设置未定义的属性“静音”

<script>
    window.onload = function(){
    document.getElementById("sos").onmouseover = function() {mouseOver()};
			document.getElementById("sos").onmouseout = function() {mouseOut()};
        function mouseOver() {
          document.getElementById("sos").video.muted = "false";
        };
    function mouseOut() {
          document.getElementById("sos").video.muted = "true";
    };}
  </script>

<video id="sos" width="100%" height="100%" autoplay muted loop src="https://cdn.shopify.com/s/files/1/0329/9960/4283/files/Bird_jingle_compress.mp4?v=1591684742"></video>

谢谢

Answer 1

请考虑以下示例。

function toggleMute(el) {
  el.muted = !(el.muted);
}

window.onload = function() {
  document.getElementById("sos").onmouseover = function() {
    toggleMute(this);
  };
  document.getElementById("sos").onmouseout = function() {
    toggleMute(this)
  };
}

<video id="sos" width="100%" height="100%" autoplay muted loop src="https://cdn.shopify.com/s/files/1/0329/9960/4283/files/Bird_jingle_compress.mp4?v=1591684742"></video>

我听不到视频的音频，但是当我显示控件时，可以看到它从“静音”更改为“音量已满”。不确定视频是否有音轨，所以我可能会测试另一个视频。

备用

您询问有关在移动浏览器中使用MouseOver / MouseOut事件的问题。这根本不存在，因为没有“鼠标”，因此也没有鼠标移动来跟踪。

jQuery Mobile提供以下功能：

jQuery Mobile "vmouseover"事件处理程序在移动设备上模拟“ onmouseover”事件处理程序。

此插件扩展了jQuery的内置方法。如果未加载jQuery Mobile，则调用.vmouseover()方法可能不会直接失败，因为该方法仍然存在。但是，不会发生预期的行为。

示例

$(function() {
  function toggleMute(el) {
    el.muted = !(el.muted);
  }
  $(document).on("vmouseover mouseover", "#sos", function(e) {
    console.log(e.type);
    toggleMute(this);
  });
  $(document).on("vmouseout mouseout", "#sos", function(e) {
    console.log(e.type);
    toggleMute(this);
  });
})

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

<video id="sos" width="100%" height="100%" autoplay muted loop src="https://cdn.shopify.com/s/files/1/0329/9960/4283/files/Bird_jingle_compress.mp4?v=1591684742"></video>

如您所见，这两个事件都是在普通浏览器中触发的。使用Mobile Browser测试时，仅应触发虚拟鼠标事件。结果可能会有所不同，并且此库自2014年以来未更新。

鼠标悬停时播放视频的声音

1 个答案: