Improve this doc

fa-video-surface

This directive creates a Famo.us VideoSurface and loads the specified VideoUrl.

Usage

<fa-video-surface fa-video-url="vid/my-video.mp4">
</fa-video-surface>

API

Attr Type Details
faVideoUrl String

String url pointing to the video that should be loaded into the Famo.us VideoSurface
faOptions Object

Object that sets options for the Famo.us VideoSurface

Example

To use fa-video-surface, declare an fa-video-url attribute with a string url.

<fa-video-surface
           fa-video-url="vid/my-video.mp4"
           class="video"
           fa-options="{autoplay:true}">
</fa-video-surface>

Fa-video-surface accepts options via the fa-options attribute. Currently the only option supported by Famo.us is autoplay, so you will have to target other attributes for the video element like controls and loop on the renderNode after the surface deploy event fires.

var video = $famous.find('.video')[0].renderNode; video.on('deploy', function(){ var player = video._currTarget; player.controls = true; player.loop = true; player.onprogress = console.log('video is downloading'); });

Fa-video-surface can be modified via fa-modifier just like any Surface.