javascript - 如何在滚动时自动静音/取消静音 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 滚动到 View 之外时，我发现它位于顶部。

编辑

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

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