I've got some fullscreen video backgrounds that I want to play once they're scrolled into view. The code I'm using for the video running is as follows.
autoplay.
To know when some element appears in the viewport yo can use jquery.appear plugin
$('someselector' ).on ('appear' , function (event, $all_appeared_elements ) {
});
$('someselector' ).on ('disappear' , function (event, $all_disappeared_elements ) {
});
Copy If you don't want to use this jQuery plugin, in this StackOverflow question the accepted response to know where some element is scrolled into view is:
function isScrolledIntoView (elem )
{
var docViewTop = $(window ).scrollTop ();
var docViewBottom = docViewTop + $(window ).height ();
var elemTop = $(elem).offset ().top ;
var elemBottom = elemTop + $(elem).height ();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
Copy
Post a Comment for "Html5 Video Play Once Scrolled Into View."