如何在滚动位置上使HTML5视频静音 [英] How to mute a html5 video on scrollposition

问题描述

我希望当用户滚动到div容器(#scroll)时将html5视频静音.因此，我尝试使用此代码:

I want a html5 video being muted when the user scrolls to a div container (#scroll). Therefore I tried to use this code:

  $(document).ready(function(){ 
   $(window).scroll(function(){ 
    // Der Referenzwert der minimal Höhe
    var height = $('#scroll').offset(); 
    // Die aktuelle Fensterposition (nach dem Scrollen) 
    var current = $(window).scrollTop(); 
    // Umgekehrte Logik
    if( current < height.top ){ 
        $('video').setAttribute('muted'); 
    } else { 
        $('video').removeAttribute('muted'); 
    } 
}); 
}); 

它对我不起作用，但我找不到该错误.请帮我.谢谢！

It's not working for me but I can't find the bug. Please help me. Thank you!

推荐答案

1 -第一个简单示例(普通javascript，无jQuery)如果您向下滚动滚动条450px(并取消静音)，则会使视频静音当您回到顶部时)；

1- This first simple example (plain javascript, no jQuery) mutes the video if you scrolls the scrollbar 450px down (and unmutes it when you get back to the top);

window.addEventListener("scroll", myFunction);

function myFunction() {
    if (document.documentElement.scrollTop > 450 || document.documentElement.scrollTop > 450) {
        document.getElementById("player").volume = 0.0;
    } else {
        document.getElementById("player").volume = 1.0;
    }
}

body, p {
  color: cyan;
  line-height: 50px;
}

video {
  position: fixed;
  z-index: -1;
}

<video height="200" controls autoplay loop id=player>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<p>scroll 50</p><p>scroll 100</p><p>scroll 150</p><p>scroll 200</p><p>scroll 250</p><p>scroll 300</p><p>scroll 350</p><p>scroll 400</p><p>scroll 450</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p>

2 -下一个示例使视频静音，同时将滚动条滚动到目标div的位置(离开时将其取消静音)；

2- This next example mutes the video while you scrolls the scrollbar over the target div's position (and unmutes it when you leave it);

ps:使用div的顶部位置和高度；因此必须在页面完全加载后执行；

window.addEventListener("scroll", myFunction);

function myFunction() {

  var thetarget = document.getElementById("target");
  var targetpos = thetarget.offsetTop;
  var targetheight = thetarget.offsetHeight;
  var targetpostwo = targetpos + targetheight;
  
    if (document.documentElement.scrollTop > targetpos && document.documentElement.scrollTop < targetpostwo || document.documentElement.scrollTop > targetpos &&  document.documentElement.scrollTop < targetpostwo ) {
        document.getElementById("player").volume = 0.0;
    } else {
        document.getElementById("player").volume = 1.0;
    }
}

#target {
  text-align: center;
  line-height: 400px;
  background: tomato;
  height: 400px;
  width: 100%;
  opacity: 0.4;
}

video {
  position: fixed;
  z-index: -1;
}

<video width="400" controls autoplay loop id=player>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p>
<div id=target>MUTED TARGET</div>
<p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p>

视频来源: techslides

这篇关于如何在滚动位置上使HTML5视频静音的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！