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

Question

你好我的脚本有问题我有一个视频我想在鼠标悬停时播放视频的声音并在鼠标移开时静音我试过这个脚本但不起作用他 return 对我来说这个错误

Uncaught TypeError: Cannot set property 'muted' of undefined

<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 移动提供此：

The jQuery Mobile "vmouseover" event handler simulates the "onmouseover" event handler on mobile devices.

This plugin extends jQuery's built-in method. If jQuery Mobile is not loaded, calling the .vmouseover() method may not fail directly, as the method still exists. However, the expected behavior will not occur.

例子

$(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>

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

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

playing video's sound on mouseover

html

javascript

jquery

shopify