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

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:
Here a interesting directive that can help with this task:

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

any help is welcome! :v:

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





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