How Vine Makes Infinite Loops

The science of seamless.

vine.co

Vine made its name on the loop. Loops are great! You can watch the same few seconds over and over again, as long as it's seamless. It turns out that a lot goes into making Vines fold into themselves, and there is a pretty complex science behind the audio loop.

MP4 files (the kind that Vines are made of) aren't designed to be looped, so Vine has to do a lot of the work itself.

For pretty complicated reasons stemming from the compression process, these video files always start with a little bit of silence right at the beginning — the audio always follows the image. This means that if you just took a video you shot on your phone and looped it, the audio would always have a noticeable and jarring pop of silence whenever the loop reset.

To fix that, Vine has to cut out that silent part from the video. Whenever a video is uploaded to Vine, the app automatically cuts .05 seconds from the beginning and end of the track. It's virtually impossible to notice a missing one-tenth of a second, but viewers certainly notice a ruined loop. That's step one. The next part involves the actual looping process.

Say your video is loud at the beginning and quiet at the end. Or there's any change in sound, really, in the six seconds of your Vine. That also detracts from the loop quality. To deal with that, Vine automatically crossfades the audio of a loop, taking the audio from the beginning and mixing it into the end of the Vine. The volume of the previous loop is gradually lowered, and the next loop's is gradually raised. By the time you're watching a reset loop, you've already been listening to it.

Essentially, Vine is acting like a DJ, taking a video and mixing it back into itself.

All of this makes the video loop-ready, but it's not the whole process.

The final step is getting the built-in iOS video player to automatically loop. While the player can repeat videos, it was not made to deal with Vine's infinite looping and automatically includes a pause when restarting a video. To get around that requires some math.

Vine renders the videos virtually in the phone's memory. It can render up to 50 loops, all ready to play seamlessly, but it averages 25 once all the crossfades and trims are applied. In case you ever needed the equation to know how they make this work, it's this:

var numOfCopies = 25 * 6.5 / duration

numOfCopies = max(25, min(numOfCopies, 50))

Which is a smart way to make what is often a very dumb thing work fantastically great.

vine.co
Skip to footer