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()
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.
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.