Javascript 在视口中播放html视频，在离开视口时暂停

我试图在视频一出现在视口中就播放它，当它不再出现在视口中时，应该暂停

到目前为止，我已经试过了：

HTML代码：

<video id="video" width="320" height="240" controls>
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
  Your browser does not support the video tag.
</video><br>

<video width="320" height="240" controls>
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
  Your browser does not support the video tag.
</video>

我正在使用这个插件进行视口内检查

这是我的JSFIDLE：

有人知道如何让它正常工作吗

谢谢

两个问题：

1） 您希望引用的是标签，而不是id，因此不需要“#”

2） 要使用视频API，必须使用DOM对象，而不是jQuery对象，因此最后的调用类似于

$("video:in-viewport")[0].play();

---

谢谢，这很有效，但当我离开视口时，视频不会停止。您知道如何在离开视口时暂停视频吗？我不知道这是否是最有效的方法，但它会起作用…$（“视频”）。而不是（“视频：在视口中”）[0]。暂停（）；代码运行，但每次执行scroll“无法读取未定义的“播放”属性”如何修复时，控制台中始终显示错误it@Inderjeet你能制作一个JSFIDLE或一个代码笔来显示你的问题吗？@DanGoodspeed。我已经创建了js fiddle查看控制台在每个卷轴上显示错误…错误显示：-未捕获类型错误：无法读取未定义的属性“播放”

$("video:in-viewport")

$("video:in-viewport")[0].play();