Editor

ef-thumbnail-strip

Frame thumbnail visualization for a video or timegroup.

Renders a strip of video frame thumbnails at a given pixels-per-ms density. Valid targets are ef-video elements or root ef-timegroup elements.

html

<ef-thumbnail-strip
  target="my-video"
  thumbnail-height="56"
  use-intrinsic-duration
  style="display: block; width: 100%; height: 56px;"
></ef-thumbnail-strip>

Attributes

Filter attributes13 of 13

`duration`

React prop: duration
Type: number
Default: —
Description: Trimmed clip duration in seconds, used to lay out thumbnail slots.

`height`

React prop: height
Type: number
Default: —
Description: Height of the strip in pixels (defaults to the element's rendered height, or 32).

`pixels-per-second`

React prop: pixelsPerSecond
Type: number
Default: 100
Description: Zoom level — pixels rendered per second of composition time.

`scroll-left`

React prop: scrollLeftInClip
Type: number
Default: —
Description: Clip-local scroll offset of the timeline viewport's left edge.

`sourcein`

React prop: sourcein
Type: string
Default: —
Description: Start time within the source video (CSS time, e.g. "1.5s"), mirrored from the source <ef-video>.

`sourceout`

React prop: sourceout
Type: string
Default: —
Description: End time within the source video (CSS time), mirrored from the source <ef-video>.

`src`

React prop: src
Type: string
Default: ""
Description: URL of the source video file to generate thumbnails from.

`thumbnail-spacing-px`

React prop: thumbnailSpacingPx
Type: number
Default: —
Description: Minimum spacing between thumbnails in pixels (defaults to thumbnailWidth).

`thumbnail-width`

React prop: thumbnailWidth
Type: number
Default: —
Description: Width of each thumbnail in pixels (defaults to a value derived from height).

`trimend`

React prop: trimend
Type: string
Default: —
Description: Trims this much off the end of the clip (CSS time), mirrored from the source <ef-video>.

`trimstart`

React prop: trimstart
Type: string
Default: —
Description: Trims this much off the start of the clip (CSS time), mirrored from the source <ef-video>.

`variants`

React prop: variants
Type: string
Default: ""
Description: Adaptive variant ladder URL, mirrored from the source <ef-video>.

`viewport-width`

React prop: viewportWidth
Type: number
Default: —
Description: Visible viewport width in pixels, used to virtualize thumbnail generation.

CSS Parts

CSS parts
Part	Description
`canvas`	This part is the canvas that renders the filmstrip.