Question

我正在尝试在视口中播放视频，当视频不在视口中时，它应该暂停。

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

HTML code：

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

jQuery代码：

$("#video:in-viewport").play();

$(window).scroll(function(){
    $("#video:in-viewport").play();
});

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

http://www.appelsiini.net/projects/viewport

这是我的jsfiddle：

http://jsfiddle.net/hytpm3xe/2/

有没有人知道如何正常工作？

谢谢！

Answer 1

两个问题：

1）你想引用标签，而不是id，所以没有“＃”......

$("video:in-viewport")

2）要使用视频API，您必须使用DOM对象，而不是jQuery对象，因此最终调用看起来像......

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

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

1 个答案: