Html5 Video Play Once Scrolled Into View. May 31, 2023 Post a Comment 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) { // this element is now inside browser viewport: play video }); $('someselector').on('disappear', function(event, $all_disappeared_elements) { // this element is now outside browser viewpor: Pause/stop video? }); CopyIf 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:functionisScrolledIntoView(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 Share Post a Comment for "Html5 Video Play Once Scrolled Into View."
Post a Comment for "Html5 Video Play Once Scrolled Into View."