如何在滚动位置静音html5视频-Java 学习之路

当用户滚动到div容器（#scroll）时，我想要将html5视频静音 . 因此我尝试使用此代码：

$(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'); 
    } 
}); 
});

它不适合我，但我找不到错误 . 请帮我 . 谢谢！

1 回答

1 - 如果您向下滚动滚动条450px，则第一个简单示例（普通javascript，没有jQuery）会使视频静音（当您返回顶部时取消静音）;

window.addEventListener("scroll", myFunction);

function myFunction() {
    if (document.body.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的位置时将视频静音（并在离开时取消静音）;

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.body.scrollTop > targetpos && document.body.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

回复于 2024-05-07T02:35:42+08:00

如何在滚动位置静音html5视频

1 回答

相关问题