как я могу остановить воспроизведение видеопотока, если не указать вид

JS для воспроизведения видео на моем сайтекак я могу остановить воспроизведение видеопотока, если не указать вид

, но я хочу остановить воспроизведение видео, если не точка зрения

я сделать этот код

$(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(); 
    } 
    }); 
});

, но это не работает для меня, а не показывать какую-либо ошибку

это демонстрационная страница «http://jsbin.com/yaqozihita/1/»

источник

2015-04-08 Hamad Adhbiyah

его обновить и добавить демонстрационную страницу –

Вы можете использовать этот код, чтобы обнаружить, если элемент в поле зрения или нет. Итерируйте каждый элемент видео, если isInView() истинно, запустите видео, если не приостановите его, если он не приостановлен.

Предостережения: вам необходимо убедиться, что на видео загружены хотя бы метаданные, или элемент видео может вызвать ошибки. Используйте preload="auto" и событие canplay для обнаружения этого этапа заранее (здесь не показано).

function isInView(el) { 
 
    var rect = el.getBoundingClientRect();   // absolute position of video element 
 
    return !(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 
 
    } 
 
    }); 
 
});

div {width:400px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
<h1>Scroll down to 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>

источник

2015-04-09 01:37:56 K3N

для использования в режиме паузы:

$ (this) [0] .pause();

для воспроизведения:

$ (это) [0] .play();

протестирован на светлячок и хром

источник

2015-04-08 15:40:03

А что, если есть больше чем один видео на этой странице? –

это работает, но если я перехожу к началу страницы, он воспроизводит все видео, и если я играю в видео и немного ухожу, но я все еще в точке зрения, это прекрати его –

добавьте чек на верх страницы (я думаю, scrollTop возвращает 0 в верхней позиции прокрутки) и изменить значения для двух последних проверок «If». –

как я могу остановить воспроизведение видеопотока, если не указать вид

ответ

Смежные вопросы