Layers » Video layers

Video layers

When you drag a video file into Framer’s editor, it will not create a Layer, but a VideoLayer.

videoLayer1 = new VideoLayer
    width: 320, height: 280
    video: "images/goldfish.mp4"
    x: Align.center -220
    y: Align.center
videoLayer1.player.loop = yes
videoLayer1.player.play()
Download Framer project

You can set video-related properties (e.g., loop) and control playback on the video layer’s player.

This player object gives you access to the HTML5 video element that drives the video layer.

You can drag video files only to the Code window.

The video layer on the right has HTML5 video controls

Remember that when you activate the HTML5 video controls you’ll have to set ignoreEvents on the layer to no for them to work.

# show controls
videoLayer2.player.controls = yes
# don’t ignore events for controls to work
videoLayer2.ignoreEvents = no

To listen to events emitted by the video element, you can use Events.wrap:

# Listen to paused playback
Events.wrap(videoLayer2.player).on "pause", ->
    print "Video paused"

Which video format to use

You’re best off creating MP4 videos. Use H264 as the codec and .mp4 as the file format. These will play everywhere, including on mobile.