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

11 浏览
0 Comments

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

我正在为一个客户编辑一个网站，他从未提到过会包含一些JavaScript编辑，但现在我们不得不面对这个问题。由于我对js一点都不熟悉，我真的真的非常需要你的帮助。

事情是这样的，在页眉中有一个视频（所谓的移动可播放广告）。当你点击它时，你可以播放带有声音的游戏。我的客户希望的是，当你向下滚动并且视频不再可见时，将声音静音，并在向上滚动时取消静音。

我没有建立这个网站，我只是在编辑它。

我花了几天时间阅读这个问题的不同帖子和谷歌上的解决方案，但无论我尝试什么都不起作用。由于我对JavaScript不熟悉，我猜我做错了什么。我猜我不能只是复制别人的代码，期望它能工作，而是可能需要更改变量名或其他东西。但我不知道如何改变它并使其工作。

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

此外，这里是我正在工作的网站的链接（我在谈论页眉中的视频，上面有一个篮球运动员）。

如果有人愿意帮助我，我会非常感激，因为我已经苦苦挣扎了几天，我只是太笨了。

0

2 答案

0 Comments

问题的出现原因：在网页中嵌入了一个视频，希望在滚动页面时自动将视频静音，但是尝试了多种方法都无法实现。

解决方法：使用JavaScript编写脚本，在滚动事件中判断滚动距离，当滚动距离超过一定值时，将视频的音量设置为0，实现静音效果。

文章内容如下：

最近我在网页中嵌入了一个视频，希望在滚动页面时自动将视频静音，但是尝试了多种方法都无法实现。下面是我尝试的一些代码：

在iframe标签上添加了basketball-player的id：

然后在HTML中使用了嵌入脚本的方式：

我尝试了使用610作为滚动距离的阈值，因为当我将iframe滚动到超出视图时，滚动距离大约为610。

但是，不知道为什么，这段代码并没有起作用。我在iframe上添加了id，但是什么都没有发生。我没有提到网站是使用WordPress和Oxygen Builder构建的，其中有独立的PHP、HTML、CSS和JavaScript字段。我将你提供的代码添加到了JavaScript字段中，其中还有其他脚本和jQuery。

最初，这个视频在滚动时是暂停的，但是我的客户希望去除暂停功能，只保留静音功能。以下是最初使用的代码，也许可以帮到你：

jQuery(window).scroll(function() { 
    if (jQuery(this).scrollTop() > 900){   
        var closeGame = jQuery('header iframe');        
        closeGame.detach();    
        jQuery('.close-game').css('display', 'none'); 
    } else{   
        closeGame.appendTo('header .col-md-7 .img');   
    } 
});

抱歉打扰你了，你还有什么其他想法吗？我尝试了一些修改，希望可以帮到你。

对不起，不知道为什么还是不起作用。你可以检查一下，也许是因为我的服务器缓存的原因，我不确定。这个静音功能真的会让我崩溃。我不知道，也许还有其他东西阻止这段代码的运行，这可能吗？

你能给我发一封邮件到jelenabrocilovic.com吗？

0
0 Comments

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

有时我们希望在用户滚动页面时自动静音或取消静音HTML视频。下面是一个解决这个问题的方法：

首先，我们可以使用以下函数来检查元素是否可见：

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](https://stackoverflow.com/questions/5353934)。

然后，我们可以将一个函数附加到窗口的`onscroll`事件处理程序上：

window.onscroll = function() {
  // 代码
};

接下来，我们可以使用以下代码来处理滚动时视频的静音：

video.muted = !checkVisible(video);

其中，`video`是视频元素的标识符。

以下代码段展示了这一过程的实际操作：

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;
}

编辑：

我进一步研究了一下，发现您尝试的是静音一个**IFrame**而不是一个**video**。这是**不可能**的，因为它是一个嵌入到您的网站中的独立html网站。您可能能够访问嵌入的JavaScript代码，但这很可能需要原始开发人员的帮助。我的回答仍然适用于任何希望在视图消失时静音任何DOM元素的用户。我建议您与原始开发人员联系，并要求他实现一种方便的方法来静音JavaScript游戏引擎中实现的“可玩广告”。

0