Video and audio in Framer

Using video in Framer is easy: you just drag in the video file like you would an image file.

This is also why we don’t use Design in this prototype: we have to add the videos in Code anyway, so we’ll do the same with the images.

Adding audio is also easy: just drag it in. There’s only one problem, the standard Audio object doesn’t let you loop tracks without a noticeable gap.

So in this prototype we’ll use the newer Web Audio API to have high-quality, seamless audio loops. I’ll show examples of both in ‘Adding the music’.

Speaking of audio and video, here are the audio, video, and also image assets you’ll need.