如果不是点视图，我怎么能停止播放视频 [英] how can i stop video from playing if not point view

问题描述

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）{
 $（这个）[0] .stop（）; 
} 
 if（scrollTop< pos.top  -  400）{
 $（this）[0] .stop（）; 
} 
}）; 
}）; 
  

但它对我不起作用且不显示任何错误

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

解决方案

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

警告：你需要确保视频已加载至少元数据或视频元素可能会导致错误。使用 preload =auto和 canplay 事件来提前检测此阶段（此处未显示）。

  function isInView（el）{var rect = el.getBoundingClientRect（）; //视频元素返回的绝对位置！（rect.top> $（窗口）.height（）|| rect.bottom< 0）; // visible？} $（document）.on（scroll，function（）{$（video）。each（function（）{if（isInView（$（this）[0]））{//可见？if（$（this）[0] .paused）$（this）[0] .play（）; //如果不播放则播放} else {if（！$（this）[0] .paused）$（this ）[0] .pause（）; //暂停如果没有暂停}}）;}）;  

  div {width：400px;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div>< h1>向下滚动以开始视频< / h1>虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本..虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本..虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本..虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本..虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本..虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本..虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...< br>< br>虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本... Dum我的文字...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...< br>< br>虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本xt ...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...< br>< br>虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本。 ..虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本。 ..虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本。 ..虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本。 ..虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本..虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本..虚拟文本...虚拟文本...虚拟文本...< br>< br> < video loop style =width：320px; height：auto;> < source src =http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4type =video / mp4> < source src =http://clips.vorwaerts-gmbh.de/big_buck_bunny.webmtype =video / webm> < source src =http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogvtype =video / ogg> < / video>< br>< br>虚拟文字...虚拟文字...虚拟文字...虚拟文字...虚拟文字...虚拟文字...虚拟文字...虚拟文字...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...< br>< br>虚拟文字...虚拟文字...虚拟文字...虚拟文字...虚拟文字... D ummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...< br>< br>虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...< br>< br>虚拟文本...虚拟文本...虚拟文本。 ..虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本... Dummtext ...虚拟文本..虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本..虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本..虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本..虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本.. 。虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...< br>< br> < video loop style =width：320px; height：auto;> < source src =http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4type =video / mp4> < source src =http://www.html5rocks.com/en/tutorials/video/basics/devstories.webmtype =video / webm> < / video> Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ...虚拟文本...虚拟文本... Dummtext ...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...< br>< br> Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy text ... Dummy te xt ...虚拟文本...虚拟文本...虚拟文本...虚拟文本... Dummtext ...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文本...虚拟文字...< br>< br>< / div>  

js to play videos in my site

but i wanna stop playing the video if not in view point

i make this 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 it not work for me and not show any error

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

解决方案

You can use this code to detect if an element is in view or not. Iterate each video element, if isInView() is true, start video, if not pause it if not paused already.

Caveats: you need to make sure the video has loaded at least metadata or the video element may cause errors. Use preload="auto" and the canplay event to detect this stage in advance (not shown here).

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>

这篇关于如果不是点视图，我怎么能停止播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！