如果不是点视图，我怎么能停止播放video

js在我的网站上播放video

但我想停止播放video，如果不是在视点

我做这个代码

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

但它不适合我，也没有显示任何错误

这是演示页面“ http://jsbin.com/yaqozihita/1/ ”

Answer 1

您可以使用此代码来检测元素是否在视图中。 迭代每个video元素，如果isInView（）为真，则启动video，如果没有暂停则暂停，如果没有暂停。

注意事项：您需要确保video至少加载了元数据，否则video元素可能会导致错误。 使用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;} 

  
 
Scroll down to start video
 Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... 

 Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... 

 Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... 

 Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... 

  

 Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... 

 Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... 

 Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... 

 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 ... 

  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 ... 

 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 ... 

  

Answer 2

暂停使用：

$（本）[0] .pause（）;

用于游戏：

$（本）[0] .play（）;

在firefox和chrome上测试过