How does Vine implement video video playback?

Question

Vine videos automatically start when they are noticeable, how Vine implements this, are there any methods to evaluate that a video is visible?

Answer 1

Embed code adds js file. In this file, they use the setInterval loop, which checks if any of the iframe elements from the vine are in the visible viewport. If they are visible, they send a “play” message through an iframe contentWindow. Verification code currently:

var topPosition = embeds[i].getBoundingClientRect().top;
if (topPosition > -300 && topPosition < document.documentElement.clientHeight) {

You can take a look at their built-in script that controls this (line 20-42):

https://platform.vine.co/static/scripts/embed.js