如何在滚动时自动静音/取消静音 html 视频

Question

我正在为一位客户编辑一个网站，他从未提到将包含一些 javascript 编辑，但我们来了。由于我对 js 完全不熟悉，所以我真的可以使用您的帮助。 所以，问题是，标题中有一个视频（所谓的移动设备可播放广告）。当你点击它时，你可以在声音开启的情况下玩一些游戏。我的客户想要的是当您向下滚动并且视频不再可见时静音，并在您向上滚动时取消静音。 这个网站我还没有建，我只是在编辑它。

我在这方面花了几天时间，在这里和 Google 上阅读不同的帖子和解决方案，但无论我尝试什么都没有奏效。由于我不熟悉 Javascript，我想我做错了什么。我想我不能只是复制别人的代码并期望它能够工作，但我可能必须更改变量名或其他东西。但我不知道如何改变它并让它发挥作用。

<a class="img" href="">
<iframe src="https://appsposure.com/wp-content/uploads/2019/06/bask.html" scrolling="no" frameborder="0"></iframe>  
<img class="phone-img lazyloaded" src="https://appsposure.com/wp-content/uploads/2019/06/phone-2.png" alt="" data-lazy-src="https://appsposure.com/wp-content/uploads/2019/06/phone-2.png" data-was-processed="true"><noscript><img class="phone-img" src="https://appsposure.com/wp-content/uploads/2019/06/phone-2.png" alt=""></noscript>                                
</a>

Here 是我尝试过多次的解决方案，但它不起作用，因为我可能不知道如何为我的网站调整它。

另外，here 是我正在开发的网站的链接（我说的是标题中的视频，上面有篮球运动员的视频）。

如果有人愿意帮助我，我将不胜感激，因为我已经挣扎了好几天，而且我太愚蠢了。

Answer 1

在 iframe 上添加了篮球运动员 ID

<a class="img">
<iframe id='basketball-player' src="https://appsposure.com/wp-content/uploads/2019/06/bask.html" scrolling="no" frameborder="0"></iframe>  
<img class="phone-img lazyloaded" src="https://appsposure.com/wp-content/uploads/2019/06/phone-2.png" alt="" data-lazy-src="https://appsposure.com/wp-content/uploads/2019/06/phone-2.png" data-was-processed="true"><noscript><img class="phone-img" src="https://appsposure.com/wp-content/uploads/2019/06/phone-2.png" alt=""></noscript>                                
</a>

在 html 中使用嵌入脚本。

<script>
window.addEventListener("scroll", muteOnScroll);

// function for the eventlistener
function muteOnScroll() {
    // if the iframe is out of view
    if (document.documentElement.scrollTop > 610) {
        // targeting the iframe with the id of basketball-player to turn off sound
        document.getElementById("basketball-player").volume = 0.0;
    // else the iframe must be in the view so the sound should be on
    } else {
        document.getElementById("basketball-player").volume = 1.0;
    }
}
</script>

使用 610 是因为当我将 iframe 滚动到视野之外时，我发现它位于顶部。

编辑

使用了您提供的部分内容以及其中的一些内容documentation

$(window).scroll(function() { 
    var iframe = document.querySelector('iframe');
    if ($(this).scrollTop() > 900){ 
        iframe.mute();
    } else { 
        iframe.unmute(); 
    } 
});

Answer 2

您可以使用此功能检查元素是否可见

function checkVisible(elm) {
  var rect = elm.getBoundingClientRect();
  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

来自问题Check if element is visible on screen。

然后你将一个函数附加到窗口的onscroll事件处理程序

window.onscroll = function() {
  // CODE
};

您可以使用如下代码处理正在滚动的视频：

video.muted = !checkVisible(video);

video 是视频的元素。

这个 sn-p 显示了这一点：

var video = document.getElementById('video');
var wrapper = document.getElementById('wrapper');
var videoPreviouslyVisible = false;

window.onscroll = function() {
  wrapper.style.backgroundColor = checkVisible(video) ? '#4f4' : '#f44';
  video.muted = !checkVisible(video);
};

function checkVisible(elm) {
  var rect = elm.getBoundingClientRect();
  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

body,
html {
  height: 100%;
}

#wrapper {
  height: 400%;
  background: none repeat scroll 0 0 #f44;
}

#video {
  position: absolute;
  top: 150%;
  left: 33%;
  width: 200px;
  height: 100px;
  background: none repeat scroll 0 0 #fff;
  border: 5px solid black;
}

<div id="wrapper">
  <div id="video"></div>
</div>

编辑：

我已对此进行了进一步调查，您似乎正在尝试将 IFrame 而不是 video 静音。 这是不 可能，因为它是嵌入到您的单独的html 网站。 您可能能够访问嵌入的 JavaScript 代码，但很可能需要此浏览器游戏的原始开发者的帮助。

我的回答仍然适用于任何希望在从视图中消失时使用muted 属性使任何 DOM 元素静音的用户。

我建议您联系原始开发人员并要求他实现一种方便的方法来静音实现“可玩广告”的 JavaScript 游戏引擎。