Мой вопрос связан с этим вопросом.
Я устанавливаю видео на своей странице на Autoplay. Итак, все они начинают играть одновременно. Есть ли способ, они играют только тогда, когда я прокручиваю эту часть страницы. Это моя страница < /p>
html < /strong> < /p>
Your browser does not support the video tag.
< /code>
css < /strong> < /p>
#tv_container {
width: 360px;
height: 800px;
position: relative;
}
#tv_container:after{
content: '';
display: block;
background: url('http://mediacentral.ie/snapchat/wp-cont ... 2/Cell.jpg') no-repeat;
width: 100%;
height: 100%;
left: 0px;
< /code>
js < /strong> < /p>
var bindScroll = function(ele, evt, fcn) {
ele[window.addEventListener ? 'addEventListener' : 'attachEvent']( window.addEventListener ? evt : 'on' + evt, fcn, false);
}
var scrollPos = function() {
var doc = document.documentElement;
return {
'left': (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0),
'top': (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
};
}
var playerOffset = document.getElementById('vid1').offsetTop;
var scrollPlayed = false;
var playerInView = function() {
var diff = playerOffset - scrollPos().top;
var adjust = window.innerHeight > (480/2) ? window.innerHeight : 100;
return diff > -100 && diff < adjust;
}
var checker = null;
bindScroll(window, 'scroll', function(e) {
clearTimeout(checker);
if(!scrollPlayed && playerInView()) {
checker = setTimeout(function() {
vid1.play(true);
scrollPlayed = true;
}, 100);
}
});
Подробнее здесь: https://stackoverflow.com/questions/354 ... he-webpage
