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!
答案 0 :(得分:0)
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- 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: It uses the div's top position and height; so it must be executed after the page get fully loaded;
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>
video source: techslides