Clever Geek Handbook

Play html video while watching it, pause in viewport

I am trying to play my video as soon as it appears in the viewport, and when it no longer appears in the viewport, it should pause.

I've tried this so far:

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

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

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

I am using this plugin for in-viewport validation

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

This is my jsfiddle:

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

Does anyone have any idea how to do this correctly?

Thank!

+3


source to share


1 answer


Two questions:

1) You want to refer to a tag, not an ID, so there is no "#" ...

$("video:in-viewport")


2) To use the video API, you must be using a DOM object, not a jQuery object, so the last call would look something like this ...

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


source






More articles:


All Articles