How to play a video just when the video is in viewport?

1

I’m looking for a directive or a way to play a video just when it is in viewport (visible on the screen), this is like the Instagram show videos. :blush:

I found some codes in jQuery, but I can’t make it work in my Ionic/AngularJS project.

I’m trying build a list of cards with videos playing inline, but I want to play the video just if the video is in the viewport (visible for the user).

I got to play videos inline, but the webview enables to play just 1 video per time. So I want to play the video that is in viewport.

Here is a Fiddle of what I want: http://jsfiddle.net/jAsDJ/
Here a interesting directive that can help with this task: https://github.com/thenikso/angular-inview

Or if you guys know how to keep all videos playing at the same time, is welcome too.

any help is welcome! :v:

2

Someone can show me an example (JSFiddle/Codepen) of the functions:

ionic.DomUtil.getPositionInParent(element)

and

$ionicPosition.position(element)

??

I think that this methods can help with this task of play videos just when they are in the viewport
:grin: