jquery - how can i stop video from playing if not point view -

jquery - how can i stop video from playing if not point view -

js play videos in site

but wanna stop playing video if not in view point

i create code

$(document).on("scroll", function() { var scrolltop = $(window).scrolltop(); $( "video" ).each(function() { var pos = index.position(); if (scrolltop < pos.top + 100) { $(this)[0].play(); } if (scrolltop > pos.top + 400) { $(this)[0].stop(); } if (scrolltop < pos.top - 400) { $(this)[0].stop(); } }); });

but not work me , not show error

this demo page "http://jsbin.com/yaqozihita/1/"

you can utilize code observe if element in view or not. iterate each video element, if isinview() true, start video, if not pause if not paused already.

caveats: need create sure video has loaded @ to the lowest degree metadata or video element may cause errors. utilize preload="auto" , canplay event observe stage in advance (not shown here).

class="snippet-code-js lang-js prettyprint-override">function isinview(el) { var rect = el.getboundingclientrect(); // absolute position of video element homecoming !(rect.top > $(window).height() || rect.bottom < 0); // visible? } $(document).on("scroll", function() { $( "video" ).each(function() { if (isinview($(this)[0])) { // visible? if ($(this)[0].paused) $(this)[0].play(); // play if not playing } else { if (!$(this)[0].paused) $(this)[0].pause(); // pause if not paused } }); }); class="snippet-code-css lang-css prettyprint-override">div {width:400px;} class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <h1>scroll downwards start video</h1> dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... <br><br> dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... <br><br> dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... <br><br> dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... <br><br> <video loop style="width:320px;height:auto;"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg"> </video> <br><br> dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... <br><br> dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... <br><br> dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... <br><br> dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummtext ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... <br><br> <video loop style="width:320px;height:auto;"> <source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4"> <source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm"> </video> dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummtext ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... <br><br> dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummtext ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... dummy text ... <br><br> </div>

jquery html5 html5-video video.js