Как определить позицию блока при скроллинге относительно экрана?

Question

[Анна]

Есть документ.
В нем есть блок с видео, которое должно проигрываться только тогда, когда блок появляется на экране:
высока экрана = 768px
позиция блока = 1910px
высота блока = 450px
Видео маленькое, mах 1 мин. (не background)
при появлении на экране должен - play()
если же еще не появлялся на экране или уже ушел с зоны видимости - pause()
Как отследить появление и уход блока с экрана при скроллинге на JS или jQuery?

Answer 1

[Анна]

jQuery(document).ready(function($) {
	// сохраняем выбранные элементы в переменные
	var $bgVid = $('#bgvid');
	var $window = $(window);

	// плей/пауза на клик
	$bgVid.click(function() {
		$(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause();
	});

	// обсчет значения когда проигрывать видео
	function bgVidInit($el) {
		var result = {};
		result.winH = $(window).height();
		result.elH = $el.height();
		result.elOffset = $el.offset();
		result.elViewFrom = result.elOffset.top - result.winH;
		result.elViewTo = result.elOffset.top + result.winH - result.elH;
		return result;
	}

	// изначально пересчитываем значения когда проигрывать видео
	var bgVidPos = bgVidInit($bgVid);

	// при изменении размера экрана пересчитываем значения когда проигрывать видео
	$window.resize(function() {
		bgVidPos = bgVidInit($bgVid);
	});

	// проверяем виден ли элемент на экране
	function bgVidStatus($el, elPos) {
		// проверяем элемент виден на экране
		if ($window.scrollTop() > elPos.elViewFrom && $window.scrollTop() < elPos.elViewTo) {
			if ($el.get(0).paused) {
				$el.get(0).play()
			}
		} else {
			// если не на паузе, то поставить на паузу
			if (!$el.get(0).paused) {
				$el.get(0).pause();
			}
		}
	}

	// подписываемся на событие скролл. При каждом изменении положения скролла будет вызвана функция
	$window.scroll(function() {
		bgVidStatus($bgVid, bgVidPos);
	});
});

Большое спасибо знакомому, который помог, объяснил и ткнул носом

Answer 2

[Alex]

https://github.com/ressio/lazy-load-xt#iframe-embe...

И автоплей к нему

Comments

[Alex]

Анна Какая разница откуда видео? Принцип то один и тот же!